Photoshop tutoriál: iMyš - tvorba Apple myši - Grafika.cz - vše o počítačové grafice

15. října 2007, 00.00 | Jednoduchá, poloprůhledná a elegantní. Tak by se daly
vystihnout základní rysy myši počítačů Apple. A kdo by nechtěl dělat i
grafiku s těmito vlastnostmi? Pojďme si společně ukázat tvorbu této myši v
Photoshopu.

Pro případ, že vám takováto myš zrovna neleží na stole, se zde můžete podívat, jak vypadá.

Vzhledem k tomu, že větší část je tvořena průhledným plastem, který (pokud zrovna není špinavý) odráží okolí, záleží momentální vzhled myši právě na tom, v jakém prostředí se nachází. Tedy co propouští a odráží. My si práci značně zlehčíme tím, že umístíme myš na bílou plochu. Takže bude skoro celá bílá.

Začneme novým dokumentem, ve kterém nástrojem Zakulacený obdélník (Rounded Rectangle Tool) nakreslíme předběžný obrys myši. Poloměr (Radius) nastavte na číslo překračující šířku myši, např. 100 px. To aby nahoře i dole bylo zakulacení úplné. Barva je světle šedá - #E5E5E5.

Tvaru přidáme obrys. Nejprve efektem Vnější záře (Outer Glow), nastaveným na světle šedou barvu (#DBDBDB) a velikost 3 px. Ve skutečnosti je ale velký pouze dva pixely, protože je vlastnost Rozsah (Spread) stažena na 47 %.

Aby se obrys směrem dolů ztmavoval, přidáme ještě efekt Vržený stín (Drop Shadow). Ten nastavíme na Úhel (Angle) 90°, Vzdálenost (Distance) 1 px a Velikost (Size) 1 px. Rozsah (Spread) na 100 % zajistí, aby nebyl efekt rozmazaný.

Jsme-li s podobou spokojeni, stáhneme Krytí (Opacity) na 10 %.

"Průhledný" kraj myši zajistí efekt Vnější záře (Inner Glow). Velikost (Size) cca 10 px, barva bílá. Z těchto parametrů jednoduše poznáte, že se nejedná o průhlednost, ale pouze o bílý okraj. Nám to ale stačí (myš bude na bílém pozadí).

Pro plastický vzhled začneme přidávat odlesky a stíny. Na první odlesk ještě můžeme použít efekty vrstvy, konkrétně Překrytí přechodem (Gradient Overlay), Styl: Lineární (Style: Linear), přechod z bílé do průhledné. Úhel (Angle) nastavte tak, aby záře šla z levého spodního rohu a poté myší (tou co máte v ruce) posuňte přechod na správné místo. Případně upravte velikost (Scale).

Ostatní odlesky a stíny už musíme přidat ručně. Zavřete proto dialog, vytvořte novou vrstvu a do ní nakreslete dva lineární přechody tak, jak ukazuje následující obrázek. Z šedé (#A7A7A7) do průhledné.

Tuto vrstvu svážeme s vrstvou předchozí zkratkou Ctrl + G (v novějších verzích Ctrl + Alt + G) a stíny jsou na světě. Všimněte si, že vrstva se chová tak, jako by byla ještě pod efekty vrstvy předchozí. To znamená, že nezasahuje do míst, kde je vnitřní žáře. Z tohoto důvodu bylo tentokrát lepší použít tuto cestu, než přidat vrstvě masku. 

Odlesků je ještě málo, tudíž přidáme další vrstvu, do které naopak nakreslíme přechod z bílé do průhledné (na ukázce je na chvíli přebarveno pozadí na šedou, aby byly přechody vidět).

A opět svážeme s vrstvou předchozí. Na tomto obrázku vidíte i aktuální možnou podobu vrstev.

Tím je myš hotová a jen ji přidáme logo jablíčka. Nejjednodušeji tak, že najdeme font, který tento znak obsahuje - v tomto případě font InterSymb. Barva loga je #A9A9A9.

Aby bylo logo výraznější, vytvoříme mu světlý obrys a tmavší stín uvnitř. Nejprve efektem Vržený Stín (Drop Shadow) vykouzlíme nenápadnou bílou záři...

... poté efektem Vnější záře (Outer Glow) vytvoříme výraznější jednopixelový bílý obrys...

... pokračujeme celkovým vnitřním ztmavením krajů efektem Vnitřní záře (Inner Glow)...

... a skončíme u efektu Vnitřní Stín (Inner Shadow). Ten je nastaven tak, aby šel z pravého spodního rohu (stejně jako stín na myši). V levé horní části jablíčka tak vznikne nepatrný odlesk (a díky všem efektům vypadá logo "zapuštěné" do povrchu)

Podíváme-li se na první fotku myši, zjistíme, že přibližně v horní třetině jsou po stranách výstupky. Ty nasimulujeme následovně - měkkým bílým štětcem klikneme v označených místech. Vybereme průhlednost vrstvy myši (Ctrl + klik na vrstvu) a tento výběr od vrstvy odmažeme. Poté opět vybereme průhlednost vrstvy myši, rozšíříme výběr o 2 pixely (aby byl odlesk pouze v obrysu), vytvoříme doplněk průhlednosti a opět od vrstvy odmažeme.

Pro ještě výraznější vzhled tuto vrstvu zkopírujeme (Ctrl + J), invertujeme (Ctrl + I) a posuneme směrem dolů. Případně stáhneme krytí.

Pod myš přidáme stín. Do nové vrstvy nakreslíme elipsu (vybereme elipsový výběr a vyplníme černou barvou).

Tuto vrstvu nejprve rozostříme filtrem Rozmáznout (Motion Blur) nastaveným na 0 ° a poté rozostříme filtrem Gaussovské rozostření (Gaussian Blur). Tento jednoduchý postup přináší celkem věrohodné výsledky.

Mohlo by se zdát, že jsme u konce, ale ... - nejsme. Na začátku jsme si řekli, že myš odráží vše v okolí. A tak si přeci jen alespoň ten jeden odlesk vytvoříme. Bude se jednat o odlesk okna, což je sice jeden z nejpoužívanějších odlesků (a možná už malinko okoukaný), ale je to stále nejvýraznější světelný zdroj v místnosti (ve které se většinou taková myš nachází).

Nástrojem pero nakreslíme přibližný tvar okna zdeformovaný podle obrysu myši.

Do tohoto tvaru nakreslíme příčky v okně, které od původního tvaru odečteme (na nějaké detaily nebo přesnost není potřeba brát ohled).

Vrstvě přidáme masku a do ní nakreslíme přechod z černé do bílé. A to tím způsobem, aby odlesk směrem doprava mizel. Přesně jak ukazuje následující obrázek.

A to je již opravdu vše. Hodně štěstí při práci!

Poznámka na konec: Následující obrázek ukazuje, že ani na tmavším pozadí nevypadá myš nějak ošklivě. Už se ale ztratí dojem průhledného okraje (který na bílém pozadí vzniká). Takže pokud toho ještě nemáte dost, zkuste vymyslet, jak jednoduše tento efekt vytvořit ...

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