Photoshop tutoriál: Design grafiky blogu, 5. díl - Grafika.cz - vše o počítačové grafice

7. května 2008, 00.00 | Design grafiky blogu již máme od posledního článku hotový, a proto na
nás v poslední části seriálu čekají už jen technické věci. Grafiku, kterou
jsme v předchozích dílech pracně tvořili, musíme dostat do takové podoby, aby
byla použitelná v HTML kódu, je třeba vhodně upravit průhlednost a jednotlivé části
rozřezat...

Naposledy si tedy projedeme jednotlivé díly a můžeme se pustit do práce.

1. díl - tvorba pozadí
2. díl - tvorba ikonek (datum, tužka...)
3. díl - rozmístění prvků, barevné schéma, panel vyhledávání
4. díl - dodatečné drobnosti (RSS ikonka, ostatní ikonky, zápatí)
5. díl - favikona, příprava dat pro programátory

Z druhého dílu seriálu máme stále ještě nedořešenou ikonku tužky v nevybraném dni - s bílým obrysem vypadá zbytečně velká a výrazná...

...proto obrysy odmažeme...

...ale zároveň musíme celou vrstvu zesvětlit, aby byla na tmavém pozadí dostatečně vidět.

Napomoci může i bílý obrys vykreslený do nové vrstvy, kterému stáhneme krytí.

Výsledek sice není úplně ideální, ale svůj účel plní - a alespoň již ikonky nejsou tak mohutné.

Tím už máme opravdu vše hotové a můžeme se pomalu pustit do řezání grafiky. Před tím ale musíme vyřešit průhlednost - protože tu většina ikonek obsahuje. Když se podíváme například na list kalendáře, tak ten obsahuje minimálně červenou záři okolo horní části a černý stín v části spodní. Aby se takový obrázek uložil správně, museli bychom jej uložit ve formátu PNG s alfa kanálem, a podpora alfa kanálů není stále ještě v prohlížečích dostatečně podporována... nehledě na to, že je zbytečné cpát alfa kanál tam, kde to není nutné. Za chvilku uvidíte sami.

Nejprve tedy například do nového dokumentu přesuneme ikonku kalendáře, skryjeme nepotřebné věci (datum, den) a poté vše sloučíme do jedné vrstvy (Ctrl + E).

Na ikonku aplikujeme akci ze článku Photoshop: Převod průhlednosti na masku (akcí)...

...čímž se průhlednost pixelů uloží do masky vrstvy a ve vrstvě zůstanou pouze neprůhledné pixely (toto je dostatečně vidět na náhledu v paletce vrstev).

Pro převod na jednobitovou průhlednost stačí jen masku prohnat filtrem Práh (Treshold), hodnota uprostřed (128) je ve většině případů ideální.

Ano - přišli jsme tak o tu pěknou záři a stín, ale teď se podívejte na následující ukázku. Poznáte na první pohled rozdíl mezi levou stranu (ikonka s alfa kanálem) a pravou stranou (ikonka s jednobitovou průhledností)?

Díky přímým liniím a skoro čtvercovému tvaru je rozdíl sotva znatelný. Po zvětšení je vidět, že na světlém pozadí (v horní části stránky) má nová ikonka zbytečný tmavý pixel (na obrázku označený), na tmavém pozadí (pravá půlka obrázku) se ale tento pixel ztratí. Můžeme jej tedy odmazat nebo nechat, je to celkem jedno. Pozadí listu kalendáře máme hotové.

Přesuneme se proto k ikonce tužky (teď se velmi omlouvám, ale nějakým nedopatřením už na předchozích screenshotech byla vidět nová podoba tužky). V levé části následujícího obrázku vidíte aktuální podobu ikonky, které přidáme obrys nástrojem Pero (jednoduše jej nakreslíme)...

...který případně ještě ztmavíme, všechny vrstvy sloučíme do jedné a nakonec vrstvu opět projedeme akcí, která uloží průhlednost do masky.

A stejně jako minule - na masku aplikujeme filtr Práh (Treshold). Protože tužka obsahuje čáry v úhlu 45°, které i bez vyhlazení vypadají dobře, je výsledek opět pěkný.

Jediný problém je se stopou, kterou za sebou tužka zanechává. V původní ikonce stopa postupně mizela - měnila se průhlednost. Protože průhlednost ale už použít nemůžeme, musíme si pomoci jinak. A to tak, že do masky nakreslíme tužkou postupně menší a menší dílky, dokud stopa nezmizí. Na následujícím obrázku vidíte v horní části podobu masky, pod ní původní ikonky a novou ikonku s jednobitovou průhledností.

Zde je ikonka umístěná v kalendáři.

Můžete namítnout, že bychom nemuseli ikonku tvořit takto složitě - protože se narozdíl od listu kalendáře nachází na stále stejném (červeném) pozadí. Co ale když bychom chtěli toto pozadí měnit při najetí myši? Krom toho rozdíl není zas tak drastický.

Přesouváme se k ikonce další - komentáře. Zde je problém, protože ikonka je celé jednobarevná a je tvořena převážně průhlednými pixely. Po aplikování postupu vznikne ikonka podobná té vlevo, která má již zbytečně ostré hrany a nehodí se k textu (i když i tak by použít zřejmě šla).

Ukážeme si proto druhý způsob, který sice programátory na chvilku zaměstná, výsledek ale bude hezčí ikonka - vytvoříme totiž ikonky hned dvě, jednu pro světlejší a jednu pro tmavší pozadí.

Nejprve označíme ikonku a tuto část zkopírujeme (Ctrl + Shift + C)...

...a vložíme do nového dokumentu. Zvolíme nástroj Kouzelná Hůlka, vypneme vyhlazení a odmažeme světlé hnědé pozadí.

Následující obrázek ukazuje, že tato ikonka umístěná ve spodní části stránek (na tmavém pozadí) nevypadá dobře, proto vytvoříme ikonku druhou.

A to stejným postupem. Co všechno člověk neudělá, aby se vyhnul poloprůhledným obrázkům...

Další část je nadpis. V původním dokumentu vytvoříme novou bílou vrstvu pod nadpisem a ten poté zkopírujeme do našeho nového dokumentu (opět Ctrl + Shift + C)...

...a opět musíme odmazat bílé pozadí. Pokud se totiž podíváme na původní dokument, zjistíme, že část nadpisu zasahuje trochu i do pozadí stránek - tedy do jiné barvy, než bílé.

Opět k tomu použijeme nástroj Kouzelná Hůlka (Magic Wand Tool) a klávesu Delete.

Pro otestování můžeme přesunout ořezanou vrstvu bez pozadí zpět do původního dokumentu. V první části obrázku je nadpis na správném místě, druhá část ukazuje nadpis posunutý o několik pixelů dolů - zde už je vidět, že je vrstva vyhlazená na bílou barvu pozadí... to je však jen na ukázku a nemusíme to řešit, protože ve výsledných stránkách bude zobrazeno to, co je vidět na první části.

Tím máme skoro všechny části grafiky umístěné v novém dokumentu a můžeme vytvořit řezy - slices. Nejjednodušeji přes menu Layer - New Layer Based Slice. Tento postup poté opakujeme pro každou vrstvu...

...skryjeme vrstvu pozadí a vše můžeme uložit - Soubor - Uložit pro web (File - Save For Web).

A abychom ještě nekončili úplně, vytvoříme si nakonec favikonku - před kreslením si nezapomeňte přečíst článek 15 tipů pro tvorbu favikony.

Začneme definováním oblasti 16x16 pixelů, kterou vyplníme známou červenou barvou z pozadí kalendáře (#E06433) a po vzoru ikonky komentářů můžeme zjemnit okraje poloprůhlednou jednopixelovou gumou. Stejně tak můžeme vytvořit jako základ obdélník se zakulacenými kraji odpovídajícím nástrojem, je to jedno.

Poté nad tuto vrstvu vložíme naši starou známou tužku, přičemž nastavíme vrstvě ořezovou masku vrstvy předchozí (Ctrl + Alt + G).

Poté vytvoříme ještě jednu vrstvu, do které poloprůhlednou jednopixelovou tužkou nakreslíme obrys. Nebojte se přitom vytvořit občasné nepravidelnosti, u levého spodního rohu přidat, naopak směrem doprava nahoru ubírat krytí...

Nakonec vytvoříme screenshot prohlížeče (PrintScreen) a ikonku umístíme do lišty pro otestování. Stejně tak to můžete udělat i s náhledem stránek. A to je vše. Navrhnuto, rozřezáno a připraveno pro programátory. Hodně štěstí s vaším vlastním designem!

Poznámka na konec: Záměrně jsme přeskočili otázku pozadí - jednoduše proto, že je hotové už od minulých dílu. Rozdělili bychom jej zřejmě na dvě části - jedna opakující se pro celé stránky (pouze hnědý vzorek), druhý obrázek by byl zobrazen pouze v horní části stránek (přechod z bílé do hnědé). Správné navazování je také již vyřešené. Poslední poloprůhledný prvek v designu je pozadí kalendáře v pravém sloupci - ale i to lze jednoduše nahradit obrázkem, například pruhy každý druhý řádek - náhled na takové řešení byl vidět hned v prvním článku v následujícím obrázku. A že by rss ikonka neměla být v jednom obrázku společně s nadpisem? To je přeci jasné...