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

15. dubna 2008, 00.00 | V pokračování seriálu o tvorbě grafiky internetového blogu se zaměříme
na tvorbu pomocných ikonek. Konkrétně se bude jednat o podklad pro zobrazení
data přidání článku a tvorbu kalendáře s ikonkou tužky. Ta bude označovat den, kdy
byl přidán článek.

Pro jistotu si opět zopakujeme, jak budeme při tvorbě celé grafiky postupovat:

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

A nebude na škodu prohlédnout si poslední obrázek, který v minulém dílu vzniknul.

Protože samotné pozadí je tak trochu nudné, před přidáváním ikonek přidáme i nějaké ty texty. A abychom stále nekopírovali donekonečna to staré známé Lorem Ipsum, zkusíme být malinko kreativnější a použijeme například názvy písniček...

A jaký zvolíme font? Protože budeme chtít na celých stránkách pouze jeden, musíme použít takový, který je obsažen ve (skoro) každém systému. A právě s příchodem Windows Vista přišlo oživení v podobě šesti nových fontů, optimalizovaných pro clear-type zobrazení. Jeden z nich je i font Calibri, který použijeme právě dnes. Pokud systém Windows Vista nevlastníte, můžete si font stáhnout například společně s programem PowerPoint Viewer.

Jak už jsme si řekli dříve, pro hlavičku použijeme inverzní barvy oproti tělu stránky - to znamená velký nadpis hnědé barvy - #807561.

Kdežto jednotlivé články budou naopak světlým písmem na tmavém podkladu. Aby nebyla barva textu bílá, můžeme zvolit například velmi světlou žlutou #FFFFE9.

Náš dokument by mohl vypadat třeba takto. Zatím vůbec neřešíme umístění jednotlivých prvků, jde nám pouze o to vhodně odhadnout velikost ikonky data vzhledem k nadpisu článku.

Jak asi uhodnete, místo pro datum bude nalevo od nadpisu, takže se do ikonky rovnou pustíme. Začneme obdélníkem tmavé barvy (podkladem kalendáře)...

...následovat bude horní červený pruh barvy #DC5B38.

Přes spodní část nakreslíme další obdélník, tentokrát však už bílý, přičemž nástrojem Pero vhodně upravíme pravou spodní část přibližně do tvaru ohnutého listu (nejprve přidáme do poloviny hran nové body a poté pravý spodní posuneme stranou).

Pro realističtější vzhled můžeme vytvořit novou vrstvu, označit vhodnou část nástrojem Mnohoúhelníkové laso (Polygonal Lasso Tool) a měkkým štětcem vytvořit slabý stín. Vrstvě nezapomeneme nastavit ořezovou masku vrstvy minulé (Ctrl + Alt + G). Taktéž je dobré nekreslit černou barvou, ale zvolit nádech barvy hnědé - ikonka se tak bude víc hodit ke stránkám.

Podobně vylepšíme i záhlaví kalendáře. Nejprve okolo krajů nakreslíme tmavší obrys - například nástrojem Tužka (Pencil Tool) nebo odpovídající funkcí (Vytáhnout), poté vytvoříme na horní i spodní straně odlesk. K tomu můžeme použít Elipsu - tím se bude odlesk ke krajům ztrácet.

Vše završí slabá oranžová záře přicházející zevnitř minulého tvaru. Ve skutečnosti nejde o nic jiného, než světlý oranžový flek nakreslený štětcem do nové vrstvy.

Chcete-li, můžeme záři ještě znásobit tím, že bude přesahovat až mimo tvar - tedy mimo kalendář samotný. Naopak pod listy kalendáře by měl být nepatrný stín. Vše je nakresleno nástrojem Štětec, popřípadě můžeme zkopírovat původní tvary, a ty rozostřit filtrem Gaussovské Rozostření. Štětcem si ale s výsledným stínem můžete více pohrát.

Zde je pohled na ikonku ve 100% zobrazení.

Takže už jen zkusíme, zda se do ikonky dobře vejde datum, a pokud ano, můžeme pokračovat dál.

A to ničím jiným než kalendářem - který bychom chtěli mít v pravém sloupci a ve kterém by měl být jasně označený aktuální den a informace o tom, které dny byly přidány nové články.

Jako podklad kalendáře použijeme jednoduché hnědé (#3D372E) obdélníky. Nejjednodušší je nakreslit jeden, ten zkopírovat (Ctrl + J), naposunovat a poté všechny sloučit do jedné vrstvy (Ctrl + E). U horní řady je kus odmazán - tam budou pouze názvy dnů, takže nebude potřeba tolik místa.

Opět stejným fontem přidáme jednotlivé dny a čísla. Nevybrané dny žlutě, vybraný bíle a budoucí dny hnědě, přičemž stále respektujeme barevnou paletu stránek. Tím, že pozadí obsahuje přechod (a tedy spoustu barev), není vůbec složité najít vhodnou barvu - kapátkem ji jednoduše vybereme z pozadí.

Doplňkovou červenou barvu z hlavičky kalendáře použijeme i zde pro zvýraznění aktuálního dne. Bílý a černý rámeček zajistí maximální možný kontrast. Vytvořit jej můžeme například jednopixelovou Tužkou.

Stejně jako u kalendáře, i zde můžeme využít elipsy pro vytvoření jemných odlesků.

Popřípadě ještě tužkou dokreslit šipku.

Opět jeden 100% pohled. Zbývá už jen jediné - ikonka, která bude znázorňovat den, kdy byl přidán článek. Celkem logicky by to mohla být například tužka - je jednoduchá a snadno rozpoznatelná.

Přestože si jsem jist, že každý ví, jak taková tužka vypadá, začneme jednoduchým nákresem a určíme světelný zdroj - jako obvykle z levého horního rohu.

Přičemž můžeme rovnou přes nákres "tak nějak" vytvořit základ ikonky. Princip je jednoduchý a zde na grafice již několikrát popsaný - nejprve vytvořit základ nástrojem Pero, poté použít štětec a dokreslit přes vrstvu odlesky a stíny. Při kreslení myslete na to, že hned další krok bude ikonka několikanásobně menší, takže není třeba dbát zbytečně na detaily.

Zde je pár článků, které vám mohou při tvorbě napomoci:
Photoshop tutoriál: Tvorba ikonky monitoru
Photoshop tutoriál: Tvorba ikonky zámku
Photoshop tutoriál: Ikonka dopravního kuželu
Photoshop tutoriál: Ikonka helmy
Photoshop tutoriál: skleněná ikonka diskové jednotky

Jak můžete vidět na následujícím obrázku, po zmenšení jsem ještě tužku trochu zkrátil, aby se do předem připraveného místa lépe vešla.

A jdeme ladit detaily. Přesněji pixely - protože při této velikosti už to ani jinak nejde. Levá horní část tužky vypadala na bílém pozadí pěkně, ale na červeném podkladu se ztrácí (vypadá rozmazaně) - proto zde přidáme více světla. Stejně tak můžeme "odpíchnout" opačnou stranu (pravou spodní hranu) tak, že vytvoříme odlesk hrany. Obrázek prozrazuje, že se jedná o bílý trojúhelník nakreslený nástrojem Pero. A stejně tak můžeme přidat ještě další trojúhelník - modrou stopu za tužkou.

Pro ještě lepší oddělení od pozadí můžeme také přidat obrys. Použití efektů vrstvy je ale v tomto případě nevhodné - lepší je nakreslit obrys opět perem, takže můžeme v určitých místech efekt zesílit (vpravo) nebo naopak zeslabit (vlevo v místě dopadu světla).

Poslední věc, která je velmi často používaná u takto malých ikonek, je zvýraznění hran. K tomu můžeme buď použít odpovídající filtr (Doostřit), nebo to udělat ručně - zvolíme nástroj Pero a tmavší barvou obtáhneme jednotlivé hrany na tužce.

Zde je pro porovnání původní zmenšená a upravená ikonka. Přestože větší kontrast hran není na první pohled patrný, dodává ikonce konkrétnější a ostřejší tvar. Jen to samozřejmě nesmíte přehnat.

A zde je již ikonka umístěná v kalendáři.

Ikonku pro nevybrané dny vytvoříme tak, že původní zkopírujeme a nastavíme jí interakci na Světlost (Luminosity). Tím ikonka přebere odstín podkladové (hnědé) vrstvy. Protože se ale tmavý obrys a tuha na tmavém pozadí ztrácí, přidal jsem ještě tužkou další světlý obrys. Bohužel tím ikonka zase o pár pixelů povyrostla a je moc výrazná. Za domácí úkol můžete vymyslet, co s tím :)

My už totiž pro dnešek končíme, a tak jen pro otestování zkusíme ikonku rozkopírovat do více dnů (ano, je opravdu moc výrazná)...

...a to by mohlo stačit. Zde je náhled na celý dokument. Protože všechny základní prvky už máme hotové, v příštím článku si ukážeme, jak je vhodně rozmístit, dotvořit nadpis a panel vyhledávání.