14. září 2011, 00.00 | Elementů pro webové stránky není nikdy dost. Různá tlačítka, slidery, textová okénka, butonky, ... na každém webu jsou zkrátka potřeba. A samozřejmě je nanejvýš žádoucí, aby všechny tyto prvky na konkrétní webové stránce držely jednotný vizuální styl. A právě Styly ve Photoshopu budou hlavním „hráčem“ dnešního tutoriálu. Kromě toho si ukážeme práci s vektorovými tvary a důležitost jejich přesného umístění na mřížku.
Pozn.: Tutoriál je psán pro Photoshop CS3, ale tvořit můžete takřka v jakékoliv verzi programu. Návod vyžaduje základní znalosti aplikace, uvedené klávesové zkratky platí pro Mac OS X, uživatelé Windows si nahradí Cmnd za Ctrl a Opt za Alt. Všechny obrázky níže si můžete rozkliknout na větší náhled.
1) Založte si ve Photoshopu nový dokument o rozměru 800 x 800 ob v režimu RGB. Vyvolejte Předvolby Photoshopu (Cmnd+K), zvolte kartu Vodítka, mřížky a řezy a zkontrolujte, zda máte nastaveny Čáry mřížky a Dělení po 1 bodu. Pokud ne, nastavte.
2) Poklepejte na paletce vrstev na Pozadí, aby se změnilo na vrstvu a vyplňte ji barvou #dcdcdc. Klikněte dole na paletě Vrstvy na ikonku Nová vrstva za současného držení klávesy Option (na PC Alt). Novou vrstvu pojmenujte Šum, změňte jí režim na Překrýt a nechte ji vyplnit neutrální barvou. Poté zvolte z horního menu Filtr > Šum > Přidat šum s hodnotami z obrázku níže. Označte (za držení klávesy Cmnd) obě vrstvy, stiskněte klávesy Opt+Shift a klikněte na ikonku Vytvořit novou skupinu dole na paletě vrstev. Držení zmíněných funkčních kláves nám zajistí fakt, že nová skupina se vytvoří z označených vrstev a ještě nám nabídne okamžitou možnost pojmenování (dejte třeba „background“).
Tip: Vyzkoušejte si i další kombinace funkčních kláves. Pokud budete držet pouze Option, vytvoří se nová skupina s nabídkou pojmenování, ale „mimo“ označené vrstvy. Pokud stisknete při kliku Shift, vytvoří se nová skupina z označených vrstev, ale bez nabídky pojmenování.
3) Založte novou skupinu vrstev a pojmenujte ji „buttons“. Zapněte si přitahování na mřížku nebo ještě lépe na všechno: Zobrazení > Přitahovat. Zobrazte si mřížku pomocí Cmnd+§ a vřele doporučuji si tuto zkratku zapamatovat neboť ji budete pro zapnutí/vypnutí mřížky potřebovat každou chvíli. Zvolte nástroj Zaoblený obdélník – najdete ho v podnabídce nástroje Obdélník (U). V horní liště si navolte, že chcete tvořit vrstvu tvaru, poloměr zaoblení rohů dejte na 5 ob, styl vrstvy na „žádný“ a barvu nastavte na #89d405. Natáhněte obdélník o rozměrech 130 x 35 ob.
Pozn. 1: Zapnutí mřížky před natažením obdélníka je nezbytně nutné. Schválně si zkuste mřížku vypnout a natáhnout obdélník. Potom si řádně nazoomujte dokument a prohlédněte si rozdíl. Obdélník nepřichycený přesně na mřížku má „rozplizlý“ okraj, zatímco „pixel perfect“ obdélník má hranu ostrou jak břitva. Přichycení všech tvarů na mřížku při tvorbě těchto webových objektů je nezbytně nutné a měli byste si na to dávat pozor a tohle pravidlo dodržovat.
4) Vyvolejte okno Styl vrstvy a nastavte parametry podle obrázků níže.
Pozn. 2: Nastavení černobílého gradientu v režimu Překrýt je mnohem výhodnější než nastavovat přímo barevný přechod. V budoucnu tak kdykoliv stačí změnit základní barvu tvaru a překrytí přechodem vytvářející lesk stále „funguje“.
5) Zkontrolujte, zda máte na paletě Vrstev označenou tu s právě vytvořeným zeleným butonkem a klikněte na paletce Styl na ikonku Vytvořit nový styl (a pojmenujte ho třeba podle obrázku). Napište fontem Arial regular (16 b, bílá barva) popis butonku a zarovnejte ho na střed.
6) A jdeme na druhou variantu tlačítka, která ukazuje, co se stane při najetí kurzorem nad buton (tzv. hover). Zduplikujte první butonek i s nápisem, který přepište třeba na „Po najetí“. Vyvolejte okno Styl vrstvy u butonku a změňte parametry podle obrázků níže. Nakonec zase vytvořte nový styl.
7) Zduplikujte třeba druhý butonek i s nápisem a ten přepište třeba na „Po kliknutí“. Vyvolejte okno Styl vrstvy u butonku, změňte parametry podle obrázků níže a poté opět vytvořte nový styl.
8) Nyní uděláme třeba vyhledávací okýnko. Někde v plátně natáhněte vektorový zaoblený obdélník (poloměr zaoblení znovu 5 ob) o rozměru 195 x 20 ob, přiřaďte mu barvu #d2d2d2 a styl „zelený-dolů“. Nezapomeňte mít zapnutou mřížku a tvar perfektně na ni zarovnaný! Vrstvu pomocí Cmnd+J zduplikujte, vezměte nástroj Přímý výběr (A – bílá šipka) a označte čtyři body na levé straně obdélníka. Pomocí šipek na klávesnici (se Shiftem to půjde rychleji) posuňte tyto body doprava tak, aby výsledek měl šířku dejme tomu 25 ob. Tvaru změňte barvu na #89d405 a styl na „zelený-nahoru“ (označit vrstvu na paletce Vrstvy a následně klik na patřičný styl na paletce Styly).
9) V horní liště zvolte nástroj Jiný tvar, z nabídky vyberte šejpíka s názvem Kruh – rámeček a natáhněte ho o rozměru 8 x 8 ob (bílá barva). Nechte označenou vektorovou masku, z horní nabídky vyberte obdélník a tamtéž aktivujte ikonku Přidat k oblasti tvaru. Natáhněte obdélník 7 x 1 ob a všimněte si, že se nevytvořila nová vrstva s tvarem, ale tvar se přidal k prve vytvořenému kroužku. Což ovšem nic nemění na faktu, že i nadále můžete transformovat každý tvar zvlášť. Stačí vzít Nástroj pro výběr cesty (A – černá šipka) a klepnout na ten z tvarů, který chceme upravovat. Zarovnejte oba tvary na mřížku a na sebe, jak je ukázáno na obrázku a následně celý „dvojobjekt“ otočte o 45°. Přidejte nápis Arialem o velikosti 12 b.
10) Zduplikujte všechny čtyři vrstvy a pouze malému zelenému objektu pod lupou změňte styl na „zelený-po najetí“. Takto se zachová butonek, když se nad ním objeví kurzor.
11) Pokračujeme dál třeba tzv. radio buttony a check boxy. Jde v podstatě o jednoduché tvary – zaoblený čtverec, kruh, … zatržítko najdete také v základní nabídce tvarů ve Photoshopu. Spodní tvary mají opět šedou barvu #d2d2d2 a styl „dolů“, horní pak barvu bílou nebo naši zelenou #89d405 a styl „nahoru“.
12) Uděláme ON-OFF posuvníky. Natáhněte zaoblený obdélník 130 x 35 ob (nezapomeňte na řádné zarovnání na mřížku!), dejte mu zelenou #89d405 a styl „dolů“. Zduplikujte vrstvu pomocí Cmnd+J, označte nástrojem Přímý výběr levé body stejně jako u „Search“ a zmenšete kopii obdélníka asi na šířku 55 ob. Barva šedá, styl „nahoru“, dodat nápis ON a hotovo.
13) Celou tuhle sestavu zduplikujte, šedý horní obdélník zarovnejte na levou stranu, nápis přepište na OFF a barvu spodního obdélníka změňte na #7d7d7d.
14) Co nějaké plovoucí okno s tipem nebo nápovědou? Natáhněte zaoblený obdélník 200 x 100 ob, barva zelená, styl „nahoru“. Stejně jako jsme přidávali držátko u lupy přidejte k tomuto tvaru zaoblenou šipku (také ji najdete v základní nabídce jiných tvarů) a umístěte podobně jako na obrázku. Přidejte nápisy a nakonec malinký stín pod šipku. Ten vytvoříte tak, že do nové vrstvy klepnete černým štětcem s velmi měkkým okrajem a tento tmavý „flek“ následně splácnete na elipsu, upravíte velikost a umístění a snížíte hodnotu krytí.
15) Přihodíme „teploměr“ neboli Loading Bar. Natáhněte zaoblený obdélník o rozměru 450 x 15 ob, barva šedá #d2d2d2, styl „dolů“. Zkopírujte přes Cmnd+J vrstvu, zmenšete a umístěte kopii jako na obrázku. Barvu dejte zelenou a styl „nahoru“. Poté založte nový dokument o rozměru 5 x 5 ob s průhledným pozadím, extrémně si obraz přizoomujte, zobrazte si mřížku a vyplňte bílou barvou pixely jako na obrázku. Označte vše (Cmnd+A) a z menu zvolte Úpravy > Definovat vzorek (pojmenujte, potvrďte). Vraťte se k našemu základnímu dokumentu, vyvolejte okno stylů vrstvy u horního zeleného tvaru našeho Loading Baru a nastavte překrytí vzorkem jako na obrázku. Přidejte šedého „jezdce“, kterého vytvoříte stejným postupem, jako základní tvar u Tipu/Nápovědy a nakonec číslo s procentuálním postupem při načítání.
16) Jistě už chápete, že pomocí několika málo vektorových tvarů, jejich kombinací a následnou aplikací jednou uložených stylů lze v relativně krátké době vytvořit celou sadu grafických prvků potřebných pro váš návrh webových stránek. Zkoušejte experimentovat s nastavením stylů, měňte hodnoty a nastavení podle sebe (zajímavých efektů lze docílit např. snížením krytí výplně. Výplně, ne celé vrstvy!), samozřejmě vše ovlivní také barevnost jednotlivých prvků, pozadí atd.
Dodržujte pečlivé zarovnání objektů na mřížku a využívejte režimu Překrýt, jak jsme si řekli ve druhé poznámce. Na závěr pár ukázek, kudy se třeba můžete ubírat…
