Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
3. dubna 2024
-
3. dubna 2024
-
15. dubna 2024
-
18. dubna 2024
-
28. dubna 2024
-
28. dubna 2024
-
14. května 2024
-
16. května 2024
-
17. května 2024
-
11. června 2024
-
19. května 2024
-
29. května 2024
![OBLIBENE_TITLE2](/templates/102/gr/print-logo.gif)
fotograf
Photoshop tutoriál: skleněná ikonka diskové jednotky
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í).
![](/old-idif/grafika/images4/glass_drive_icon_01.gif)
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í).
![](/old-idif/grafika/images4/glass_drive_icon_02.gif)
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)...
![](/old-idif/grafika/images4/glass_drive_icon_03.gif)
...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ý.
![](/old-idif/grafika/images4/glass_drive_icon_04.gif)
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).
![](/old-idif/grafika/images4/glass_drive_icon_05.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_06.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_07.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_08.gif)
Zde jsou ještě pro jistotu zobrazeny všechny tři vrstvy - popředí, pozadí a prdní strana.
![](/old-idif/grafika/images4/glass_drive_icon_08b.gif)
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%).
![](/old-idif/grafika/images4/glass_drive_icon_09.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_10.gif)
To ale není vnitřní tvar, to je placka.
![](/old-idif/grafika/images4/glass_drive_icon_11.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_12.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_14.gif)
Stejným nástrojem vytvoříme i odlesk v levé části vepředu. Barva je #D21B8B. Kreslíme do nové vrstvy...
![](/old-idif/grafika/images4/glass_drive_icon_15.gif)
...abychom mohli část zasahující do stínů odmazat tvrdou Gumou (Eraser Tool).
![](/old-idif/grafika/images4/glass_drive_icon_16.gif)
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 %.
![](/old-idif/grafika/images4/glass_drive_icon_17.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_18.gif)
I s vrchní vrstvou vypadá ikonka takto. I na obal by se hodily nějaké ty odlesky.
![](/old-idif/grafika/images4/glass_drive_icon_19.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_20.gif)
Vrstvě stáhneme krytí...
![](/old-idif/grafika/images4/glass_drive_icon_21.gif)
...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...
![](/old-idif/grafika/images4/glass_drive_icon_22.gif)
...a opět nezapomeneme stáhnout krytí na sotva znatelnou úroveň.
![](/old-idif/grafika/images4/glass_drive_icon_23.gif)
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...
![](/old-idif/grafika/images4/glass_drive_icon_24.gif)
...a už jen stáhnout krytí, popř. vrstvu ještě jednou zkopírovat a mírně rozostřit filtrem Gaussovské rozostření (Gaussian Blur).
![](/old-idif/grafika/images4/glass_drive_icon_25.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_26.gif)
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).
![](/old-idif/grafika/images4/glass_drive_icon_27.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_28.gif)
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.
![](/old-idif/grafika/images4/glass_drive_icon_29.gif)
Ú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.
![](/old-idif/grafika/images4/glass_drive_icon_30.gif)
A to by mohlo být vše.
![](/old-idif/grafika/images4/glass_drive_icon_31.gif)
Další úpravy ikonky už jsou jen na vás. Přidejte ikonky, slot na DVD, nebo USB konektor...
![](/old-idif/grafika/images4/glass_drive_icon_32.jpg)
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í.
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
29. listopadu 2013
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
11. dubna 2024
-
30. dubna 2024
-
9. května 2024
-
16. května 2024
-
20. května 2024
-
9. června 2024
-
11. června 2024
-
12. června 2024
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI