Adobe Photoshop: Poohlédnutí za designem WWW stránek - Grafika.cz - vše o počítačové grafice

4. dubna 2008, 00.00 | Dřív nebo později každý uživatel Photoshopu pomalu překoná nástrahy
programu samotného, a víc než o jeho funkce se začne zajímat o grafiku jako
takovou. Najednou už není potřeba řešit, kam kliknout, když chcete vytvořit
novou vrstvu, a tak je o mnoho více času na věci jako barvy, umístění prvků
nebo celkový styl grafiky. V dnešním článku se podíváme na design WWW stránek
právě z této stránky ...

Jednat se bude o stránky hudební skupiny Red Marionette (redmarionette.cz). Impuls k jejich redesignu dala fotka z jednoho koncertu, která je dobře vidět na následujícím obrázku (a nebo zde). Takže jsem nelenil a pár minut přemýšlel, co s ní. Nakonec ale stejně zvítězila lenost, a já se rozhodl vytvořit jednoduché stránky postavené převážně na této fotce, doplněné standardními sekcemi a vším tím okolo. Ale nebudeme předbíhat.

K fotce snad jen dodám to, že její nekvalita je způsobená nízkým osvětlením (LED lampy), takže byla focená na ISO 3200, F/2.8. Ale je to jediná fotka skupiny se všemi jejími členy, a k tomu docela pěkně barevná (čehož jak sami zanedlouho uvidíte jsem ještě několikrát využil).

Výška fotky v hlavičce okolo 300 pixelů není zrovna standardní - a mnozí by mohli namítnout, že je zbytečně velká. Fotka však řekne víc než tisíc slov a tak už z následujícího obrázku poznáte, o jaké stránky se bude jednat - stejně, jako to pozná budoucí návštěvník stránek. Zde navíc velikost a barevnost hlavičky kompenzuje obsah stránek - který je (bude) vesměs tvořen především texty, navíc krátkými.

V hlavě jsem si tedy rozmyslel, co všechno by na stránkách mělo být a kde by to asi tak mohlo být umístěné. A protože do hlavy se dívá těžko, překreslil jsem to raději do Photoshopu. Umístění loga bylo jasné už od začátku, velké mezera uprostřed fotky k tomu přímo svádí. Nejasné bylo umístění menu a obsahu, což nejdříve mělo být asi takto...

...později jsem ale přehodnotil situaci a rozhodl se pro umístění menu mezi fotku a samotný obsah. Tím se tyto dva prvky pěkně oddělí, menu bude skvěle viditelné a vlevo navíc (v místě otazníku) vznikne další prostor (pro který se vždy najde využití). Nevýhoda tohoto typu menu je jediná - jsme omezeni šířkou, takže v případě mnoha položek je nutné buď přidat submenu, nebo prostě zmenšit písmo...

Po úvahách o pozici jednotlivých části stránek jsem se tedy rozhodl dostatečně oživit fotku. Zacákaný a špinavý, tzv. grunge design, je sice už dost profláklý, na stránky hudební skupiny se ale hodí. Navíc jsem měl přichystané štětce ještě z článku Photoshop tutoriál: Velikonoční pozadí na plochu, tudíž nebylo nutné nic stahovat. Stačilo jenom fotce přidat masku vrstvy, tu vyplnit černou barvou a následně kreslit bílými štětci a odkrývat tak postupně části, které měly být vidět.

Ve výsledku to dopadlo přibližně takto. Fakt, že vlevo zasahuje štětec i mimo fotku (a tak vytváří ostrý okraj) bude zanedlouho skryt tmavým pozadím (na kterém to nebude až tak nápadné). Jinak by ale stačilo fotku roztáhnout do stran, třeba i jen razítkem...

K složité fotce je třeba zvolit jednoduché pozadí - nejlépe jednobarevné. Jediná otázka tedy zní - jakou barvu použít? Dobré je propůjčit si barvu přímo z fotografie, ještě lepší z pozadí fotky. Růžový flek ukazuje místo samplování barvy, která ve výsledku sice s fotkou ladí, je ale moc do červena (jako pravá polovina fotky).

Proto jsem vytvořil novou vrstvu, ve které jsem si propůjčil průměrnou barvu z levé části fotky, která tíhne k barvě modré...

...a této vrstvě jsem nastavil Krytí na 50%. Tím se slila modrá s červenou (resp. hnědou), a vznikla barva finální - tmavě fialová. Při těchto experimentech je výhodné měnit opravdu barvu celého pozadí, protože z malého fleku (případně z náhledu ve výběru barev) lze jen těžko poznat, jak bude barva na pozadí opravdu vypadat.

Abych se přiznal, výběr vhodné barvy (barev) mi vždycky zabere nejvíc času. V tomto problému však může velmi pomoci specializovaná služba - např. COLOURlovers, aneb komunita milovníků barev, popř. Adobe kuler: stále lepší řešení pro harmonické barvy.

Pro oživení fotky jsem se ještě rozhodl přidat nějaké ty cákance. Aby se k fotce hodily, provedl jsem to velice jednoduchým způsobem. Nejprve stačilo zkopírovat původní fotografii, přidat masku s fleky barvy a následně fotku rozostřit. Před tímto krokem je potřeba zrušit propojení vrstvy a masky (viz následující obrázek), aby se rozostřovala opravdu jenom fotografie a ne i maska.

Se zobrazenou podkladovou fotkou už vznikne celkem pestrý zmatek... Přesně podle plánu.

Menu je část, na které jsem se zasekl na celkem dlouhou dobu. Původní záměr udělat pouze světlejší pruh (barva pruhu je zesvětlená barva pozadí) se ukázal jako nudný a nezajímavý...

Nezbývalo tedy, než pruh nějak oživit. Třeba přeměnou na vystouplou "stužku", která je přes stránky "položena". K tomu bylo potřeba nástrojem Pero vytvořit jednu čtvrtinu stužky...

...a poté tvar třikrát zkopírovat a vhodně pootáčet. Po pečlivém prostudování následujícího obrázku zjistíte, že horní polovina není shodná se spodní, ale na tom už tak moc nezáleží.

Dojem prostorovosti zaručí odlesky - tj. vytvoření nové vrstvy s ořezovou maskou vrstvy předchozí (Ctrl + Alt + G), do které je potřeba vhodně "čmárnout" měkkým bílým štětcem. A protože grafiku vždy oživí nějaké ty přesnější odlesky, nakreslil jsem jich pár i v místech, které jsem nejprve označil obdélníkovým výběrem (M).

Ani s tou ostrostí se to ale nemá přehánět, takže jsem vrstvu zkopíroval, prohnal filtrem Gaussovské rozostření a původní vrstvě stáhnul krytí. Je to moje oblíbená technika, kdysi dávno jsem ji použil například ve článku Photoshop tutoriál: Tvorba sněhuláka - ovšem pro vytvoření stínů.

Stejný postup jsem aplikoval i na druhé straně "pásky". Osvětlení zleva a zprava jsem zvolil jednak z důvodu, že je velmi často používáno při fotografii (a uživatel je tak na něj zvyklý), jednak proto, že jsem potřeboval mít prostřední část přibližně ve stejném odstínu. Položky menu totiž budou jako obrázky s jednobitovou průhledností (s alfa kanálem si stále některé prohlížeče nerozumí, nehledě na zátěž systému). Jakékoliv větší odchylky v barvě pozadí, než pro kterou byl obrázek uložen, nevypadají pěkně (na hranách vzniká ostrý přechod).

Font v menu je stejný, jako v případě článku Photoshop tutoriál: Chlupatá složka (aneb když není čas na nové nápady, recyklujte staré). Vybraná položka v menu je větší a bílá, ostatní jsou menší a méně zářivé (stáhnuté krytí).

Což je opravdu až moc jednoduché, proto jsem k vybrané položce přidal stékající barvu - nakreslenou jako pruhy a tečky nástrojem Zaoblený obdélník. Aby bylo vše v jedné vrstvě, je potřeba průběžně přidržovat klávesu Shift.

Pro jasné oddělení položek v menu jsem ještě rychle nakreslil oddělovník (tzv. divider), pro který stačilo vytvořit novou jednopixelovou stopu štětce s náhodným krytím (na následujícím obrázku označeno - vlastnost Kolísání krytí / Opacity Jitter) a pak už jen "čmárat" sem a tam, resp. nahoru a dolů. Šel by použít i nějaký ten špinavý štětec a kus stopy umazat, v této velikosti je to ale zbytečný luxus.

Po stáhnutí Krytí vrstvy na cca 20% a rozkopírování vypadalo menu hned o něco ucelenější. Když se na to podívám zpětně, mohl jsem možná vytvořit několik různých oddělovníků, takto to možná působí až moc pravidelně. Třeba příště.

Důležité je vždy zkoumat podobu celé stránky, která prozatím vypadá takto. Než jsem se pustil do spodní části, rozhodl jsem se vyplnit prostřední část fotky (hlavičky) logem.

Nejprve jsem nakreslil růžovou elipsu - pro vymezení prostoru a odhadnutí vhodné barvy...

...a následně "posprejoval" vhodnými štětci (z deviantartu). Podkladová elipsa byla vhodná i z toho důvodu, že většina štětců nemá 100% krytí, takže by prosvítala fotka. To jde ale samozřejmě obejít několikanásobným kliknutím na stejné místo (přestože potom hrany stopy štětce trochu utrpí).

Pro ještě výraznější vzhled loga (i když růžová je sama o sobě dostatečně agresivní) jsem vrstvu zkopíroval a rozmáznul efektem Radial Blur - Blur Method: Zoom. Občas je použití tohoto filtru zajímavější než pouhé Gaussovské rozostření.

Po přidání textu vypadalo logo takto (i když uznávám, že logo je opravdu zbytečně honosný název pro text umístěný na fleku).

Opět jeden pohled na celý dokument, chcete-li stránku. Horní část je hotová, zbývá spodní.

Tu jsem se snažil vytvořit v podobném duchu jako zbytek stránky, tudíž s využitím stejných barev a prvků. Jako ukázkový obsah jsem zvolil novinky, které budou zobrazeny na první stránce, a to v zažitém tvaru - datum / čas / nadpis / text novinky.

Přestože pro zobrazení datumu je ve většině případů použita ikonka listu kalendáře (viz např. galerie na serveru smashing magazine), rozhodl jsem se propojit tuto ikonku s logem a místo kalendáře umístil jen další flek. Barva je stejná jako pozadí loga, rovněž je tato barva použita i pro nadpis novinky. Výhoda růžové barvy je prostá - je tak křiklavá, že na sebe okamžitě strhne pozornost. Na druhou stranu přespřílišné použití by mělo za následek opak. Proto už text novinky je jen zesvětlenou barvou pozadí.

Zde je opět náhled na celý dokument.

Pro lepší představu o celku je dobré ukázkovou novinku několikrát rozkopírovat, popř. si vyzkoušet, jak by asi tak mohl vypadat odkaz (a případně i jiné prvky - např. obrázek v novince).

Já jsem se ale pustil do poslední části stránek - a tou je levý pruh, do kterého jsem se rozhodl umístit aktuální koncerty skupiny. I přes malou plochu je tato část ještě důležitější než novinky, proto je text bílý. Kdyby datum bylo stejně jako u novinek s růžovým podkresem, jistě by to pomohlo ještě více.

A protože taková stopa štětce k dispozici není, vytvořil jsem kulatý flek...

...půlku označil a posunul stranou...

...a zbytek vyplnil roztažením vnitřního kraje.

Poté jsem ještě pro jistotu párkrát čmárnul do tohoto prostoru, aby předchozí roztažení nebylo poznat (na první pohled).

Pro jasnější oddělení koncertů a novinek jsem opět použil oddělovník, tentokrát v barvě podkladu menu - v barvě "pásky", na kterou tento prvek navazuje (a postupně se směrem dolů ztrácí).

A to je vše. Kliknutím na následující obrázek zobrazíte náhled na stránky v plné velikosti, popř. se můžete podívat na výsledek na redmarionette.cz.

A co říci na závěr? Tento článek vám neměl ukázat, jak vytvořit přesně tyto stránky (ostatně, kdo by chtěl mít stránky, které již existují), ale alespoň zběžně nastínit způsob uvažování při tvorbě grafiky, ukázat směr. Prostě všechny ty věci, na které ve standardních tutoriálech většinou moc místa nezbývá.

Pokud se zpětně podívám na tuto grafiku, určitě bych zmenšil flek u novinek - i za cenu odebrání času přidání novinky. Pro něco tak nepodstatného jako je datum je prostor zbytečně velký a strhává na sebe moc pozornosti. Taky bych přidal něco pro oživení - vtipné popisky při najetí myší na část fotky, nebo třeba animaci do menu. Možností, jak grafiku vylepšit je vždy celá řada, většinou omezená pouze leností grafiky a/nebo programátora.

A co říci na úplný závěr? Nedívejte se stále jen do monitorů a přijďte si v úterý 8.4. do pražského Futurum music baru poslechnout skupinu Red Marionette společně se skupinami Reweer a Zlatý Voči. Přísun nové inspirace pro tvorbu grafiky je zaručen :)