Photoshop tutorial: Tvorba ikonky zeměkoule - 1. díl - Grafika.cz - vše o počítačové grafice

30. ledna 2008, 00.00 | Představte si ikonku, která svým významem obsáhne úplně všechno. Jak bude
vypadat? No přeci jako zeměkoule! A podobně jako může mít tato ikonka nekonečné
množství významů, může mít i nekonečné množství podob. Jednu konkrétní si
ukážeme v tomto článku.

Začneme novým dokumentem libovolné velikosti, s pozadím barvy #778CAC.

Pro zeměkouli potřebujeme nějakou tu mapu. Takže otevřeme Google images a zadáma např. globe map. První obrázek který se nám bude líbit si zkopírujeme do dokumentu. Tento můj má jen jeden nedostatek - je fialový. My jej potřebujeme černobílý.

Takže skočíme do menu Obraz - Přizpůsobení - Odbarvit (Image - Adjustements - Desaturate).

Jenže teď je pro změnu mapa šedá. Takže ještě jednou zavítáme do minulého menu, ale tentokrát zvolíme funkci Úrovně (Levels). Klikneme na černé kapátko, a s tímto kapátkem na šedou mapu.

A je to.

Vrstvu skryjeme (použijeme ji až za chvíli) a dáme se do kreslení základu zeměkoule. Tedy kruhu. Proto také použijeme nástroj Elipsa (Ellipse Tool), nastavený na modrou barvu - #3162AF. Velikost tohoto kruhu závisí čistě jen na váš.

Znovu zobrazíme vrstvu s mapou. Na kouli nebude zobrazená celá - proto si z ní vezmeme jenom část. Nástrojem Obdélníkový výběr (Rectangular Marquee Tool) označíme např. čtverec...

...a ten zkopírujeme. Buď v menu vrstvy, nebo zkratkou Ctrl + J.

Teď jen mapu správně prohnout. K tomu dopomůžu filtr Deformace - Prohnutí (Distort - Spherize).

Ten nastavíme na maximální hodnotu - 100% a potvrdíme OK.

To však ještě nestačí, a tak aplikujeme filtr znovu. Nejrychleji klávesovou zkratkou Ctrl + F. To už je lepší, takže vyvoláme transformaci zkratkou Ctrl + T a zmenšíme vrstvu přibližně na velikost podkladového kruhu.

Protože tuto vrstvu použijeme později jako masku, měla by v ní být pouze bílá a černá barva. Pod touto vrstvou tedy vytvoříme vrstvu novou - černou.

Mapu invertujeme zkratkou Ctrl + I.

A sloučíme s vrstvou minulou zkratkou Ctrl + E. Vrstvu celou označíme (Ctrl + A), zkopírujeme do schránky (Ctrl + C) a odznačíme (Ctrl + D). Vytvoříme vrstvu novou (Ctrl + Shift + Alt + N) a této vrstvě (na ukázce pojmenovaná Layer 5) přidáme masku. Tlačítkem, které ukazuje obrázek:

Přepneme se do této nově vytvořené masky (Alt + klik na masku) a vložíme do ní mapu (Ctrl + V). Na ukázce vidíte, že je vše správně (mapa je v masce, a ne ve vrstvě). Takže se přepneme zpět (Alt + klik na masku).

A např. Štětcem (Brush Tool) modrou barvou #649FEF nakreslíme flek v místě, kde má být vrstva.

Aby vrstva nepřečnívala bokem, stiskneme zkratku Ctrl + G (u novějších Photoshopů Ctrl + Alt + G). Teď je již vše v pořádku.

A můžeme se pustit do přidávání efektů vrstev. Začneme vrstvou spodní - dvakrát na ni klikneme a přidáme efekt Vržený stín (Drop Shadow). Parametr Rozsah (Spread) na 100% způsobí, že stín nebude vůbec rozostřený, Vzdálenost (Distance) na 1 px a Velikost (Size) 0 px zase to, že stín bude "přečnívat" pouze jeden pixel bokem. A to kam bude zasahovat určí parametr Úhel (Angle). Ten nastavíme na 90°.

Pro dojem lesklé koule která odráží okolí přidáme efekt Vnitřní Stín (Inner Shadow). Ten nebude stínit, ale svítit. Nastavíme jej totiž na bílou barvu a interakci na Závoj (Screen). Ostatní parametry nastavíme tak, aby vytvářely tvar podobný tomu na obrázku.

A když jsme spokojeni, stáhneme Krytí (Opacity) na cca 17%.

Poslední efekt bude odlesk v levé horní části. K tomu poslouží efekt Překrytí přechodem (Gradient Overlay), nastavený na přechod z bílé do průhledné, Styl: Kruhový (Style: Radial).

Kliknutím na přechod vyvoláme Editor Přechodu, ve kterém si s přechodem malinko pohrajeme. Předně přidáme další zarážku průhlednosti, takže střed odlesku bude mít trochu jasnější (tvrdší) kraje.

Do spodní části přidáme zhruba doprostřed zarážku barvy - #C9E1FF. To by pro přechod stačilo.

Je ale stále takový nudný. Co zkusit nějakou jinou interakci? Třeba Zesvětlit barvy (Color Dodge)? To je až moc výrazné.

Ale Lineárně zesvětlit (Linear Dodge) vypadá o poznání lépe. Přidá do odlesku tu správnou šťávu.

Tím jsme s efekty pro tuto vrstvu skončili, takže můžeme potvrdit OK a pustíme se do vrstvy druhé - mapy.

Zde nasimulujeme efekt zostření, který nedělá nic jiného, než že zvýší kontrast hran. Asi tak, jako když na hrany vně přidáme stín a uvnitř světlo. Obrázek bude vypadat ostřejší. Nejprve proto přidáme efekt Vnější stín (Drop Shadow), barvy modré (#2E60AD), kolem celého objektu - tj. Vzdálenost (Distance) na 0 px. Velikost (Size) zvolíme nějakou vhodnou, např. 5 px.

A ještě světlou část uvnitř - k tomu nám pomůže efekt Vnitřní záře (Inner Glow) nastavený na velikost jednoho pixelu. Krytí (Opacity) snížíme na 43%. A opět potvrdíme OK.

A to je pro dnešek vše. Příště si ukážeme, jak přidat další obrys, stín, detaily a nějaké to pozadí. Na závěr přikládám screenshot ikonky společně s paletkou vrstvy. Vidíte, že i těch pár efektů zvládne udělat divy.

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