Photoshop - kompletní tvorba webu - díl 1/2

Předmluva Radka Hulána k článku: Ivana Bednářová je velice schopná mladá grafička, která na tomto webu publikuje svůj seriál o použití Adobe Photoshopu pro praxi webdesignu. Ivana má rovněž svůj vlastní web na adrese art-pgn.info.

A protože WELL.DONE se webdesignem zaobírá, a grafika je jeho nedílnou součástí, tvořící první dojem z webu, mám radost, že se Ivana rozhodla své články publikovat právě zde.

V tomto seriálu si ukážeme, jak za pomoci standardních nástrojů Photoshopu vytvořit celý design jednoduché www prezentace, v tomto případě jednoho hotelového zařízení – Hotel Horník a procvičíme si první jednoduché efekty Photoshopu. Nejdříve se podívejme na to, jak bude prezentace vypadat ve finále (obr. 1).

Zvětšit obr. 1

Nejdříve si ujasníme barvy webu, jaké materiály máme k dispozici ke zpracování (např. fotografie,texty). Zde vycházíme z odstínů hnědé, béžové apod. Pracovní obraz si nastavíme na šířku 900 a výšku 800 bodů. Pravítky (Ctrl + R) si rozdělíme plochu na šíři na tři díly pravý a levý okraj – 65 bodů vlevo, 65 bodů vpravo, prostřední část 770 bodů což je část, do které budeme kreslit web. Řekněme si, že weby všeobecně stavíme na max. velikost 770 bodů do šíře, což je ideální pro zobrazení webu na většině monitorů. Výška hlavičky webu by měla zabírat maximálně 180 bodů, zde už ovšem záleží na umístění navigace apod.

Dalším krokem je obarvení pozadí. V plovoucím Panelu nástrojů si nadefinujeme podkladovou barvu, v našem případě barva D8B58D (obr. 2), poté se přepneme do nástroje Plechovka barvy (G) (obr. 3) a kurzorem klikneme přímo do prázdné plochy obrázku. Protože nemáme vytvořenu žádnou novou vrstvu v Paletě vrstev, obarví se nám základní vrstva Pozadí.

Zvětšit obr. 2

Obr. 3

Po obarvení této vrstvy klikneme dvakrát v Paletě vrstev na ikonu Vytvořit novou sadu a vytvoří se nám dvě Sady. Poklepáním do názvu každé sady můžeme tyto přejmenovat. První sadu pojmenujeme Základ (v této sadě budeme vytvářet samotný grafický vzhled) a druhou sadu pojmenujeme Text (zde budeme umísťovat v průběhu tvorby všechny textové vrstvy). Tím jsme vytvořili základ pro jakýsi pořádek vrstev v naší prezentaci jak vidíme na obr. 4.

Obr. 4 Obr. 5 Obr. 6

V další fázi již začneme tvořit jednotlivé prvky prezentace. Vytvoříme vlnovky jakéhosi ohraničení webu. Jsou tři. Dvě v hlavičce, jak vidíme v konečném náhledu, opticky uvozují právě hlavičku a jedna je v patě celé prezentace a prezentaci zakončuje. V Paletě vrstev se přepneme do sady Základ a přetažením ikonky Vytvořit novou vrstvu do této sady vytvoříme novou prázdnou vrstvu a pojmenujeme ji Vlnovka a v této prozatím zůstaneme (obr. 5).

Zvětšit obr. 7

 Paletě nástrojů klikneme na Nástroj pero (P) (obr. 6) a „vybodujeme“ si přibližně cestu nebo-li tvar budoucí vlnovky. Po vykreslení a uzavření „bodované“ cesty klikneme v Paletě nástrojů na Nástroj změnit bod. Klikneme na jeden z bodů vytvořené cesty a zkusíme si co nástroj umí. Můžeme krásně vytvarovat křivku a takto postupujeme u všech bodů kromě dvou bodů krajních, které nám z logického důvodu mají zůstat ostře špičaté. Pohrajeme-li si s nástrojem a přepínáním nástroje, tak docílíme uspokojivého výsledku a vytvoříme obrys budoucí vlnovky (obr. 7). Pokud jsme již s tvarem spokojeni, tak se přepneme do Palety cesty a zde dole klikneme na ikonku Načtení cesty jako výběr. Z nadefinované cesty se nám udělá výběr (obr. 8).

Zvětšit obr. 8

Přepneme se zpátky do Palety vrstev a zkontrolujeme zda stále pracujeme ve vrstvě Vlnovka. Pokud ano, tak klikneme v Paletě nástrojů na nám již známou Plechovku barvy (G) a vyplníme vytvořený výběr barvou. V tuto chvíli je jedno jakou barvou, protože vrstvu budeme překrývat jinými efekty a barva je proto nedůležitá, ve finále nebude vidět.

Nyní budeme na vlnovku aplikovat efekt Překrytí přechodem a Úkos a reliéf. Jsme stále ve vrstvě Vlnovka a v Paletě vrstev klikneme na ikonku Přidat styl vrstvy. Nejdříve nadefinujeme efekt Překrytí přechodem. Zde se opět dává volnost fantazii a přechod nastavíme dle vlastního uvážení, nejlépe v odstínech hnědé a bílé (obr. 9). Poté nadefinujeme také efekt Úkos a reliéf dle obrázku (obr. 10). Dáme ok. S oběma těmito efekty můžeme barevně i jinak experimentovat a vytvářet různé plastické efekty vlnovky.

Zvětšit obr. 9

Zvětšit obr. 10

V Paletě vrstev vrstvu Vlnovka pomocí pravého tlačítka myši duplikujeme dvakrát, tím vytvoříme vlnovky tři. Vlnovky rozmístíme přibližně tak jak vidíme na výsledném obrázku. Horní dvě budou od sebe v rozpětí cca 180 bodů, spodní vlnovku umístíme do spodní části prezentace jako patičku (obr. 11).

Zvětšit obr. 11

V tuto chvíli se začneme věnovat hlavičce webu, která bude mezi horními dvěma vlnovkami. Otevřeme si v photoshopu dvě vybrané fotečky jako nové projekty, resp. soubory. Nástrojem výběr v Paletě nástrojů jednu fotografii příkazem Ctrl + C zkopírujeme a příkazem Ctrl + V vložíme do našeho projektu, kde vytváříme web. V Paletě vrstev se nám díky tomu vytvoří nová vrstva s fotografií a my tuto vrstvu pojmenujeme Fotografie 1. Levým tlačítkem myši vrstvu uchopíme a v Paletě vrstev ji přetáhneme na pozici pod všechny vrstvy Vlnovek do sady vrstev Základ. Takto celý postup zopakujeme i s druhou fotografií, jen jí změníme název na Fotografie 2.

Obr. 12

Pro další práci si vrstvu Fotografie 2 vypneme (klikneme na „očičko“ u té dané vrstvy a vidíme že se nám jakoby ztratí, ale jen jsme jí udělali neviditelnou, opětovným kliknutím na stejné místo vedle vrstvy se nám fotka opět zviditelní) (obr. 12).

Zvětšit obr. 13

Přepneme se do vrstvy Fotografie 1 a myší uchopíme fotografii a přesuneme na místo vlevo mezi horními vlnovkami uvozujícími hlavičku webu. Fotografie by měla být jakoby v krajích překryta vlnovkami. Nyní vidíme, že nám „přečuhují okraje přes vlnovky a to nechceme (obr. 13).

Obr. 14 Obr. 15

Jsme ve vrstvě Fotografie 1 a kliknutím v Paletě vrstev na ikonku Přidat masku vytvoříme fotografii masku, díky které rohy odstraníme a také uděláme efekt přechodu fotografie do ztracena. Přepneme se ve vrstvě Fotografie 1 do masky která je nyní vedle vrstvy (obr. 14) a v Paletě nástrojů vybereme Nástroj guma (E) (obr. 15). Pro odstranění přebytečné části fotografie použijeme gumu bez rozmazaných okrajů, nástroj si nastavíme v horním panelu nástrojů, který se nám sám zaktivuje po kliknutí na Nástroj guma. Zkusíme si mazání a vidíme kvalitu, jakou dosáhneme při různém nastavení nástroje. Fotografii v krajích umažeme až po vlnovky, ty by měly působit jako ohraničení. V úplně levém okraji fotografie zvolíme nástroj gumy větší a s větším rozpětím okrajů. Tím vytvoříme efekt přechodu do ztracena (rozpracované mazání gumou vidíme na obr. 16).

Zvětšit obr. 16 Obr. 17

Celý postup aplikujeme i na druhou fotografii, kterou si nyní již zaktivujeme kliknutím na „očičko“ vedle vrstvy v Paletě vrstev (obr. 17). Fotografii přesuneme na místo vpravo v hlavičce a, jak jsem již uvedla, aplikujeme stejný efekt jako u první fotografie. Potom fotografie posunujeme k sobě a díky přechodům nám v sobě jakoby splynou a vytvoříme tím koláž z těchto fotografií (obr. 18). Má-li někdo více fotografií k dispozici, může použít více fotografií a udělat hlavičku ještě zajímavější.

Zvětšit obr. 18 Zvětšit obr. 19

Ti zdatnější mohou jednu z fotografií „vyříznout“ a vrstvu s horní vlnovkou posunout v Paletě vrstev vrstvu s Fotografií 1 a tím vytvoří efekt, kdy nám část fotografie jakoby vystupuje plasticky do prostoru jako je tomu v našem konečném obrázku, který jsme viděli na začátku a můžeme také nafotografuj aplikovat efekt Vržený stín (viz můj výsledek snažení obr. 19).

Máme vytvořenu hlavičku a zbývá umístit logo a například popis webové adresy. V Paletě vrstev se přepneme do sady vrstev Text a v Paletě nástrojů klikneme na Nástroj text (T). Klikneme do prezentace a začneme psát nápis Hotel Horník. V Paletě znaky upravíme a vybereme pěkné ozdobné písmo, barvu a velikost písma (obr. 20), v Paletě nástrojů se přepneme do nástroje Přesun (V) a ozdobný nápis přesuneme vpravo nad vlnovky (obr. 21). Textovou vrstvu samozřejmě zkontrolujeme v Paletě vrstev, zda je opravdu umístěna v sadě vrstev Text. V této sadě vrstev vytvoříme podobným způsobem ještě jednu textovou vrstvu do které napíšeme adresu webové prezentace. Zde již nadefinujeme písmo přesně a to font Tahoma, velikost 10bodů a bold font, barva hnědá jako u ozdobného nápisu Hotel Horník (obr. 22). Pořadí vrstev v sadě Text není důležité. Pořadí vrstev je důležité jen v sadě Základ.

Obr. 20 Zvětšit obr. 21 Zvětšit obr. 22

Nyní vytvoříme ozdobný motiv nad nadpisem. Přepneme se v Paletě vrstev do sady vrstev Základ a opět vytvoříme nám již známým postupem novou prázdnou vrstvu a nazveme ji Motiv a přetáhneme ji nad všechny vrstvy v této sadě (obr. 23). V Paletě nástrojů nadefinujeme barvu umístěnou v popředí a poté v té samé paletě klikneme na Nástroj jiný tvar (obr. 24). Z dostupných tvarů vybereme v horní paletě nástrojů daný motiv a v ploše zkusíme nakreslit tažením kurzoru levým tlačítkem myši. Volíme velikost úměrnou logu a hlavičce. Přepneme se v Paletě nástrojů do Nástroje přesun (V) a motiv přesuneme nad logo. Pokud potřebujeme motiv otáčet vertikálně či horizontálně, tak takto činíme v nabídce Úpravy – Transformovat…

Obr. 23 Obr. 24

Pro další Efekt stínu tohoto ozdobného motivu se přepneme do Palety vrstev a zde klikneme na ikonku Přidat styl vrstvy a aplikujeme efekt Vržený stín. Se stínem a jeho nastavením si můžeme opět trošku pohrát (obr. 25).

Zvětšit obr. 25

Tím jsme dokončili část webu - hlavičku a tím vlastně i dnešní první díl tvorby našeho webu. Můžete zkoušet, testovat a experimentovat, hlavně s prolínáním foteček, což je efekt velice pěkný pro použití na webové prezentaci a hojně (také mnou ?) využívaný při tvorbě moderních designů. V příštím díle si již zkusíme vytvořit tělo prezentace a ukážeme si některé další základní efekty.