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

19. května 2008, 00.00 | V následujícím seriálu se opět podíváme zblízka na webdesign -
tentokrát si za cíl dáme stránky určené primárně pouze pro nahrání vlastního
obrázku, který zůstane na serveru uložen, vy pak můžete danou adresu použít
například k umístění obrázku na fórum. V prvním díle vytvoříme hlavičku a
okolí obsahu.

Jako inspiraci si můžeme vzít například stránky http://uloz.to/, které ještě trochu víc ořežeme, a necháme pouze nejpodstatnější funkce. Těch je už tak dost málo, takže se budeme moci dostatečně soustředit na grafiku. A na co se můžete těšit?

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ů

Práci nám značně usnadní použití již hotové ikonky, jejíž návod je kompletně popsán ve článku Photoshop tutoriál: skleněná ikonka diskové jednotky. Vypadá přibližně takto:

Přebarvení na novou (modrou) barvu je otázka pár kliknutí. Pokud jste nedočkaví a nechce se vám ikonku tvořit od začátku, můžete si stáhnout hotový soubor zde.

Ikonku umístíme na modrý pruh - budoucí záhlaví. Barva pruhu je #0B8DC1 (barva pozadí je prozatím šedá #D3D9DC).

A rovnou přidáme nějaký ten název stránek. Protentokrát můžeme zvolit velký jemný font, např. Helveticu v jejím nejužším řezu (mimochodem je to stejný font jako ve článku Photoshop & Flash tutoriál: Online vánoční přání). Pokud font nemáte při ruce, postačí i standardní Arial. Barva textu není úplně bílá, ale světle modrá #D7F3FF.

Abychom nadpis trochu vylepšili, můžeme například pod písmeno S nakopírovat ještě jedno S, ovšem převrácené, čímž vznikne zajímavý tvar (který později ještě jednou použijeme k vylepšení ikonky).

Nyní se ale budeme chvíli věnovat pozadí hlavičky. Abychom soustředili pozornost na ikonku, vytvoříme ze stran ztmavení - a to kruhovým přechodem barvy modré #115B81.

Rychle tento přechod vytvoříme tak, že nastavíme přednastavený přechod z barvy popředí do průhledné a nahoře v liště zaškrtneme volbu Reverse. Následující obrázek pak ukazuje počátek a směr tažení přechodu... Vrstvě nezapomeneme nastavit ořezovou masku vrstvy předchozí (Ctrl + Alt + G), ať je vidět jen tam, kde má být.

Okolí ikonky je ale stále ještě tmavé. Proto si pomůžeme dalším kruhovým přechodem, tentokrát ale světle modrým #3DB5E9. Stejně tak dobře může posloužit i kliknutí velkým měkkým štětcem. Teď ikonka správně svítí.

Pro zpestření můžeme navíc nakopírovat některé znaky (např. S) z fontu, kterým nastavíme menší Krytí a zvětšíme je na stovky procent. Krajů hlavičky si nemusíme moc všímat - později je skryjeme a zůstane zobrazena pouze prostřední část.

Když už ikonka obsahuje odlesk, vytvoříme podobný i pod nadpisem. Princip je jednoduchý a všem jistě známý - zkopírované převrácené vrstvě se přidá maska vrstvy, do které se kreslí černým štětcem v místech, kde nemá být odlesk vidět.

A proto můžeme odlesk vylepšit tak, že vrstvu kopírujeme a postupně čím dál vím rozmazáváme - přičemž zároveň upravujeme masku tak, aby se rozmazání zvětšovalo směrem doprava. Na ukázce je dobře vidět, že pro určení viditelnosti byl použit lineární přechod z černé do bílé - je to nejrychlejší.

Nakonec můžeme kolem nejzářivějšího bodu přidat i malé "světlušky" - ve skutečnosti nakopírované znaky "8" z původního nadpisu. Jen je nezapomeňte pootáčet (Ctrl + T), ať nejsou všechny stejné.

Ty ovšem rozzáříme o dost jednodušší cestou - do nové vrstvy kreslíme měkkým bílým štětcem. Velikost rychle měníme klávesami [ a ].

Ve výsledku by hlavička mohla vypadat nějak takto:

Tudíž už jen stačí přidat slíbený S symbol na ikonku. Protože potřebujeme znak deformovat, vytvoříme nejprve základ jako znak, který následně převedeme na Vrstvu Tvaru - Layer - Type - Convert To Shape.

Poté S-ko deformujeme stejnojmennou funkcí (Ctrl + T) - stačí malinko zúžit horní část...

...a pak už jenom vrstvu zkopírovat, převrátit a stáhnout Krytí.

Pro zpestření můžeme vrstvu zkopírovat ještě jednou, malinko rozostřit, a poté některé části umazat. Písmeno pak lépe splyne s podkladem (vidět je to především v pravé části).

Tím máme hlavičku hotovou a na řadu přichází otázka, jak bude vypadat zbytek stránek. Na začátku jsme si řekli, že zkusíme zachovat pouze nejzákladnější funkce, tudíž můžeme zvolit malinko netradiční rozložení - které bude mít pevnou výšku i šířku.

Což mimo jiné znamená, že si můžeme dovolit udělat stránky malinko pootočené - a trochu více zajímavé. Začneme obdélníkem, kterým určíme velikost stránek a který rovnou pootočíme o pár stupňů (Ctrl + T).

Poté načteme výběr obdélníku (Ctrl + klik na vrstvu), výběr zúžíme o cca 7 px (Výběr - Změnit - Zúžit / Select - Modify - Contract)...

...a tento výběr přidáme hlavičce jako masku. Pro tento krok je samozřejmě nutné nejprve všechny odpovídající vrstvy umístit do složky - a masku přidat složce. Ostatně na náhledu je vše dostatečně dobře vidět. Pozadí můžeme změnit na modrou barvu (#1A95C8).

Poté bílému obdélníku přidáme efekt vrstvy Vytažení (Stroke), velikosti 7 px. Proč?

Abychom mohli do nové vrstvy nakreslit jemný přechod a obrys zůstal stále zachován. Přechod je z barvy #919EA6 do průhledné.

A protože chceme přechod opravdu jemný, nezapomeneme stáhnout vhodně krytí (na ukázce na 20 %).

Spodní část obdélníku rovněž vyplníme modrou barvou. Pokud se vám nechce znovu opakovat postup jako u hlavičky, postačí malý trik - složku hlavičky zkopírujeme, sloučíme vše do jedné vrstvy (Ctrl + E) a poté posuneme dospod.

A to je pro dnešek vše. Základ stránek máme hotový a jak sami vidíte, bylo to opravdu jednoduché. Kliknutím na následující obrázek zobrazíte stránky ve 100% velikosti.

A na co se těšit příště? V rychlosti přidáme obsah stránek, vytvoříme pár interaktivních prvků a skončíme jednoduchou animací nahrávání obrázku na server. Těšte se.