Ako vytvoriť 3D tlačidlá v programe Adobe Photoshop

Ako vytvoriť 3D tlačidlá v programe Adobe Photoshop

Existuje veľa úžasných vecí, v ktorých môžete vytvárať Adobe Photoshop ktoré sú užitočné online, od jednoduchých obrázkových rámcov po komplexné používateľské rozhrania. Jednou z najužitočnejších vecí, ktoré môžete vo Photoshope vytvárať, sú 3D tlačidlá, ktoré sa vám budú hodiť, ak prevádzkujete blog alebo webovú stránku s vlastným rozhraním.





V tomto článku vám ukážeme, ako vytvárať 3D tlačidlá vo Photoshope, spolu s vizuálnymi stavmi „hore“ a „dole“, aby ste ich mohli animovať. (V tomto článku sa nebudeme venovať samotnej animácii.)



Krok 1: Pripravte si dokument

Napriek tomu, že sa 3D tlačidlá na webových stránkach zobrazujú najčastejšie, je dôležité si uvedomiť, že pre ne existujú aj ďalšie aplikácie, ako sú animované súbory GIF, zobrazenia makiet produktov a mobilné hry. V závislosti od toho, na čo toto tlačidlo vytvárate, sa váš konečný formát súboru a rozmery môžu líšiť.





Na vytvorenie 3D tlačidla vo Photoshope budete musieť vytvoriť vlastný dokument. Ak to chcete urobiť, otvorte Photoshop a kliknite na Vytvoriť nový> Vlastný . Začnite písať svoje hodnoty.

Ak chcete vytvoriť tlačidlo 3D, budete chcieť horizontálny dokument. Pre naše sme použili:



  • Vysoká 900 x 300 pixelov
  • 300 pixelov/palec
  • Farebný režim RGB

Napriek tomu, že tieto špecifikácie rozhodne nie sú tvrdým a rýchlym pravidlom, zaistí to, že budete mať viac než dostatok priestoru na prácu a možnosť podľa potreby meniť veľkosť tlačidiel nahor a nadol.

Krok 2: Nastavte svoj obdĺžnik pre svoje 3D tlačidlo

Keď nastavíte špecifikácie pre svoj súbor, dostanete sa do pracovného priestoru. Budete mať horizontálne biele plátno v jednej vrstve, a tu začnete stavať svoje tlačidlo.



Ak chcete vytvoriť svoje 3D tlačidlo, kliknite na ikonu Nástroj na zaoblený obdĺžnik na ľavej strane obrazovky, tu je zobrazené červenou farbou. Môžete tiež použiť skratku U k nemu pristupovať.

Kliknite raz na svoju bielu vrstvu: tým sa automaticky vyvolá vaša Vytvorte zaoblený obdĺžnik box. Toto pole budete používať na zadanie rozmerov vášho obdĺžnika.



Pre naše tlačidlo sme použili:

  • 300 pixelov široký
  • 75 pixelov vysoký

Tiež sme zaistili, aby rohy boli zaoblené o 10 pixelov. Ani nie príliš vysoko, ani príliš nízko. Potom sme stlačili OK .

Poznámka: Gombíky sa líšia veľkosťou a tvarom, takže nemáte pocit, že by ste museli používať tieto presné rozmery. Okrem toho, ak hľadáte ďalšie informácie o skratkách, tu sú niektoré z nich najužitočnejšie príkazy klávesnice Photoshopu .

Keď stlačíte OK , Photoshop vytvorí vo vašej vrstve zaoblený obdĺžnik s týmito rozmermi. Môžete to zmeniť Vyplniť a Mŕtvica farby pomocou rozbaľovacích ponúk v ľavom hornom rohu obrazovky.

Na účely tohto tutoriálu --- a na ilustráciu toho, ako môže vyzerať tlačidlo „hore“ a „nadol“-, urobíme, aby bolo tlačidlo „dole“ červené.

Krok 3: Vytvorte si tlačidlo 3D

Keď vytvoríte základné tlačidlo a vyberiete jeho farbu, budete ho chcieť upraviť v Štýl vrstvy dialógové okno. To má vyzerať viac 3D.

Ak chcete získať prístup k svojmu Štýl vrstvy dialógové okno, môžete ísť Vrstva> Štýl vrstvy z horného menu. Môžete tiež dvakrát kliknúť na vrstvu, ktorá obsahuje vaše tlačidlo, aby sa vyvolala automaticky. Tento spôsob je oveľa rýchlejší a osobne ho preferujeme.

Hneď ako sa zobrazí pole Štýl vrstvy, prejdite na možnosť Skosenie a reliéf . Zapnúť.

Je to rýchly a ľahký spôsob, ako dať okrajom tlačidla zvýšený, „3D“ vzhľad. V tomto návode sme použili tieto nastavenia:

Štruktúra

  • Štýl: Vnútorný úkos
  • Technika: Dláto mäkké
  • Hĺbka: 605
  • Smer: Hore
  • Veľkosť: 5
  • Zmäkčiť: 1

Tienenie

  • Uhol: 90
  • Nadmorská výška: 37
  • Režim zvýraznenia: Farebný Dodge, 55% krycia schopnosť
  • Režim tieňa: Viacnásobná, 25% nepriehľadnosť

Ide o to, urobiť nastavenia dostatočne vysoké, aby ste videli určitý rozdiel, ale nie také silné, aby to bolo zdrvujúce.

Potom, čo sme skončili s Bevel & Emboss, sme išli na Obrys a zapol to tiež. Contour robí definíciu Bevel & Emboss o niečo silnejšou a pre tento tutoriál sme vybrali nastavenie Kužeľ - obrátený .

Ďalej zapnite Prekrytie gradientom . Vďaka tomu má tlačidlo zaoblený, mierne „lesklý“ vzhľad. Nastavenia sú nasledovné:

  • Režim miešania: Prekrytie
  • Nepriehľadnosť: 90
  • Štýl: Lineárne
  • Uhol: 90
  • Mierka: 100

Nakoniec sme zapli Vrhať tieň , aby tlačidlo vyzeralo trochu „zdvihnuté“ z bieleho pozadia webovej stránky alebo blogu. Opäť sú tu nastavenia:

windows 7 alebo windows 10?

Štruktúra

  • Režim miešania: Viacnásobné
  • Nepriehľadnosť: 35
  • Uhol: 90
  • Vzdialenosť: 2
  • Šírenie: 6
  • Veľkosť: 8

Kvalita

  • Obrys: Lineárne
  • Hluk: 0
  • Layer Knocks Out Drop Shadow: Zapnuté

Teraz je načase uložiť tieto špecifikácie ako štýl vrstvy.

Krok 4: Uložte ako štýl vrstvy

Akonáhle dokončíte nastavenia tlačidla, začne vyzerať 3D. Pretože je veľká pravdepodobnosť, že vytvoríte viac ako jedno 3D tlačidlo, musíme nájsť rýchly a ľahký spôsob, ako to urobiť.

Tu je postup.

Pred kliknutím OK v Štýl vrstvy v dialógovom okne kliknite na Nový štýl . Keď tak urobíte, Photoshop uloží tento štýl vrstvy, ktorý ste vytvorili pre svoje tlačidlo.

Ak používate Photoshop CC, tento nový štýl sa uloží do vášho Knižnice sekcii, ako vidíte vyššie. Je to veľmi rýchly a ľahký prístup.

Krok 5: Ako používať uložený štýl vrstvy

Teraz, keď ste navrhli svoje tlačidlo a uložili ste ho ako štýl vrstvy, pozrime sa, ako to funguje vo vašom stave „hore“. Bez klamstva, skráti to váš pracovný čas na polovicu.

Najprv vytvoríme ďalšie tlačidlo priamo nad vrstvou červených tlačidiel, podobne. Urobme to zelené, pre dôraz.

Ďalej --- namiesto dvojitého kliknutia na samotnú vrstvu vyvoláte súbor Štýly vrstiev dialógové okno --- dvakrát kliknite na štýl vrstvy vo vašom Knižnice panel.

Keď tak urobíte, Photoshop automaticky použije váš uložený štýl na novú vrstvu tlačidiel, pričom zachová novú farbu a tvar. Teraz máte dve tlačidlá-jedno v hornom a jedno v dolnom rohu-a je to tak jednoduché. Milujem túto skratku.

Krok 6: Pridajte do tlačidla text

Ďalej na tlačidlo pridáme text.

Ak chcete pridať text, vytvorte novú vrstvu nad dvoma vrstvami tlačidiel. Kliknite na Typový nástroj začať písať.

V tomto návode napíšeme slovo „prihlásiť sa na odber“, pretože ho na webových stránkach a platformách sociálnych médií vidíte pomerne často.

Tiež použijeme bezpečné písmo bezpečné pre web. Konečný výber toho, ktorý z nich použijete pre svoje vlastné tlačidlo, je na vás. Montserrat, Proxima Nova, Arial a Verdana sú široko používané alternatívy a sú bezpečné pre web.

Potom, čo je to hotové, je tu ešte niekoľko jemnejších zmien, ktoré musíte urobiť, aby bol tento text „pop“.

Najprv dvakrát kliknite na vrstvu, ktorá obsahuje váš text, aby ste ho mohli vyvolať vo svojom Štýl vrstvy dialógové okno.

Ďalej kliknite na Vnútorný tieň , aby váš text doplnil trochu depresie (alebo zapustenej oblasti). Vďaka tomu to vyzerá, že písmená boli vygravírované do tlačidla. Presné nastavenia, ktoré sme použili v tomto návode, sú uvedené nižšie.

Štruktúra

  • Režim miešania: Znásobiť
  • Nepriehľadnosť: 35
  • Uhol: 90
  • Vzdialenosť: 2
  • Tlmivka: 4
  • Veľkosť: 1

Kvalita

  • Obrys: Lineárne
  • Hluk: 0

Ďalej aplikujte a Prekrytie prechodom k týmto písmenám, aby sa jednoduchšie začlenili do tlačidla bez toho, aby pôsobili plocho. Naše nastavenia sú opäť tieto:

  • Režim miešania: Farebné napaľovanie
  • Nepriehľadnosť: 90
  • Štýl: Lineárne
  • Uhol: 90
  • Mierka: 100

Krok 7: Dokončenie

Keď tento štýl textu vytvoríte-najmä ak ho chcete znova použiť-, choďte na Nový štýl a uložte ho, než kliknete OK .

Keď to máte zabalené, môžete rýchlo prepínať tam a späť na viditeľnosť medzi dvoma vrstvami tlačidiel a zistiť, ako vyzerajú stavy „hore“ a „dole“.

Celkom cool, čo? Ak chcete súbor uložiť, choďte Súbor> Uložiť ako , a uložte ho ako správny formát súboru pre akýkoľvek projekt, na ktorom pracujete.

Prispôsobte si svoj blog pomocou 3D tlačidiel a miniaplikácií

Teraz, keď viete, ako vytvárať 3D tlačidlá vo Photoshope, s ním môžete byť kreatívni a navrhnúť si vlastné 3D tlačidlá tak, aby vyhovovali vašim potrebám. A s týmito schopnosťami vo svojom arzenáli môžete vyrobiť produkt, ktorý je nielen profesionálny, ale aj osobný.

Chcete vedieť o ďalších veciach, ktoré môžete s týmto programom robiť? Tu je ako odstrániť pozadie vo Photoshope .

zdieľam zdieľam Tweet E -mail Ako získať prístup k vstavanej úrovni bublín Google v systéme Android

Ak ste sa niekedy potrebovali uistiť, že je niečo v malom, môžete teraz v priebehu niekoľkých sekúnd dostať úroveň bubliny do telefónu.

Čítajte ďalej Súvisiace témy
  • Kreatívny
  • Adobe Photoshop
  • Tipy na úpravu obrázkov
  • Návod pre Photoshop
O autorovi Shianne Edelmayer(136 publikovaných článkov)

Shianne má bakalársky titul z dizajnu a vzdelanie v podcastoch. Teraz pracuje ako senior spisovateľka a 2D ilustrátorka. Pokrýva kreatívnu technológiu, zábavu a produktivitu pre MakeUseOf.

Viac od Shianne Edelmayer

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber