Photoshop tutoriál: Design webu - sdílení obrázků, 3. díl - Grafika.cz - vše o počítačové grafice

26. května 2008, 00.00 | Poslední díl seriálu o tvorbě WWW grafiky zakončíme přidáním
nezbytných detailů, které průměrnou grafiku pozvednou o úroveň výš. Začneme
přidáním realistického stínu a dojem položeného listu papíru navíc podpoříme
přidáním poloprůhledných fotografických rohů. Nezapomeneme ani na místo pro
reklamu.

Pro pořádek si připomeneme co bylo popsáno v jednotlivých dílech seriálu a můžeme se pustit do práce.

1. díl - vytvoření základu stránek - hlavička, pozadí
2. díl - obsah stránek, animace načítání obrázku na server
3. díl - dodatečné drobnosti, stín, rohy, zapracování bannerů

Jak již bylo napsáno v perexu, začneme přidáním stínu. Ovšem nepoužijeme k tomu efekty vrstvy - rovnoměrný stín okolo celé plochy vypadá lacině a nudně. Místo toho začneme nástrojem Pero (Pen Tool), kterým nakreslíme přibližnou podobu stínu. Protože později bude stránka jako fotka zafixována v rozích, měl by být největší stín v polovině hran - resp. v polovině spodní hrany.

Vrstvu následně rozostříme filtrem Gaussovské Rozostření a vhodně stáhneme Krytí.

Pro rychlé zkontrolování kam až stín zasahuje můžeme na chvíli přepnout na nástroj Kouzelná hůlka (Magic Wand Tool), zapnout samplování ze všech vrstev (Use All Layers) a kliknout kdekoliv do modré plochy. Následující obrázek ukazuje, že je vše v pořádku, stín není zbytečně velký a tak budoucí rozřezání stránky bude bez problémů.

Pustíme se proto do rohů. Začneme nástrojem Obdélník (Rectangle Tool), kterým nakreslíme čtverec a jeden z rohových bodů umažeme (nejprve označíme nástrojem pro výběr bodu A).

Poté stáhneme Krytí (Opacity) a roh pootočíme podle zbytku stránek. Nemusíme ani moc přesně, nepravidelnosti jsou zde žádané.

Následně vrstvu zkopírujeme a přesuneme nad všechny ostatní. Krytí nastavíme přibližně na 50% a Krytí výplně (Fill Opacity) snížíme na cca 40%. Co to znamená? Pokud nyní přidáme vrstvě efekt Vytažení (Stroke) - což taky uděláme, bude efekt vykreslen 50% krytím, kdežto vrstva bude mít krytí pouze 40%. Nastavení efektu samozřejmě necháme na 100%.

Jemné rozostření, které by jistě pod poloprůhledným rohem vzniklo nasimulujeme malým trikem - protože je v ploše pod rohem pouze bílý obrys, zvolíme nástroj Štětec a kreslíme do nové vrstvy bílou měkkou stopou okolo obrysu. Ten pak bude vypadat rozostřeně, a to bez jakéhokoliv filtru. Pro jistotu je dobré přidat vrstvě masku podle rohu (což je vidět i v náhledu).

Odstup od pozadí zajistí stín. Nejprve načteme (Ctrl + klik na vrstvu) výběr vrstvy pozadí (s bílým obrysem) a rohu (klikáme s klávesou Shift), poté zvolíme doplněk výběru (Ctrl + Shift + I)...

..a do nové vrstvy nakreslíme měkkým černým štětcem stín.

Stáhneme krytí...

...a podobně vytvoříme i stín druhý - který bude přes vrstvu pozadí...

...a může vypadat přibližně takto:

Ve výsledku pak dostáváme stín podobný tomu na následujícím obrázku. Stačí jen vhodně doladit Krytí.

Úplně poslední věc na rohu bude zvýraznění obrysu. Načteme výběr základní vrstvy rohu a do nové vrstvy necháme vykreslit obrys funkcí Vytáhnout (Stroke).

Vrstvě přidáme masku a do ní čmárneme velkým černým štětcem ve směru, který ukazuje šipka. Z této strany začne obrys pomalu mizet, takže nakonec zůstane pouze v levém horním rohu.

Finální roh ve 100% velikosti vypadá takto:

Proto všechny vrstvy rohu umístíme do nové složky, kterou 3x zkopírujeme a vždy otočíme o 90°. Nezapomeneme také ropzkopírovat a umístit podkladovou vrstvu rohu - která musí být pod všemi vrstvami.

Čímž dostáváme již skoro finální podobu grafiky (po kliknutí se obrázek zobrazí ve 100% velikosti).

Úplně poslední část stránek bude vyhrazení prostoru pro reklamy. Jsou všude, otravují nás ale když se vhodně zakomponují, nemusí to být tak strašné. Důležité je s nimi počítat hned od začátku už v návrhu - my si situaci usnadníme tím, že si na ukázku zobrazíme pouze textové reklamy a ne obrázkové bannery.

Pro reklamy vyhradíme horní pruh, který vyplníme tmavší barvou - #0E79A4.

A někde na internetu najdeme obrázek "reklamy google", který invertujeme (Ctrl + I) a nastavíme mu interakci na Závoj (Screen).

Pro ještě lepší oddělení pozadí reklam použijeme trik z článku Photoshop tutoriál: Design grafiky blogu, 4. díl - v přechodu mezi tmavou a světlou plochou vytvoříme tmavší a světlejší pruh (řádek) pixelů, čímž se hrany zvýrazní.

A horní část bude vypadat víc "zapadle" a tím pádem nevýrazně.

Poté stačí jen umístit již zmiňované textové reklamy, a je hotovo. Na ukázku lze použít náhodný text generovaný například tímto Lorem Ipsum generátorem.

Následující obrázek ukazuje všechny čtyři fáze nahrávání obrázku, přesně jak jdou za sebou. A já vám už jen popřeji hodně štěstí při tvorbě vlastní grafiky!