Back to basics – Kruhové ikonky

11.03.2010

Seriál Back to basics sa snaží vysvetľovať základné postupy práce v grafických programoch krôčik po krôčiku. Je určený hlavne začiatočníkom, ale aj skúsený používateľ si tu určite osvojí správne postupy, ktoré v porovnaní s tými, ktoré doteraz používal, šetria námahu.

V tejto časti si ukážeme výrobu kruhových symbolických ikoniek v programe Photoshop.

Autor: Antharon | Hodnotenie:

V mojom poslednom tutoriále sa v diskusií objavila výčitka, že moje články sú nepoužiteľné a nevenujú sa základom a spotrebnej grafike a tak rôzne. Preto som sa rozhodol, že napíšem pár článkov pre našich najmenších a pokúsim sa ich takto vychovať aspoň trocha k lepšiemu. Budú o Photoshope, o Blendri, prípadne o nejakej vychytávke. Budem sa usilovať písať to čo najpodrobnejšie a ochotne na všetky otázky odpovedať v diskusií, takže sa pokojne pýtajte. Dnes začneme Photoshopom a vkusnými ikonkami.

Tak poďme na to. Dvojklikneme na Photoshop – ja pracujem v CS3 Essentials, ale malo by to ísť aj v podstatne starších verziách obdobne. Vyskočí nám flash screen, nejaké mená, a rýchlo ubiehajúci výpis systémových hlášok...

A sme na úvodnej obrazovke. Nebudeme sa už teda zdržovať a klikneme na File: New...

V tomto okne si spravíme základné nastavenia. Takže rozmery si nastavíme na 50 px krát 50 px, a v rámci lenivosti pozadie na Transparent, čiže na začiatku nebudeme mať v našom obrázku nič, ani biely podklad. A OK.

Ostane nám niečo takéto:

Teraz si obrázok nazoomujeme tak, aby sme to videli optimálne. Klikneme na Lupu a v hornom menu klikneme na tlačítko Fit Screen.

Keď máme pripravené pracovné prostredie, môžeme sa pustiť do práce na ikonke samotnej.

Klikneme si na ikonku na vloženie krivkového tvaru a v hornom menu zvolíme elipsu. Kruh je len taká pravidelná elipsa a vo Photoshope sa pravidelné veci kreslia so stlačeným Shiftom. A teda v ľavom hornom rohu plátna stlačíme ľavé myšítko, nepúšťame, teraz stisneme druhou rukou Shift a opäť držíme, ťaháme myš do pravého dolného rohu plátna, púšťame myš a potom Shift. Toto poradie je veľmi dôležité. Ak stlačíme Shift pred kliknutím bude to mať iný efekt, ak naopak pustíme Shift skôr ako tlačítko tak sa jeho efekt nedostaví a dostaneme nejakú elipsu. Ak sme teda postupovali správne, tak máme motoricky najťažšiu akciu za sebou.

Teraz sa naučíme používať Layer Style. Vpravo dolu v záložke layers máme našu vrstvu obsahujúcu kruh. Dvojklikneme na ňu v miestach, kde nie je nápis, prípadne klikneme pravým tlačítkom a zvolíme Blending Options. Výsledok je rovnaký. Tu si najprv nastavíme farbu kruhu. Klikneme na riadok Color Overlay, automaticky sa nám odfajkne. Jediné, čo tu budeme meniť je farba. Buď si nejakú zvolíme pomocou možnosti Color Picker, alebo ak potrebujeme byť z nejakého dôvodu presní (napríklad používame na stránke paletu), vložíme jej hexa kód do riadku.

Teraz dáme nášmu krúžku plastický vzhľad. Najprv si v menu Bevel nastavíme veľkosť Bevelu (25 px sme zvolili, aby pokryl celý kruh, ktorý má polomer 25 px). A potom nastavíme slniečko aby svietilo zvrchu pekne šikmo, čiže 90° Angle a 45° Atitude.

Bevel má bez nastavenia kontúry túto kontúru podivného neostrého tvaru, ktorý ešte nie je ani zaguľatený. To zmeníme v menu pod Bevelom, Contour, kde si pohodlne vyberieme z predpripravených tú oblú a zapneme anti-aliasing.

Ďalšou vecou, ktorú nastavíme, bude prvé atypické použitie Layer Stylu. Na úpravu farby použijeme záložku Satin. Keďže ho používame úplne naruby, bude to chcieť viac nastavovania ako predošlé. Blend Mode nastavíme na mód Color Dodge. Ten je sám o sebe väčšinou veľmi výrazný a tak znížime Opacity na 33%. Smer už by sme mali mať nastavený z Bevelu, takže len nastavíme Distance na 10 px a Size na 20 px, zapneme anti-aliasing a zvolíme takú tú divnú kontúru (Rolling Slope - Descending).

Guľôčku už máme, teraz si obdobne ako elipsu zvolíme nejaký Custom Shape a vložíme ho. Pomocou Path Selection Tool si ho môžeme premiestňovať. On na seba vezme po vytvorení rovnaký Layer Style ako guľôčka, čo my nechceme a tak na tento layer klikneme pravým tlačítkom a odklikneme Clear Layer Style, čo z neho zmaže všetky štýly.

A tak ako u elipsy si nastavíme nejaký Color Overlay. Odporúčam biely.

Teraz si nastavíme Bevel, tentokrát ale bude vonkajší. Takže hore si zvolíme Outer Bevel, Direction si nastavíme na down, pretože to chceme mať do guľôčky vyrazené a veľkosť na jednotku. U mňa pôvodne bola tmavá hrana veľmi bledá, tak som Opacity u Multiply dolu nastavil na 100%, ale to už podľa vašej chuti.

Teraz si pridáme niekoľko zľahka okulzných, teda všesmerových tieňov. To sa robí ďalším trikom a ním je opačný Inner Glow. Tu je dôležité nastaviť blending na Multiply, opacitu znížiť od oka, ja som dal 33% a farba musí byť čierna (farebné tiene väčšinou značia, že svetlo bolo pôvodne opačnej farby, ale bolo to vyvážené optikou alebo ľudským okom, napríklad ak sa vám tiene zdajú vonku pri západe slnka namodralé, je to preto, že svetlo má zlatavú farbu).

V smere, z ktorého dopadá svetlo ešte tieto tiene prehĺbime použitím Inner Shadow, kde použijeme defaultné nastavenie, len znížime Distance na 2 a Size na 3.

Teraz si vytvoríme kovový kruh okolo guľôčky. Vezmeme najprv pôvodný layer s kruhom pomocou skratky Ctrl+j si ho zduplikujeme (funkcia nie je vyslovene určená na toto, ale funguje spoľahlivo), u kópie dáme Clear Layer Style a ťahaním presunieme vrstvu úplne hore.

Ideme do Blending Options a tu nastavíme Fill Opacity na nulu. Tým sa nám pôvodný obrázok úplne stratí, ale efekty sa prejavia.

Teraz si pridáme orámovanie. V Layer Styles si klikneme na Stroke a nastavíme ho na Size 2 a Position Inside. Farbu som použil 66% šedú.

Následne pridáme rámu kovový vzhľad. Prepneme sa do záložky s bevelom a nastavíme Style na Stroke Emboss, Size na 2 a Gloss Contour na Ring (taký dvojitý kopček).

Posledné, čo musíme nastaviť je okulzia, ktorú vrhá rám, a to už vieme, je to Inner Glow nastavený na Multiply a čiernu farbu.

A prekvapenie na záver. V čom je tento postup lepší ako väčšina postupov vyžadujúcich kreslenie a mazanie a podobne?

Ak si v Image:Image size... pri zväčšovaní necháte odškrtnutú záložku Scale Styles, tak pri úpravách veľkosti zistíte, že toto riešenie je vektorové a v rozumnej miere (max +/- 5 násobok) mu vôbec nevadí zväčšovanie, či zmenšovanie.

Dúfam, že dnes som sa zavďačil zasa inej kategórií návštevníkov a teším sa na vás nabudúce. A nebojte sa písať otázky, návrhy na ďalšie témy a podobne.