Photoshop tutoriál: Design grafiky blogu, 1. díl - Grafika.cz - vše o počítačové grafice

11. dubna 2008, 00.00 | Poučeni z předchozího článku věnovaného poohlédnutí za designem WWW
stránek se v následujícím seriálu pustíme do tvorby designu internetového
blogu. A to pěkně krok za krokem, od začátku až do konce. V pěti dílech se
dozvíte, jak se od počátečního nápadu dopracovat až k finálnímu produktu.
Dnešní díl je věnovaný především tvorbě pozadí stránek.

Když jsem v minulém článku psal o recyklaci starých nápadů, ani jsem netušil, kolik toho ještě nakonec "zrecykluji". I dnešní článek měl základ v půl roku staré ikonce, kterou můžete vidět na následujícím obrázku:

A protože samotná ikonka není na vytvoření těžká a v tomto případě ani výjimečně zajímavá, nechal jsem chvíli nápad odležet a nakonec k ikonce přidal i zbytek stránek. Aby byla grafika využitelná pro co největší počet čtenářů, rozhodl jsem se pro design fiktivního internetového blogu - a to pěkně se vším všudy. Kliknutím na následující obrázek zobrazíte stránky v plné velikosti - a zároveň se můžete podívat, k čemu bychom se měli po několika článcích dopracovat.

Abychom měli v tvorbě jasno, zde je přibližný přehled práce, která bude v jednotlivých částech seriálu popsána:

1. díl - tvorba pozadí
2. díl - tvorba ikonek (datum, tužka v kalendáři...)
3. díl - rozmístění prvků, barevné schéma, panel vyhledávání
4. díl - dodatečné drobnosti (RSS ikonka, ostatní ikonky, zápatí)
5. díl - favikona, příprava dat pro programátory

Začneme tedy (trochu nestandardně) pozadím. Na výběr máme z celé řady možností, od jednobarevného, přes jednoduchý vzorek, až po fotografii. My protentokrát zkusíme něco složitějšího - něco, co zrovna "frčí". A to napodobení složitějších "přírodních" vzorků známých například z tapet (pro ukázky zadejte do vyhledávače frázi floral pattern).

Protože vytvoření takového vzorku od základu už vyžaduje nějaké ty umělecké vlohy (a spousty námahy), pomůžeme si přednastavenými tvary. Ty ovšem nemůžeme hledat v Photoshopu, ale například ve vhodném fontu. Ten dnešní se jmenuje Flower Ornaments a je ke stažení z dafont.com. Jak ukazuje následující obrázek, font obsahuje 9 symbolů, které jsou skryty pod písmeny a-i.

Různých vhodných částí pro náš vzorek je ve fontu víc než dost, ale situaci ztěžuje fakt, že všechny symboly jsou v nevhodném obdélníkovém tvaru. Proto musíme vyseparovat pouze některé části. Jedna z možností je převést font na cestu (Convert To Shape) a poté odmazávat nepotřebné části...

...ovšem stejně tak dobře stačí přidat vrstvě masku a do ní kreslit černým štětcem v místě, které chceme skrýt.

A je to rychlejší (a pro naše účely dostačující).

Protože vzorek bude symetrický, začneme postupně z částí fontu tvořit jednu jeho polovinu.

Dokud nebude tvar dostatečně "plný".

Poté umístíme všechny vrstvy do složky, kterou duplikujeme, převrátíme a posuneme stranou. Protože ale uprostřed vznikne zbytečně moc volného místa...

...můžeme tvary překrýt přes sebe úplně...

...a vhodně některé části odmazat. Vzorek je pak rázem zajímavější.

Jsme-li s tvarem spokojeni, sloučíme všechny vrstvy do jedné, tuto vrstvu duplikujeme a zmenšíme ji na velikost výsledného vzorku - který chceme dostatečně malý. Původně jsem zamýšlel nad 50%, nakonec se ale i to ukázalo moc velké, takže 25 % byla jasná volba.

Nyní bychom mohli vzorek ručně rozkopírovat po celé ploše dokumentu, ale proč si neušetřit budoucí práci a nevytvořit rovnou opravdický vzorek?

Začneme tím, že označíme přibližně místo, do kterého vzorek zasahuje a vyvoláme paletku Informace (Info), přičemž si všímáme velikosti (na obrázku zakroužkováno). Snažíme se omezit oblast tak, aby výška i šířka byla dělitelná dvěmi (protože každý druhý řádek bude vzorek posunut o polovinu doprava).

Poté tuto oblast vytáhneme jednopixelovým obrysem do nové pomocné vrstvy (abychom věděli, jak je část vzorku velká)...

...a obě vrstvy umístíme do nové složky...

...kterou rozkopírujeme do podoby budoucího vzorku. Přesně jako na obrázku. Ve skutečnosti by pro určení vzorku stačily pouze tři tvary...

...protože na výšku se vzorek opakuje každé dva řádky (dvojnásobek velikosti vzorku) a na šířku stačí pouze jedna šířka vzorku. Tím dostáváme odpověď na otázku, jak velkou oblast označit - 100 * 132 px. Pomocné oranžové vrstvy ukazují, že velikost je správná...

...tudíž je skryjeme...

...stejně jako vrstvu pozadí a oblast definujeme jako nový vzorek - Úpravy - Definovat vzorek (Edit - Define Pattern).

Poté v paletce vrstvy přidáme novou vrstvu Vzorek (Pattern).

Vzorek se automaticky vybere poslední nastavený, takže jen potvrdíme OK.

Na chvilku na vzorek zapomeneme a vytvoříme pro něj vhodný podklad. Protože se podobné vzorky často vyskytují na tapetách a látkách, zkusíme nasimulovat náhodné kroucení materiálu, podobné pověšenému závěsu.

Do nové vrstvy nakreslíme lineární přechod z bílé do černé...

...a na vrstvu aplikujeme filtr Vlna (Wave). Tento filtr způsobí prohnutí, a protože se vrstva v jednom směru opakuje, vytvoří se dojem zprohýbané záclony. 

Stačí tedy jen nastavit vhodnou barvu pozadí - v našem případě tmavě hnědou (#36322A) a vrstvě vhodnou interakci - například Zesvětlit Barvy (Color Dodge). Tím se vytvoří velmi ostrý přechod a horní část půjde až do bílé barvy. Což později pěkně využijeme pro inverzní hlavičku a tělo stránky.

Zbývá už jen zakomponovat vzorek. Protože je pozadí velmi tmavé, bude lepší, když vzorek bude naopak světlý. Proto nejprve vytvoříme vrstvu úprav Invertovat (Invert), které nastavíme ořezovou masku vrstvy předchozí (Ctrl + Alt + G) a vrstvě se vzorkem nastavíme interakci na Překrýt (Overlay).

Poté ještě vhodně stáhneme Krytí, například na 20%.

Stále ale nejsme s pozadím hotovi. Zkusíme ještě na vzorku nasimulovat oprýskaný vzhled - a to tak, že masku vyplníme vzorkem, ve kterém se střídá každý řádek bílá a černá barva (tzv. scanline, viz článek Photoshop tutoriál: Starý monitor aneb "scan line" efekt).

Tím bude vzorek zobrazený pouze každý druhý řádek...

...což vypadá spíš uměle než zašle. Proto jemně zobrazíme i každý první řádek - stačí k tomu vhodně upravit masku. Nejrychleji tak, že vyvoláme funkci Jas a Kontrast  (Brightness/Contrast) a vhodně naposunujeme jezdce. Samozřejmě se můžeme přepnout do masky a černou barvu změnit na odstín šedé, ale takto je to jednodušší.

Zde je náhled ve 100% velikosti. Vzorek už vypadá méně uměle a více připomíná opravdickou látku. Díky použité technice ale bude stále jednoduché jej na konci práce exportovat pro programátora. O tom ale až někdy příště.

Pro dnešek u tohoto kroku skončíme. Kliknutím na obrázek zobrazíte stránky v plné velikosti.

A na co se těšit příště? Začneme pomalu pracovat na obsahu stránek, vytvoříme si pár ikonek a také kalendář, zobrazující dny, kdy jste přidali do blogu článek...