Photoshop tutoriál: Ikonka smajlíka jednoduše a rychle - Grafika.cz - vše o počítačové grafice

29. října 2007, 00.00 | Smajlíky je Internet doslova zahlcen. Blikají na nás ze všech stránek,
chodí nám e-mailem, a když už si myslíme, že je jim konec, pošle nám je někdo
přes ICQ. Přesto by byl hřích nevytvořit si také jednu takovou ikonku. A nejlépe
tak, aby byla co nejvíce flexibilní - vytvořená pomocí cest.

Spustíme Photoshop a vytvoříme nový dokument velikosti cca 300 x 300 px, vyplněný tmavě šedou barvou (#464747).

Nástrojem Elipsa (Ellipse Tool) nakreslíme základní tvar pro smajlíka – kruh. Aby byl kruh přesný, vybereme ve volbách nástroje možnost Pevná velikost (Fixed Size) a zadáme velikost 240 x 240 px. Proč? Největší možná velikost ikonek ve Windows Vista je 256 x 256 px, tak ať máme nějakou rezervu (např. na okraj nebo stín).

Barvu zvolíme libovolnou (prozatím) a kliknutím do plochy vytvoříme požadovaný tvar.

Libovolná barva byla z toho důvodu, že chceme mít v kruhu přechod ze světlé barvy do tmavé. To ale nešlo, protože byl tvar reprezentován výplní barvou. Musíme proto vrstvu přepnout na vrstvu přechodu, a to v menu Vrstva - Změnit obsah vrstvy - Přechod (Layer - Change Layer Content - Gradient).

Vrstva bude mít stále stejný tvar, jen teď uvnitř bude přechod. Nastavíme jej ze světle oranžové (#ED9B00) do tmavě oranžové (#E75A00), styl Kruhový (Radial) a myší jej umístíme tak, aby světlá část byla v levé horní části (myší klikneme a táhneme v ploše při stále zobrazeném dialogu přechodu). Je-li přechod naopak, než ho chcete mít (z tmavé do světlé), zaškrtněte volbu Obrátit (Reverse).

To nám jako základ postačí, jde se na přidávání efektů vrstvy. Dvakrát na vrstvu klikneme a začneme obrysem – efektem Vytažení (Stroke). Jak uvidíte později, smajlíkovi přidáme další černou podkladovou vrstvu, takže se tento obrys ztratí, ale do té doby nám dobře poslouží. Nastavíme jej na 3 pixely a barvu na černou:

Další efekt je Vnitřní Stín (Inner Shadow), který při nastavení Úhlu (Angle) na -90°, interakce na Overlay a barvy na černou vytvoří zespoda tmavý stín. Jak moc bude tento stín zasahovat do objektu, určuje parametr Vzdálenost (Distance). Nastavte jej na cca 30 px.

Jakmile jsme s nastavením spokojeni, "rozostříme" tento stín zvýšením hodnoty Velikost (Size), a to na 40 px.

Další stín okolo celého okraje objektu obstará efekt Vnitřní Záře (Inner Glow), nastavený na interakci Normal, barvu #A73B04 a velkou Velikost (Size) - např. 35 px.

A po všech těch stínech přidáme malinko víc odlesku. Trochu nestandardně k tomu použijeme efekt Satén (Satin) (který je většinu času naprosto nevyužit). Pro dobrý přehled nad výsledkem jej nejprve nastavíme na bílou barvu a interakci Normal a začneme ladit jednotlivé parametry. Inspirovat se můžete na následujícím obrázku:

Přepnutím interakce na Překrýt (Overlay), změnou barvy na #FFA300 a stáhnutím krytí zajistíme, že odlesk bude pouze v levé horní části tvaru a jen nenápadný. Na ty pořádné odlesky ještě přijde čas.

A to teď. Potvrdíme efekty vrstvy, přesuneme se do palety vrstev a načteme výběr naší zatím jediné vrstvy (Ctrl + klik na vrstvu).

Tento výběr zúžíme funkcí Výběr - Změnit - Zúžit (Select - Modify - Contract).

A to o 10 pixelů:

Vytvoříme novou vrstvu (Ctrl + Shift + Alt + N) a do připraveného výběru nakreslíme nástrojem Přechod (Gradient Tool) přechod z bílé do průhledné, přesně jak ukazuje obrázek. Při kreslení můžete přidržet klávesu Shift, aby byl výběr přesně kolmý.

Výběr odznačíme (Ctrl + D) a odlesk rozmažeme – filtrem Gaussovské rozostření (Gaussian Blur), nastaveným na cca 4 px.

Stejným způsobem vytvoříme i odlesk spodní – pozor – do nové vrstvy:

Opět jej rozmázneme:

Ovšem tentokrát přepneme interakci na Překrýt (Overlay) a krytí stáhneme na 70 %. Tím bude odlesk sotva znatelný:

Základ máme připravený, začneme proto pracovat na "obličeji". Zvolíme opět nástroj Elipsa (Ellipse Tool), nastavíme černou barvu (D) a nakreslíme levé oko.

Pravé oko bude mrkat, takže začneme elipsou přibližně dvakrát větší, jak ukazuje obrázek:

V liště zvolíme odečtení tvaru a přes elipsu nakreslíme elipsu další, která větší část skryje.

Část tvaru, která zbyla vespod, ještě překreslíme elipsou další:

Stejným způsobem nakreslíme tento tvar ještě jednou. Do nové vrstvy nakreslíme další elipsu:

A přes ní odečteme elipsu tak, aby vznikl vykrojený tvar:

Výsledek ve 100% velikosti ukazuje obrázek. Tím, že máme tvary reprezentovány cestami, můžeme oči libovolně měnit a transformovat bez ztráty kvality, takže pokud se vám zdá, že je "mrknutí" příliš široké nebo otočené, není problém to zkratkou Ctrl + T kdykoliv napravit. 

My jsme ale spokojeni, a tak se dáme do úsměvu. Opravdu velkého a širokého úsměvu od ucha k uchu. Černou barvou nakreslíme elipsu, aby protínala hlavu v místě úst, přičemž nahoře, vlevo i vpravo přesahuje hranice dokumentu.

Tvar označíme černou šipkou (A), zkopírujeme jej a vložíme (Photoshop vloží tvar na stejné místo, takže dokud s ním nepohneme, není vidět, že tam jsou tvary dva). Režim tohoto tvaru přepneme na odečítání (v liště nahoře), vyvoláme transformaci zkratkou Ctrl + T a tvar zvětšíme tak, aby se "pusa" směrem ke kraji hlavy zužovala:

Okolo hlavy však tvar přečnívá, proto černou šipkou označíme cestu hlavy, zkopírujeme a vložíme do tvaru pusy. Tím pádem budeme mít ve vrstvě pusy celkem tři tvary, přičemž tomu nejnovějšímu (kruhu z hlavy), nastavíme režim na Protnutí (Intersect Shape Areas). Tím budou předešlé dvě vrstvy vidět pouze v místě hlavy:

Aby byla "pusa" ještě výraznější, vyplníme spodní část hlavy tmavší barvou. K tomu ale nejprve musíme mít k dispozici ten správný výběr.

Zkopírujeme vrstvu pusy, přičemž jednu velkou elipsu odmažeme a druhé nastavíme režim na odečítání. Vzniklý tvar pokrývá oblast, kterou potřebujeme, takže načteme výběr této vrstvy (Ctrl + klik na vrstvu) a tuto pomocnou vrstvu skryjeme.

Vytvoříme vrstvu novou a nakreslíme do ní přechod z barvy #C63200 do průhledné, jak ukazuje obrázek.

Této vrstvě nastavíme interakci na Násobení (Multiply), a pokud chceme, můžeme náš výsledek prohlásit za hotový.

Ale to my ještě nechceme. Zkusíme přidat ještě jednu podkladovou černou vrstvu, o které jsme si říkali na začátku. Budou to taková "ouška", vytvořená velice jednoduchou cestou.

Do nové vrstvy nakreslíme opět černou elipsu, jak ukazuje následující obrázek. Důležité je, aby byla správně vystředěna:

Tuto cestu zkopírujeme, vložíme a nastavíme režim na Protnutí (Intersect).

Aby tvar nezasahoval tak moc do krajů (vlevo a vpravo), nakreslíme ještě jeden poslední kruh, který opět nastavíme na Protnutí.

Tím vznikne zajímavý tvar a zároveň i naše hotová ikonka.

Jak vidíte, i v menších velikostech je stále poznat, oč jde, a vrstvy složené z cest nám dovolí jednoduše a rychle změnit výraz, barvu nebo i tvar smajlíka. Takže s chutí do toho, já vám jen popřeji hodně štěstí a trpělivosti!

Poznámka na konec: Tím, že jsme přidali černou podkladovou vrstvu, jsme bohužel o pár pixelů překročili maximální velikost ikonky 256 x 256 pixelů. Napravit to lze jednoduše – zmenšením všech vrstev na cca 90 % se do požadované velikosti opět vejdeme a na kvalitě nebude nic poznat. Je to tím, že většina vrstev je tvořena pomocí cest, a ty, co nejsou, jsou rozmazané. I ikonka bez poslední černé podkladové vrstvy ale vypadá dobře, a tak ji můžeme použít, a to bez jakéhokoliv zmenšování.

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.