Photoshop tutoriál: Cenovka - Grafika.cz - vše o počítačové grafice

28. ledna 2008, 00.00 | Sleva, výprodej, krach, novinka ... to je jen malý výčet visaček, které
denně potkáváme a které si již našly cestu i na Internet. Proto abychom šli s
dobou, vytvoříme podobnou visačku v Photoshopu. Přestože je článek trochu
delší, je určen především začátečníkům.

Začneme novým dokumentem (Ctrl + N), který vyplníme (Alt + Backspace) například barvou #926D63. A hned se dáme do visačky - jako základ nám poslouží obdélník nakreslený stejnojmenným nástrojem (Rectangle Tool) barvy bílé.

Protože chceme, aby byl na jedné straně zkosený (a s dírou na provázek), nakreslíme druhý obdélník, který od původního odečteme (kreslíme s klávesou Alt, nebo použijeme odpovídající ikonku v liště - na obrázku označena)...

...zvolíme nástroj pro výběr cesty (A), označíme nový obdélník...

...a zkratkou Ctrl + T jej otočíme o 45°.

Se stále zvoleným nástrojem pak posuneme pootočený obdélník se stisknutou klávesou Alt směrem nahoru, čímž ho zkopírujeme. Pro přesné zarovnání můžeme použít odpovídající ikonky nahoře v liště.

Chybí už jen dírka na provázek, kterou obstará elipsa nakreslená opět stejnojmenným nástrojem (Ellipse Tool), společně se stisknutou klávesou Alt (odečítání).

Tím máme základní tvar hotový, takže jej přebarvíme na červenou barvu (#D70004) a pootočíme o 45° (Ctrl + T).

Aby směrem doleva nahoru přecházela barva visačky do oranžové, vytvoříme novou vrstvu (Ctrl + Alt + Shift + N), do které nakreslíme nástrojem Přechod (Gradient Tool) přechod z oranžové (#FD7201) do průhledné.

A aby byl tento přechod vidět pouze v místě visačky, nastavíme vrstvě ořezovou masku vrstvy předchozí zkratkou Ctrl + Alt + G. Tuto skutečnost symbolizuje malá šipka nalevo od vrstvy.

Stejným způsobem vytvoříme ještě jedno zesvětlení, tentokrát však nástrojem Štětec (Brush Tool) barvy žluté (#FFD200).

Zde je náhled na aktuální podobu visačky:

Abychom visačku lépe oddělili od pozadí, přidáme ji obrys(y) - přes efekty vrstvy. Nejprve dvakrát klikneme na vrstvu a přidáme efekt Vnitřní Záře (Inner Glow). Velikost (Size) 2 px, barva bílá, Krytí (Opacity) přibližně 50%.

A tmavší rámeček efektem Vnitřní Stín (Inner Shadow). Velikost (Size) 1 px, barva černá.

Aby byl obrys výraznější, změníme interakci na Lineárně ztmavit (Linear Burn).

A už můžeme vyzkoušet umístění textu. Nástrojem Text napíšeme požadovaný slogan, aby se do malého prostoru vešel, zvolil jsem font Arial Narrow.

Vrstvu otočíme o 45°, posuneme nad visačku, případně změníme velikost a třeba i stáhneme Krytí (Opacity) na 80 %.

Visačka je ale nudná, plochá, nezajímavá. Proto se ji pokusíme trochu vylepšit. A to pořádným obrysem. Ten jsme sice už vytvořili přes efekty vrstvy, ale tím, že je všude stejný, je nezajímavý. Proto vytvoříme nový rámeček, viditelný pouze v některých místech.

Začneme tím, že nastavíme výběr vrstvy visačky (Ctrl + klik na vrstvu) a z menu Úpravy (Edit) vyvoláme funkci Vytáhnout (Stroke). Barva černá, velikost 1 px.

Po vytažení vypadá obrázek takto.

My vrstvě přidáme masku vrstvy (viz ikonka na následujícím obrázku)...

...a masku vyplníme černou barvou. Poté v místech, kde chceme výraznější obrys, kreslíme barvou bílou. Použijeme k tomu buď nástroj Přechod z bílé do průhledné, nebo nástroj Štětec.

Obdobně vytvoříme znovu i bílý vnitřní obrys, který budeme chtít nahoře výraznější. Načteme výběr vrstvy, vyvoláme funkci Vytáhnout, jen barvu změníme na bílou a velikosti na 2 px.

Výběr zúžíme o jeden pixel - Výběr - Změnit - Zúžit (Select - Modify - Contract).

A tuto část z vrstvy odmažeme (delete).

Vrstvě opět přidáme masku, vyplníme ji černou barvou a pouze v horní části do masky nakreslíme bílý flek. Tím vznikne nahoře pěkný odlesk.

Dále přidáme stín. Podkladovou vrstvu zkopírujeme (Ctrl + J)...

...a přebarvíme na černou barvu.

Aby byl stín postupně rozostřený, vytvoříme si nejprve vhodnou masku. Přepneme se do režimu rychlé masky (Q)...

...a zde nakreslíme lineární přechod z černé do bílé.

Opět se přepneme zpět...

...a vrstvu rozostříme. Ve Photoshopu 7 využijeme funkci Gaussian Blur, v novějších verzích funkci Lens Blur - která vytvoří realističtější výsledek.

Ve Photoshopu verze 7 je bohužel nutné aplikovat funkci několikrát s různým nastavením, aby byl výsledek použitelný.

Po vhodném rozmazání vrstvu pootočíme (Ctrl + T) a posuneme pod ostatní vrstvy.

Nástrojem Guma (Eraser Tool) s tvrdou stopou odmažeme přesahující část vlevo.

A pod všechny vrstvy umístíme něco, na co budeme chtít visačku přichytnout. Například velký text. Na následující ukázce budeme chtít "přicvaknout" visačku k písmenu I.

Vytvoříme proto nástrojem Elipsa (Ellipse Tool) kruh, který bude zasahovat jak do otvoru ve visačce, tak do písmene I (barva kruhu je #402F2B).

A poté nakreslíme ještě jeden kruh se stisknutou klávesou Alt (režim odečítání). V levé části necháme kroužek široký alespoň tři pixely (později se dozvíte proč).

Nyní je potřeba kroužek skrýt v místě, kde je za písmenem I a za visačkou. Tato místa nejprve označíme nástrojem Mnohoúhelníkové laso (Polygonal Lasso Tool).

A s nastaveným výběrem přidáme vrstvě masku.

Pokud výsledek vypadá jako na obrázku nahoře, musíme masku invertovat zkratkou Ctrl + I.

Dostáváme se k třípixelové šířce kroužku. Tu jsme vytvořili proto, abychom do ní mohli nakreslit odlesk. Nástrojem Tužka (Pencil Tool) velikosti 1 px, barvy bílé, přičemž směrem dolů stáhneme Krytí (Opacity). Tak, jak ukazuje následující obrázek.

Úplně poslední krok je přidání stínu pod kroužek - na písmeno I. K tomu využijeme měkký štětec se staženým krytím.

A to je již opravdu vše. Zde je náhled na výslednou cenovku, která je přesunuta nad písmeno A. Vidíte, že i tam vypadá dobře. Takže - hodně štěstí při práci!

Podobné tutoriály v angličtině:

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