Dnes si ukážeme postup, pomocí kterého si můžete v Adobe Photoshop vyrobit pro své webové stránky vzhledné tlačítko, neboli také „button“. Návod je snadný a díky němu si můžete vzhled svých tlačítek na stránkách upravit přesně podle svých vlastních preferencí.
Začneme tím, že si ve Photoshopu otevřeme nový dokument o rozměrech 300 × 300 pixelů. Jako barvu pozadí jsem zvolil#151515, ale výběr je zde čistě na vás, měla by se však logicky shodovat s barvou okolí tlačítka na vašich stránkách.
V prvním kroku musíme udělat základní tvar tlačítka. Vyberte nástroj zaoblený obdélník (klávesa U), na horní liště zadejte poloměr 3 pixely a udělejte obdélník. Výsledek by měl vypadat takto:
Nyní musíme rastrovat vrstvu, ve které se zaoblený obdélník nachází. V menu postupně klikejte na Vrstva > Rastrovat > Tvar. Tím nám vznikne nová vrstva obsahující pouze tento obdélník. Dále potřebujeme ještě malý obdélník. Vyberte znovu nástroj zaoblený obdélník, poloměr nastavte na 10 pixelů a vytvořte ho – měl by vypadat stejně jako ten na následujícím obrázku, ovšem bez výběru, o kterém bude řeč v následujícím odstavci.
Když máte obdélník hotov, držte klávesu Ctrl a klikněte na čtvereček (měl by být červený, pokud jste nezadali jinou barvu), který se nachází vpravo v okně s vrstvami. Měli byste vytvořit výběr, který je vidět na následujícím obrázku.
Nyní můžeme vrstvu s červeným obdélníkem smazat, nebudeme ji už potřebovat. Stiskněte klávesu Delete, malý obdélník zmizí, měl by ale zůstat vytvořený výběr. Zmáčkněte znovu Delete, potom hned kombinaci kláves Ctrl+D. Výběr zmizí a výsledek by měl vypadat stejně jako na tomto obrázku:
Základní tvar tlačítka máme hotový a můžeme se pustit do barev. V okně s vrstvami klikněte pravým tlačítkem na vrstvu s obdélníkem a vyberte volby prolnutí. Zde aplikujte následující nastavení:
Zde zvolený odstín barvy saténu má kód #405ba8
S barvami přechodu je to trochu složitější. Je jich 5, v tomto pořadí zleva: #ffffff, #089df1, #0387d2,#015196 a #045cb5. Zarážky jsou na pozicích 0%, 15%, 50%, 85% a 100%. Výsledek by potom měl vypadat přibližně takto:
K dalšímu postupu si budeme muset tlačítko trochu přiblížit, v okně navigátoru tedy zvolte přiblížení 300%.
V dalším kroku si vytvoříme 4 tenké čáry. Zvolte proto nástroj čára, nastavte tloušťku na 1 pixel a barvu na bílou. Na obdélníku vytvořte 4 čáry tak, aby vypadaly jako na následujícím obrázku:
Každá čára by měla vytvořit svoji vlastní vrstvu. U těch malých vodorovných nastavte krytí na 30%, u pravé svislé čáry potom 50% a levou ponechte na 100%. Po zhotovení všech čar musíme vytvořit následující výběr:
Nejdříve zvolte vrstvu, ve které je modrý obdélník; v menu potom jděte na Výběr > Načíst výběr. Měl by se vám načíst celý obdélník. Teď vyberte nástroj Eliptický výběr a nahoře na liště nastavte prolnutí na 0 pixelů a jako typ výběru zadejte Odečíst od výběru – je to třetí ikonka zleva (světlý čtvereček překrývající tmavý). Nyní už nic nebrání tvorbě námi požadovaného výběru. Ten vytvoříme tak, jak je znázorněno na následujícím obrázku.
Stiskněte Ctrl+Shift+Alt+n pro vytvoření nové vrstvy – ta musí ležet nad vrstvou s modrým obdélníkem. Zvolte nástroj Výplň a vyplňte vrstvu bílou barvou jako na obrázku.
Tlačítko je teď napůl bílé a napůl modré, což není zrovna estetické. Vložte teď do vrstvy s bílou částí tlačítka masku. Maska se vkládá kliknutím na ikonku bílého kruhu na tmavém obdélníku, která se nachází v okně s vrstvami úplně dole. Po vložení masky vyberte nástroj Přechod a táhnutím myši jej vytvořte zleva doprava podle šipky na následujícím obrázku. Po aplikaci přechodu ještě změňte krytí vrstvy na 30%.
Pokud vše vypadá jako na následujícím obrázku, můžeme se vrhnout na další krok.
Poslední částí samotného tlačítka bude spodní „svítící“ pruh. Vytvořte si malý obdélník podle obrázku a poté na něj aplikujte následující styly vrstvy:
Barva #9dfcfe
Barvy: #ffffff a #01009a
Barvy přechodu: #6bcaff a #0364cb, zarážky 0% a 100%. Vrstva s malým obdélníkem překrývá velký obdélník, musíme ji proto posunout dozadu, aby nám vznikla následující podoba tlačítka.
Teď už jen vložte znovu masku vrstvy a podle obrázku nastavte přechod a vytvořte jej podle šipky (z prostředku na kraj)
Tlačítko už by mělo být skoro hotové.
Na závěr už zbývá jen doplnit text, já jsem zvolil písmo Tunga a velikost 32 pixelů. A takhle by měl vypadat konečný výsledek:
