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

22. května 2008, 00.00 | V prvním díle seriálu o tvorbě designu WWW stránek jsme si vytvořili
pozadí, hlavičku i patičku, proto je dnes na řadě obsah. Ten se bude skládat
pouze z pár komponent, a tak nám zbude místo i na jednoduchou animaci, která
se bude zobrazovat během načítání obrázku na server.

Pro pořádek si připomeneme co je a bude v jednotlivých dílech seriálu popsáno 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ů

Od minule bychom měli mít přibližně tento obrázek.

Do volného bílého prostoru budeme chtít nyní umístit tři hlavní části stránek. Vybrání požadovaného obrázku z disku, tlačítko pro nahrání obrázku na server a textové políčko pro zkopírování výsledné adresy.

Můj původní návrh vypadal přibližně takto. Na první pohled pěkné, ale v zápětí se ukázalo, že do úzkých sloupců není možné jednotlivé prvky "nacpat".

Proto přichází na řadu možnost druhá - rozdělení plochy na tři řádky. Pro co největší přehlednost přidáme velké čísla a k nim popisný text. Vybraný krok bude výraznou modrou barvou (#1496BF) kdežto ostatní budou malinko zašedlé (#7D888E).

Poté vytvoříme jednoduchou šipku - nakreslíme malý zakulacený obdélník, otočíme jej o 45° (Ctrl + T) a odmažeme levou polovinu (tu nejprve vybereme nástrojem pro výběr bodů cesty A).

Ve výsledku je jedno, zda jsme na začátku použili zakulacený obdélník nebo pouze obdélník, ale původně jsem myslel, že šipka bude větší. Barva je stejná jako text...

...takže jen šipku vhodně rozkopírujeme (Ctrl + J).

Poté se pustíme do jednotlivých políček. Jejich tvorba je jednoduchá - oblast označíme nástrojem obdélníkový výběr (M), novou vrstvu vyplníme bílou barvou (Alt + Backspace) a poté obtáhneme funkcí Vytáhnout (Stroke) nastavenou na jeden pixel a barvu šedou #D3D9DC.

Tlačítko (druhý krok) bude výraznější - modré (#1391C5) s tmavě modrým obrysem (#106F95).

Celý dokument nyní vypadá takto. Zatímco políčka pro vkládání textu (první a třetí) mohou být placatá (ostatně i v systému většinou jsou - popř. malinko zapadlá), tlačítko by mělo být vystouplé a více zářící. Proto se na něj na chvíli zaměříme.

Nejprve nad tlačítko přidáme text (1) - to z toho důvodu, že budeme tlačítko všemožně zesvětlovat, tak ať máme jistotu, že text půjde stále přečíst. Poté nad tlačítkem vytvoříme novou vrstvu svázanou s předchozí (Ctrl + Alt + G), do které nakreslíme zespodu záři měkkým světlým štětcem (2). Naopak z krajů (3) vytvoříme tmavším štětcem ztmavení. Postup opakujeme do doby, než jsme spokojeni (4).

Nakonec označíme nástrojem obdélníkový výběr (M) horní polovinu tlačítka a opět do nové vrstvy nakreslíme buď lineární přechod z bílé do průhledné, nebo můžeme použít bílý měkký velký štětec.

Poté pro větší oddělení od pozadí přidáme další (bílý vnitřní) obrys. Načteme výběr vrstvy (Ctrl + klik na vrstvu), zmenšíme jej o pixel (Výběr - Změnit - Zúžit / Select - Modify - Contract) a do nové vrstvy vykreslíme obrys funkcí Vytáhnout (Stroke) barvy bílé.

Poté stáhneme vrstvě Krytí (Opacity) a můžeme některé části trochu umazat (směrem ke krajům). K tomu použijte buď měkkou velkou gumu se sníženým krytím, nebo přidejte vrstvě masku a kreslete do ní. Druhý způsob má výhodu v tom, že můžeme později obrys libovolně měnit.

Opět jeden pohled na celý dokument.

Nyní vytvoříme tři různé stavy tohoto obsahu - pro každou vybranou část a začneme jak jinak než prvním krokem. Vhodně nastavíme barvu a velikost (nezapomeneme na šipku)...

...a zbytek obsahu zesvětlíme - ten pro nás totiž v prvním kroku není důležitý (dokud nevybereme soubor).

Zesvětlení provedeme následovně - protože na pozadí je přechod, vybereme část obrázku pozadí, do kterého ještě nezasahuje text, tuto oblast zkopírujeme (Ctrl + Shift + C) a vložíme, následně umístíme nad všechny ostatní vrstvy a roztáhneme do stran (Ctrl + T). Na následujícím obrázku je vrstva dobře vidět i v náhledu. Maska vrstvy poté určuje průhlednost - nad prvním krokem je v masce černá barva - tam nebude vidět vrstva vůbec, nad kroky vlevo je v masce šedá barva - ty budou vidět trochu, a v oblasti bílé barvy nebude pod vrstvou vidět nic. Protože má ale vrstva stáhnuté Krytí (Opacity) na 80 %, něco přeci jen vidět bude.

Zašedlé modré tlačítko je stále moc výrazné, proto nad něj umístíme znovu stejnou vrstvu, ovšem přepneme interakci na Barvu (Color) - tím se zbavíme výrazné modré barvy. Opět si všimněte masky vrstvy - bílá barva (místo, kde bude vrstva vidět) je pouze nad tlačítkem.

Ve výsledku je poté v prvním kroku naprosto jasné, co je od uživatele vyžadováno. Ano - tlačítko select je na první pohled nevýrazné, ale toto tlačítko většinou ovlivnit v designu nelze, takže nakonec bude stejně mít podobu podle prohlížeče a systému. Bohužel.

Stejným způsobem vytvoříme i zbývající dva kroky - pokud jste při práci používali masky, pak stačí pouze měnit je a zároveň s nimi barvu písma v levé části obsahu. A tím máme obsah stránek hotový!

Ovšem ještě nekončíme. Mezi druhým a třetím krokem je potřeba vizuálně znázornit, že se něco děje - že se soubor nahrává na stránky. Proto si vytvoříme jednoduchou animaci. Podobný článek na toto téma již vyšel - Photoshop tutoriál: Nekonečná animace načítání, my ovšem dnes nebudeme používat průhlednost, ale pouze zvětšovat a zmenšovat jednotlivé dílky animace - tečky (jinak bude ale animace velmi podobná).

Začneme tím, že nad všemi vrstvami vytvoříme novou modrou vrstvu se staženým Krytím (Opacity) na 80 % a rovnou přidáme i text "uploading...".

Výsledná animace bude mít celkem velký rozměr (aby se dobře hodila k velkému textu použitému v designu) a bude vypadat přibližně tato. Nepochybuji, že byste nezvládli vytvořit těchto pár teček taky, ale...

...pokud vytvoříme vrstvu takto, následně ji zkopírujeme a otočíme, není s předchozí přesně zarovnaná. Je to jednoduše proto, že střed není přesně ve středu pomyslného kruhu, na kterém jsou tečky umístěny. Co s tím?

Řešení je jednoduché. Nejprve nakreslíme velký kruh, který poté zkopírujeme, vložíme a nastavíme mu režim vykreslení na odečítání (druhá ikonka v liště)...

...následně kruh posuneme přesně na místo předchozího - ve výsledku nebude z vrstvy vidět nic (zkuste si skrýt netisknutelné okraje zkratkou Ctrl + H).

Nyní již můžeme umístit tečky animace. Aby byly v předchozím tvaru, kreslíme s klávesou Shift. Začneme první (tečkou úplně nahoře), tu zkopírujeme, posuneme směrem dolů, obě označíme, zkopírujeme, vložíme, otočíme 30° (Ctrl + T) - a takto několikrát po sobě.

Poté tečky vhodně nazvětšujeme. Pokud se vám nechce dumat a vymýšlet čísla z hlavy, stačí na chvilku zapnout Excel a vytvořit jednoduchou tabulku, podle které tečky nazvětšujeme (na ukázce 100% - 315%).

Ve výsledku pak tvar vypadá takto:

Tím máme základ animace hotový a zbytek již provedeme v novém dokumentu (bude to tak jednodušší).

Vytvoříme nový dokument, do kterého umístíme sloučené všechny vrstvy předchozího dokumentu (Ctrl + A, Ctrl + Shift + C) kromě teček animace. Tuto vrstvu do dokumentu přetáhneme zvlášť a poté ji 11x zkopírujeme. Jednotlivé vrstvy vhodně pootočíme (vždy o 30° oproti předchozí) a vše máme připraveno.

Proto podle verze programu Photoshop buď přeskočíme do programu ImageReady (Photoshop 7, CS, CS2) nebo jen zapneme paletku Animace (pro Photoshop CS3).

Zde je velmi užitečná funkce, která vytvoří jednotlivé snímky podle vrstev (proto jsme vše tvořili v novém dokumentu), jmenuje se Make Frames From Layers.

Stačí jen odmazat první (dvě) vrstvy a u ostatních zobrazit pozadí, nastavit vhodně čas, a animace je hotová.

Po kliknutí na tlačítko Play vypadá takto.

Popř. zde níže je ještě náhled na celý dokument i s animací. A to je pro dnešek vše.

Při exportu by stačilo skrýt vrstvu pozadí, zmenšit dokument na velikost animace a nastavit formát GIF a vyhlazování na barvu pozadí (Matte) - kterou bychom odhadli na nějakou modrou. Na následující ukázce je vidět, že by animace byla nejspíš zobrazena jak nad světlou (bílý podklad překrytý modrou barvou), tak nad tmavou barvou (tmavá hlavička překrytá modrou barvou), ve výsledku by ale nebyl s jednobitovou průhledností žádný větší problém. Zkuste sami a uvidíte.

A na co se těšit příště? V posledním díle seriálu na nás čekají jen drobné vylepšení stávající grafiky - přidáme pěkné fotografické poloprůhledné rohy, stín pod stránky a nezapomeneme počítat i s nějakou tou reklamou, která je na podobných stránkách (bohužel) často nadužívaným prvkem.