Photoshop tutoriál: skleněná ikonka diskové jednotky - Grafika.cz - vše o počítačové grafice

27. února 2008, 00.00 | Chcete znát recept na pěknou ikonku? Vezměte jakýkoliv předmět, obalte
jej poloprůhledným plastem (popř. sklem), a máte vystaráno. Podobně, jako to
společnost Apple dělá s většinou produktů si my dnes ukážeme, jak v Photoshopu
obalit do poloprůhledného plastu ikonku diskové jednotky.

Jako inspiraci pro dnešní článek mi posloužil následující set ikonek studia fiftytwo. Originál naleznete např. na serveru deviantart.com. My se pokusíme v dnešním článku stvořit něco podobného - či ještě lepšího.

Začneme v Photoshopu novým dokumentem libovolné velikosti vyplněným libovolnou barvou - např. světle růžovou #D07B9D. Zvolíme nástroj Zaoblený obdélník (Rounded Rectangle Tool), Poloměr (Radius) nastavíme na libovolné větší číslo než bude výška tvaru (tj. např. 20 px) a nakreslíme základ - přední stěnu ikonky. Následující obrázek je ve 200% zobrazení (ikonka je poloviční).

Se stále nastaveným nástrojem nakreslíme druhý tvar s klávesou Alt, o několik pixelů menší na každé straně. Klávesa Alt zajistí, že se tvar od minulého odečte (což je vidět i na následujícím obrázku na liště - stisknutá je třetí ikonka - odečítání).

Protože tvar bude zobrazen z mírného nadhledu, zohledníme perspektivu a trochu jej zdeformujeme. Z menu Úpravy - Transformace (Edit - Transform) vyvoláme funkci Deformovat (Distort)...

...a spodní hranu po obou stranách zúžíme. Pro tuto jednoduchou deformaci by nám stačila i funkce Perspektiva, ale výsledek je v tomto případě stejný.

Transformaci potvrdíme a přepneme se na nástroj pro výběr cest (A). Tvar označíme, zkopírujeme a vložíme (Ctrl + C/V), posuneme směrem dozadu a zmenšíme (Ctrl + T).

Tím máme přední i zadní stranu v jedné vrstvě. Toho hned využijeme při tvorbě ostatních základních vrstev. Tuto vrstvu zkopírujeme (Ctrl + J), nástrojem pro výběr cest (A) označíme a odmažeme menší vnitřní tvary a nástrojem Pero (Pen Tool) přikreslíme další tvar, jak ukazuje následující obrázek. Nezapomeňte nastavit způsob kreslení na přičítání (viz označená ikonka v liště). To bude pozadí ikonky.

Tuto vrstvu opět zkopírujeme (Ctrl + J), nástrojem pro výběr cest (A - na obrázku zaškrtnut - černá šipka) označíme spodní tvar, a tomuto nastavíme režim vykreslování na odečítání. To bude přední vrstva ikonky.

Všem vrstvám necháme bílou barvu, pouze jim vhodně stáhneme krytí a u úplně první vrstvy odmažeme zadní část - už ji nepotřebujeme.

Zde jsou ještě pro jistotu zobrazeny všechny tři vrstvy - popředí, pozadí a prdní strana.

Již nyní je efekt poloprůhledného obalu znatelný. Zkuste si například nástrojem tužka čmárat za nebo dovnitř ikonky a poté dolaďte Krytí jednotlivých vrstev, aby vše bylo OK (přední části ikonky můžeme nechat krytí na 100%).

To by prozatím k obrysu stačilo a tak zkusíme vytvořit vnitřní část. Zkopírujeme vrstvu pozadí ikonky, přebarvíme ji na tmavě růžovou (#9F186B) a vrstvu zmenšíme zkratkou Ctrl + T.

Následně zvolíme nástroj pro výběr bodu (bílá šipka - A) a označíme spodní polovinu vrstvy (to znamená spodní tvar a navíc dva body čtyřúhelníku nakresleného nástrojem Pero). Tyto body nejprve všechny posuneme trochu směrem nahoru a poté je zkratkou Ctrl + T zmenšíme.

To ale není vnitřní tvar, to je placka.

Proto vrstvu ještě jednou zkopírujeme, odmažeme vše kromě spodního zakulaceného tvaru a ten přebarvíme na barvu #C02C87.

Tím máme již všechny tvary hotové a nyní se pustíme do přidávání stínů a světel.

Pro následující kroky jsem skryl vrchní poloprůhlednou vrstvu ikonky. Nad vnitřním růžovým tvarem vytvoříme novou vrstvu, kterou s předchozí svážeme zkratkou Ctrl + Alt + G. Poté zvolíme nástroj Štětec (Brush Tool) a u krajů čmárneme velkou měkkou tmavou stopou. Jak ukazuje obrázek.

Stejným nástrojem vytvoříme i odlesk v levé části vepředu. Barva je #D21B8B. Kreslíme do nové vrstvy...

...abychom mohli část zasahující do stínů odmazat tvrdou Gumou (Eraser Tool).

Tuto vrstvu můžeme zkopírovat, převrátit a posunou na druhý konec ikonky - do pravého zadního rohu. Krytí (Opacity) stáhneme na sotva znatelnou úroveň, např. 20 %.

Podobně se vypořádáme i s přední stranou vnitřní části. Ke krajům vlevo a vpravo přidáme stín, zespodu a z levého horního rohu přidáme světlo.

I s vrchní vrstvou vypadá ikonka takto. I na obal by se hodily nějaké ty odlesky.

Protože mají ale vrstvy stáhnuté krytí, nemůžeme použít minulý způsob tvorby odlesků a stínů (při svázání zkratkou Ctrl + Alt + G přebírá vrstva průhlednost vrstvy předchozí). Proto načteme výběr vrchní poloprůhledné vrstvy (Ctrl + klik na vrstvu), vytvoříme vrstvu novou a této vrstvy přidáme se stále nastaveným výběrem masku (na následujícím obrázku je maska zřetelně vidět).

Přepneme se do vrstvy a opět nástrojem Štětec (Brush Tool) nakreslíme měkký odlesk, který vlevo odmažeme nástrojem Guma (Eraser Tool) a tvrdou stopou.

Vrstvě stáhneme krytí...

...a zkopírujeme ji ještě jednou, přičemž ji převrátíme. Aby byl odlesk zajímavější, můžeme například další část vrstvy odmazat měkkou gumou...

...a opět nezapomeneme stáhnout krytí na sotva znatelnou úroveň.

Protože je náš imaginární plast vyleštěný, měly by se v něm odrážet nejenom odlesky, ale i samotný obsah ikonky. Proto se vrátíme k vnitřním růžovým vrstvám, vybereme tu s přední stranou, vrstvu zkopírujeme a posuneme nad spodní poloprůhlednou vrstvu. S touto vrstvou ji svážeme zkratkou Ctrl + Alt + G, takže bude zobrazená pouze v místě plastu...

...a už jen stáhnout krytí, popř. vrstvu ještě jednou zkopírovat a mírně rozostřit filtrem Gaussovské rozostření (Gaussian Blur).

Poslední detail na ikonce jsou obrysy. Princip je následující. Načteme výběr vrstvy - např. přední stranu vnitřku (Ctrl + klik na vrstvu), vytvoříme vrstvu novou a z menu Úpravy (Edit) vyvoláme funkci Vytáhnout (Stroke) s následujícími parametry.

Vrstvě přidáme masku (označená ikonka na obrázku), kterou vyplníme černou barvou - z původní vrstvy nebude nic vidět (což je záměr).

Poté zvolíme nástroj štětec s velkou měkkou stopou a do masky čmárneme bílou barvou tam, kde chceme mít obrys zobrazený - to znamená v místě dopadajícího světla.

Podobným způsobem můžeme vytvořit i odlesk vespodu, kde byl však výběr před aplikováním postupu zmenšen o jeden pixel (Výběr - Úpravit - Zúžit / Select - Modify - Contract). Kdyby byl hned na kraji, zanikl by vedle spodní bílé vrstvy.

Úplně poslední krok bude ještě větší zvýraznění odlesků. Využijeme k tomu jednu ze základních stop, kterou Photoshop nabízí, a do nové vrstvy s ní čmárneme bílým štětcem v označených místech.

A to by mohlo být vše.

Další úpravy ikonky už jsou jen na vás. Přidejte ikonky, slot na DVD, nebo USB konektor...

Nakonec se mi povedlo najít ještě jednu velmi povedenou ukázku, kterou se můžete inspirovat. Pochází ze serveru bartelme.at.

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í.