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

21. března 2008, 00.00 | V dnešním článku se podíváme na to, jak vytvořit z fotografie ikonku. Není na
tom nic složitého, na druhou stranu ale nejde jen fotku zmenšit a myslet si, že
jsme hotovi. Menší či větší úpravy jsou vždy nutností. A především - ikonka by
měla obsahovat průhlednost!

Fotografie a ikonka mají rozdílné vlastnosti a především velikosti. Fotka je vždy mnohonásobně větší, a tak je logické, že obsahuje spoustu detailů a prvků. Naproti tomu ikonka je plochou velmi omezená, proto se musíme soustředit jen na to nejdůležitější. Abychom si práci trochu usnadnili, určíme si velikost ikonky 128 x 128 px (což je maximální velikost v systému MAC OS X, v systému Windows Vista je tato velikost dvojnásobná). Troufnete-li si na víc, zkuste vytvořit ikonku 32 x 32 nebo 16 x 16 pixelů tak, aby bylo stále poznat, že jde o budík.

Druhý rozdíl mezi ikonkou a fotkou je v průhlednosti. Ta je u ikonky tak nějak samozřejmá, přičemž může být buď jednobitová (pixel je 100% průhledný, nebo 100% neprůhledný), nebo vícebitová (pixel může mít různý stupeň krytí). Tím nám automaticky vyvstává otázka vymaskování objektu, tedy jeho oddělení od pozadí. Naštěstí je u ikonky situace velmi zjednodušená..., ale nebudeme předbíhat.

Základem je dobrá fotka. Bez se té nikam nedostaneme – a tak si ji rovnou ukážeme. Jednobarevné pozadí a dobrá ostrost je přesně to, co od fotky určené pro ikonku požadujeme. Proto si tuto fotku uložte a otevřete v Photoshopu.  

Ikonka velikosti 128 x 128 pixelů má spousty výhod. Třeba tu, že ve větším rozlišení můžeme pracovat tak trochu nahrubo, protože po zmenšení se tyto nepřesnosti ztratí. A tak nebudeme složitě manipulovat s lasem ani křivkami, a vezmeme si na pomoc úplně obyčejnou kouzelnou hůlku. U komplikovanějších tvarů a poloprůhledných objektů samozřejmě musíte použít některou z odpovídajících technik. K tomu se vám budou hodit následující články:

Photoshop: Maskování průhledné sklenice
Photoshop: Maskování objektů
Photoshop: Maskování problematických objektů

Zpět ale k naší Kouzelné hůlce. U ní můžeme dokonce vypnout vyhlazení (Anti-alias). Důležité je nastavit vybírání sousedních oblastí (Contignous) - to aby se nám nevybíral i ciferník, který má také světlé pozadí. Toleranci nastavte od oka, klikněte do bílé plochy a podívejte se, co všechno se označilo. Pokud je výběr "tak akorát", nechte nástroj stále zvolený a s klávesou Shift klikáme i do ostatních míst (díra mezi zvonky), na šedý prostor vlevo, a tak dále:

Ani stín nechceme, takže klikáme klikáme a klikáme:

Dokud se nedoklikáme k něčemu takovému. Stín i noha budíku už mají dost podobný jas, a tak bude jednodušší si pomoci trochu jinak.

A to přepnutím se na chvíli do režimu Rychlá maska - Q. V tomto režimu upravujeme výběr tím, že jej vlastně kreslíme. Podobně jako když kreslíme do masky vrstvy, která pak ovlivňuje její průhlednost.

Nastavení režimu není moc důležité, přesto pokud na ikonku kliknete dvakrát, můžete si zobrazení rychlé masky upravit (především nastavit, jak moc bude maska vidět). 

Zvolte nástroj Tužka (Pencil) a nepřesnosti upravte. Bílou barvou mažete, černou výběr přidáváte anebo naopak. Záleží, jak máte nastavenou masku, prostě to zkuste. Stejným způsobem upravte i pravou nohu a odmažte všechny tečky a nedokonalosti, které jsou ve výběru zbytečně:

Nakonec se opět písmenem Q přepněte do normálního režimu. Vidíte, že výběr je již pěkný.

A tak s tímto nastaveným výběrem přidejte vrstvě masku vrstvy (kliknutím na odpovídající ikonku v paletě vrstev):

Vidíte-li vše ostatní, jen ne budík, musíte masku invertovat. Ujistěte se, že ji máte vybranou (je kolem ní černý obrys), a stiskněte zkratku Ctrl + I.

A vše je v pořádku:

Vytvoříme proto (konečně) nový dokument velikosti 128x128 px a tuto vrstvu do něj přesuneme. Vyvoláme transformaci zkratkou Ctrl + T a zmenšujeme, dokud není vrstva dostatečně malá. Na obrázku vidíte, že prostor není vůbec velký (počítejte s tím, že vespod bude ještě stín), a tak jsem se rozhodl oželet horní ouško budíku. Transformaci potvrďte klávesou Enter a...

...ve vybrané masce nástrojem Štětec odmažte zbývající část ouška (vlevo i vpravo):

Tuto vrstvu duplikujte (Ctrl + J) a skryjte. Bude se nám za chvilku hodit, použijeme ji jako stín.

Nejprve se ale musíme zbavit nehezkých okrajů. Ty první nám zůstaly ještě ze zmenšování - jsou to rovné světlejší čáry na krajích:

Zbavíme se jich jednoduše - do masky vrstvy dokreslíme černou tužkou okraje. Buď poslepu, nebo zobrazte jen masku vrstvy tím, že do ní kliknete se stisknutou klávesou Alt. Zpět se vrátíte stejným způsobem.

Horší to je s bílým krajem budíku, který vznikl jednoduše tak, že byl budík vyfocen na bílém pozadí. Na černém pozadí ale moc září a svítí. Naštěstí i na toto má Photoshop funkci. Jenže ta předpokládá, že je vrstva bez masky. Proto musíme nejprve masku odstranit (označit masku a kliknout na koš) a v dialogu zvolit „použít masku“ (Apply).

Druhý krok je odpovídající funkce v menu Layer - Matting. Jsou zde hned tři, jedna pro celkové odstranění kraje (Defringe) a dvě pro odstranění kraje černého (Black) nebo bílého (White). My zvolíme odstranění bílého kraje.

Výsledek ukazuje následující obrázek. Funkce není nějak zázračná a téměř vždy je jí potřeba nějak pomoci (nebo si pomoci funkcemi jinými). Jak je ale vidět, některé místa se celkem povedla (označená šipkami). V horní polovině budíku už bohužel není funkce tak výrazná. Věřím ale, že na to, jak to opravit, přijdete sami.

Poslední úprava je přidání stínu. Zobrazíme skrytou vrstvu, u které smažeme masku (tentokrát ji ale nezachováváme - zvolíme Delete), a nastavíme ji interakci na Násobení (Multiply). Pozadí dokumentu nastavte na světlejší, aby byl účinek lépe vidět. Pokud se vám zdá stín moc tmavý, stáhněte vrstvě krytí, pokud se vám zdá naopak slabý, vrstvu ještě jednou duplikujte.

Zde je budík na různých pozadích. Jak vidíte, i bez dalších úprav je ikonka hned použitelná. Hodně štěstí při vytváření vašich vlastních!

Poznámka nakonec: Námi vytvořený stín je sice pěkný, jakmile ale vypneme vrstvu pozadí, bude vypadat dokument přibližně takto (označené místa jsou po odmazaném oušku). Průhlednost nikde! Abychom mohli uložit dokument jako ikonku s průhlednosti, musíme si pomoci jinak. Například tak, že vytvoříme novou černou vrstvu, které nastavíme budík jako masku. Ale na to již jistě přijdete sami. Hodně štěstí při práci!

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