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

23. dubna 2008, 00.00 | Ve čtvrtém pokračování seriálu o tvorbě grafiky blogu na nás čekají
již pouze drobnosti, na které v minulých dílech nezbyl čas. Konkrétně se bude
jednat o jednobarevné ikonky komentářů, RSS ikonka, která na žádném
blogu nesmí chybět, a stránku i článek zakončíme vhodným zápatím.

Jako již obvykle začneme přehledem tvorby:

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 přidáme náhled na poslední obrázek, který vzniknul v minulém díle seriálu. K finální podobě stránek nám už opravdu chybí pouze malý krůček.

Začneme od toho nejjednoduššího - ikonky komentářů. Protože většina blogů je právě na komentářích založená, musíme už na první stránce náležitě oznámit, jak moc se u daného článku komentovalo. Mohli bychom napsat jen suše "23 komentářů", ale ikonka bude jistě srozumitelnější než text a zároveň zabere méně místa. A jak bude vypadat? Postačí komiksová bublina.

Tentokrát už ale nebudeme kreslit vrstvu tvaru, protože v této velikosti je stejně rychlé, pokud vezmeme nástroj Tužka (Pencil Tool) nastavený na velikost jednoho pixelu, nastavíme barvu textu (#FFFFE9) a nakreslíme základ - obdélník...

...kterému přikreslíme zobáček...

...a protože text má pěkné zakulacené okraje, zakulatíme i ikonku. K tomu zvolíme nástroj Guma (Eraser Tool), opět velikosti jeden pixel, přičemž stáhneme Krytí na cca 30 % a mírně zjemníme okraje - jak ukazuje následující obrázek.

Rovněž můžeme "přidat" něco dovnitř ikonky, třeba tři tečky. Ve skutečnosti nic nepřidáváme, ale naopak opět umazáváme pixely nástrojem Guma.

Poté přidáme číslo, které bude značit počet komentářů, a je to.

Následující obrázek ukazuje výsledek ve 100% velikosti.

Tudíž se můžeme pustit do další části - a tou je RSS ikonka. Již dříve vyšel na grafice článek Photoshop tutoriál: tvorba RSS ikonky, my se dnes ale oprostíme od jakýchkoliv efektů a zkusíme udělat ikonku co nejjednodušší.

Přiznám se, že jsem na RSS ikonku v průběhu tvorby zcela zapomněl, a tak jsem později marně hledal místo, kam ji umístit. Po vzoru nestandardních umístění ikonek (článek na smashing magazine) jsem se nakonec rozhodl pro pozici hned vedle nadpisu. Tam ji alespoň nikdo nepřehlédne. Jinak bychom ji samozřejmě mohli bez problému umístit do pravého sloupce někam pod kalendář.

Jako základ nám poslouží zaoblený obdélník nakreslený nástrojem stejného názvu. Barva je - jak už je u RSS ikonek zvykem - oranžová #FF9C00. S hnědým nadpisem to trochu začíná připomínat Kofolu, ale to se občas stává...

K vytvoření známého tvaru z ikonky by bylo nejlepší použít Illustrator, pouze bychom nakreslili dvě kružnice, kus odmazali, nastavili větší obrys a bylo by... Ale jde to i v Photoshopu, pouze se musíme smířit s tím, že obrys u vektorových tvarů nenajdeme, a tak si musíme pomoci jinak.

A to nakreslením jednoho kruhu, přes který nakreslíme druhý, přičemž držíme stisknutou klávesu Alt - tím se nastaví režim na odečítání.

Poté ještě jednou a nakonec už pouze jednu kružnici - pro přičítání naopak slouží klávesa Shift.

Poté "odmažeme" od tvaru přebývající části, například nástrojem Obdélník, opět s přidrženou klávesou Alt.

A vše sloučíme do jednoho tvaru stiskem tlačítka Zkombinovat (Combine).

Opět porovnáme ikonku s nadpisem, který má všechny okraje zakulacené, kdežto ikonka má některé části zbytečně hranaté. Proto ještě jednou odmažeme kraje tvaru (na obrázku to jsou ty dva obdélníky), a místo toho nakreslíme čtyři zakulacené obdélníky (s klávesou Shift samozřejmě).

Pro internetové nováčky, nebo spíše pro zpestření, můžeme opět přidat ručně nakreslený nápis RSS. Tím bude všem naprosto jasné, co od ikonky očekávat.

Tudíž se už jen podíváme na náhled ve 100% velikosti, a jsme-li spokojeni, můžeme pokračovat dál.

A to úplně poslední částí stránek - zápatím. Schválně jsem si v minulém návrhu nechal vespod dostatek místa, protože jak bylo nedávno ukázáno ve článku na smashing magazine, zápatí, neboli footer nemusí sloužit jen pro suché vypsání textu "copyright @ 2008 ....".

Proto i my tuto část nějak rozumně vyplníme. Třeba přehledem nejčtenějších a nejdiskutovanějších článků, přidat můžeme i zběžné informace o stránkách.

Začneme definováním oblasti, kterou použijeme jako zápatí. Od zbytku stránky ji oddělíme tmavým pruhem - barvy #1B1814.

Aby bylo oddělení výraznější, vytvoříme nad zápatím jednopixelový světlejší (#474136) pruh.

Ve výsledku pak vypadá, že zápatí je trochu "zapadlé", a tedy na první pohled méně důležité - což je dobře.

Pro správné umístění textů si opět na chvilku zobrazíme pomocné linky z minulého článku. Jediný rozdíl je v tom, že díky použité velikosti písma máme mnohem více prostoru, a proto zvolíme třísloupcové rozvržení.

A rovnou můžeme k prvnímu sloupci přidat ikonku komentářů - pouze jí nastavíme Krytí na 50%, zde již nemusí být tak výrazná.

Použití ikonky u komentářů ale zároveň znamená, že bychom měli nakreslit i nějakou ikonku k nejčtenějším článkům. Počet návštěv vhodně vyjádří ikonka uživatele, například propůjčená ze systému MAC OS.

Při kreslení (Tužkou) začneme opět obdélníkem (nejlépe stejné velikosti jako ikonka komentářů). Poté odmažeme gumou pusu, oči a nos...

...a stejným nástrojem, pouze se sníženým krytím začneme umazávat pixely na krajích, čímž vzniknou opět zaoblené kraje.

Ostatně zaoblit můžeme i vnitřní část. Jen si dejte pozor, ať to nepřeženete a ikonka není naopak rozmazaná.

Po skončení kreslení opět stáhneme Krytí na 50 %...

...a ikonku rozkopírujeme k jednotlivým nadpisům.

Tím jsme se zdárně dostali ke konci, a můžeme si plně vychutnat pohled na hotovou grafiku...

...samozřejmě jen do té doby, než přijde další a už poslední díl seriálu, ve kterém si ukážeme, jak jednotlivé části rozřezat a připravit pro budoucí zpracování do html kódu.