Jak vytvářet 3D tlačítka v Adobe Photoshopu

Jak vytvářet 3D tlačítka v Adobe Photoshopu

Existuje spousta úžasných věcí, ve kterých můžete vytvářet Adobe Photoshop které jsou užitečné online, od jednoduchých rámců obrázků až po složitá uživatelská rozhraní. Jednou z nejužitečnějších věcí, které můžete ve Photoshopu vytvořit, jsou 3D tlačítka, která se vám budou hodit, pokud provozujete blog nebo web s vlastním rozhraním.





V tomto článku vám ukážeme, jak vytvářet 3D tlačítka pomocí Photoshopu, spolu s vizuálními stavy „nahoru“ a „dolů“, abyste je mohli animovat. (V tomto článku se nebudeme zabývat samotnou animací.)



Krok 1: Připravte si dokument

Zatímco na webech se 3D tlačítka objevují nejčastěji, je důležité si uvědomit, že pro ně existují i ​​jiné aplikace, jako jsou animované GIFy, makety produktů a mobilní hry. V závislosti na tom, pro co toto tlačítko vytváříte, se váš konečný formát souboru a jeho rozměry mohou lišit.





Chcete -li vytvořit tlačítko 3D ve Photoshopu, budete pro něj muset vytvořit vlastní dokument. Chcete -li to provést, otevřete Photoshop a klikněte na Vytvořit nový> Vlastní . Začněte psát své hodnoty.

Chcete -li vytvořit 3D tlačítko, budete chtít horizontální dokument. Pro naše jsme použili:



  • 900 x 300 pixelů vysoký
  • 300 pixelů/palec
  • Barevný režim RGB

I když tyto specifikace rozhodně nejsou tvrdým a rychlým pravidlem, zajistí vám to, že budete mít více než dostatek prostoru pro práci a možnost škálovat velikost tlačítka nahoru a dolů podle potřeby.

Krok 2: Nastavte obdélník pro své 3D tlačítko

Jakmile nastavíte specifikace pro svůj soubor, dostanete se do pracovního prostoru. Budete mít horizontální bílé plátno v jedné vrstvě, a tady začnete stavět své tlačítko.



Chcete -li vytvořit své 3D tlačítko, klikněte na Nástroj se zaobleným obdélníkem na levé straně obrazovky, zde vidět červeně. Můžete také použít zkratku U k němu přistupovat.

Klikněte jednou na svou bílou vrstvu: tím se automaticky zobrazí vaše Vytvořte zaoblený obdélník krabice. Toto pole použijete k určení rozměrů vašeho obdélníku.



Pro naše tlačítko jsme šli s:

  • 300 pixelů široký
  • 75 pixelů vysoký

Také jsme zajistili, aby rohy byly zaobleny o 10 pixelů. Ani ne příliš vysoko, ani příliš nízko. Pak jsme stiskli OK .

Poznámka: Knoflíky se liší podle velikosti a tvaru, takže nemusíte mít pocit, že musíte použít tyto přesné rozměry. Kromě toho, pokud hledáte více informací o zkratkách, zde jsou některé z nich nejužitečnější příkazy klávesnice Photoshopu .

Když stisknete OK , Photoshop vytvoří ve vaší vrstvě zaoblený obdélník s těmito rozměry. Můžete to změnit Vyplnit a Mrtvice barvy pomocí rozevíracích nabídek v levém horním rohu obrazovky.

Pro účely tohoto tutoriálu --- a pro ilustraci toho, jak může vypadat tlačítko 'nahoru' a 'dolů'-, uděláme, aby naše tlačítko 'dolů' bylo červené.

Krok 3: Vytvořte si tlačítko 3D

Jakmile vytvoříte základní tlačítko a zvolíte jeho barvu, budete ho chtít upravit v Styl vrstvy dialogové okno. To proto, aby to vypadalo více 3D.

Chcete -li získat přístup ke svému Styl vrstvy dialogové okno, můžete jít Vrstva> Styl vrstvy z horního menu. Můžete také dvakrát kliknout na vrstvu, která obsahuje vaše tlačítko, a automaticky ji vyvolat. Tato cesta je mnohem rychlejší a osobně ji preferujeme.

Jakmile je pole Styl vrstvy aktivní, přejděte na možnost Zkosení a reliéf . Zapnout.

Jedná se o rychlý a snadný způsob, jak dodat hranám vašeho tlačítka zvýšený „3D“ vzhled. V tomto kurzu jsme použili tato nastavení:

Struktura

  • Styl: Vnitřní úkos
  • Technika: Dláto měkké
  • Hloubka: 605
  • Směr: Nahoru
  • Velikost: 5
  • Změkčit: 1

Stínování

  • Úhel: 90
  • Nadmořská výška: 37
  • Režim zvýraznění: Barevný Dodge, 55% krytí
  • Režim stínu: Vícenásobná, 25% neprůhlednost

Jde o to, udělat nastavení dostatečně vysoko, abyste viděli nějaký rozdíl, ale ne tak silné, aby to bylo zdrcující.

Poté, co jsme skončili s Bevel & Emboss, jsme šli do Obrys a taky to zapnul. Contour dělá definici Bevel & Emboss o něco silnější a pro tento tutoriál jsme vybrali nastavení Kužel - obrácený .

Dále zapněte Překrytí přechodu . Díky tomu má tlačítko zaoblený, mírně „lesklý“ vzhled. Nastavení jsou následující:

  • Režim prolnutí: Překrytí
  • Neprůhlednost: 90
  • Styl: Lineární
  • Úhel: 90
  • Měřítko: 100

Nakonec jsme zapnuli Vrhat stín , aby tlačítko vypadalo trochu „vystouplé“ z bílého pozadí webové stránky nebo blogu. Opět zde jsou nastavení:

používá Firefox méně RAM než chrom

Struktura

  • Režim prolnutí: Násobek
  • Neprůhlednost: 35
  • Úhel: 90
  • Vzdálenost: 2
  • Rozpětí: 6
  • Velikost: 8

Kvalitní

  • Obrys: Lineární
  • Hluk: 0
  • Layer Knocks Out Drop Shadow: Na

Nyní je na čase uložit tyto specifikace jako styl vrstvy.

Krok 4: Uložte jako styl vrstvy

Jakmile dokončíte nastavení tlačítka, začne vypadat 3D. Protože je velká šance, že vytvoříte více než jedno 3D tlačítko, musíme najít rychlý a snadný způsob, jak toho dosáhnout.

Zde je postup.

Před kliknutím OK v Styl vrstvy v dialogovém okně klikněte na Nový styl . Když to uděláte, Photoshop uloží tento styl vrstvy, který jste vytvořili pro své tlačítko.

Pokud používáte Photoshop CC, bude tento nový styl uložen do vašeho Knihovny sekci, jak vidíte výše. Je to velmi rychlý a snadný přístup.

Krok 5: Jak používat uložený styl vrstvy

Nyní, když jste navrhli své tlačítko a uložili jste ho jako styl vrstvy, pojďme se podívat na jeho stav ve stavu „nahoru“. Žádné lži, zkrátí to vaši pracovní dobu na polovinu.

Nejprve vytvoříme další tlačítko přímo nad vrstvou červených tlačítek, podobně. Pojďme to zdůraznit zeleně.

Další --- místo dvojitého kliknutí na samotnou vrstvu vyvoláte Styly vrstev dialogové okno --- poklepejte na styl vrstvy ve vašem Knihovny panel.

Když tak učiníte, Photoshop automaticky použije váš uložený styl na novou vrstvu tlačítek, přičemž si zachová novou barvu a tvar. Nyní máte dvě tlačítka-jedno ve stavu nahoru a jedno dolů-a je to tak jednoduché. Miluji tuto zkratku.

Krok 6: Přidejte do tlačítka text

Dále přidáme text na tlačítko.

Chcete -li přidat text, vytvořte novou vrstvu nad dvěma vrstvami tlačítek. Klikněte na Typový nástroj začít psát.

Pro tento tutoriál napíšeme slovo „přihlásit se k odběru“, protože je to něco, co na webech a platformách sociálních médií vídáte poměrně často.

Použijeme také písmo bezpečné pro web. Konečná volba, kterou z nich použijete pro své vlastní tlačítko, je na vás. Montserrat, Proxima Nova, Arial a Verdana jsou široce používané alternativy a jsou bezpečné pro web.

Poté, co je to hotovo, je tu však ještě několik jemnějších změn, které musíte provést, aby byl tento text „pop“.

Nejprve dvakrát klikněte na vrstvu, která obsahuje váš text, abyste jej mohli vyvolat v souboru Styl vrstvy dialogové okno.

Dále klikněte na Vnitřní stín Chcete -li do textu přidat trochu deprese (nebo propadlé oblasti). Díky tomu to vypadá, že písmena byla vyryta do tlačítka. Přesná nastavení, která jsme použili pro tento tutoriál, jsou uvedena níže.

Struktura

  • Režim prolnutí: Násobit
  • Neprůhlednost: 35
  • Úhel: 90
  • Vzdálenost: 2
  • Dávit se: 4
  • Velikost: 1

Kvalitní

  • Obrys: Lineární
  • Hluk: 0

Dále použijte a Překrytí přechodu k těm písmenům, aby se snadněji začleňovaly do tlačítka, aniž by vypadaly ploché. Naše nastavení je opět:

  • Režim prolnutí: Color Burn
  • Neprůhlednost: 90
  • Styl: Lineární
  • Úhel: 90
  • Měřítko: 100

Krok 7: Dokončení

Poté, co vytvoříte tento styl textu-zejména pokud jej chcete znovu použít-, přejděte na Nový styl a uložte jej, než kliknete OK .

Když je to zabalené, můžete rychle přepínat tam a zpět na viditelnosti mezi vašimi dvěma vrstvami tlačítek, abyste viděli, jak vypadají stavy „nahoru“ a „dolů“.

Docela cool, co? Chcete -li soubor uložit, přejděte Soubor> Uložit jako a uložte jej jako správný formát souboru pro jakýkoli projekt, na kterém pracujete.

Přizpůsobte si svůj blog pomocí 3D tlačítek a widgetů

Nyní, když víte, jak vytvářet 3D tlačítka ve Photoshopu, můžete s ním být kreativní a navrhnout si vlastní 3D tlačítka podle svých potřeb. A s těmito dovednostmi ve svém arzenálu můžete vytvořit produkt, který je nejen profesionální, ale i osobní.

Chcete vědět o dalších věcech, které můžete s tímto programem dělat? Tady je jak odstranit pozadí ve Photoshopu .

Podíl Podíl tweet E-mailem Jak získat přístup k integrované úrovni bublin Google v systému Android

Pokud jste se někdy potřebovali ujistit, že je něco v malém, můžete nyní v několika sekundách získat úroveň bubliny v telefonu.

Číst dále Související témata
  • Tvořivý
  • Adobe Photoshop
  • Tipy pro úpravy obrázků
  • Výukový program Photoshopu
O autorovi Shianne Edelmayer(136 publikovaných článků)

Shianne má bakalářský titul v oboru designu a vzdělání v podcastingu. Nyní pracuje jako hlavní spisovatelka a 2D ilustrátorka. Pokrývá kreativní technologie, zábavu a produktivitu pro MakeUseOf.

Více od Shianne Edelmayer

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru