Od zelenej lúky až sem

Nepovažujem sa síce za žiadneho guru ani experta v oblasti tvorby web stránok, ale nejaký čas sa už tomuto (pre mňa) koníčku venujem a zozbieral som dosť skúseností, poznatkov a rád, a keďže si veľmi dobre pamätám, ako som začínal takpovediac od piky a aký náročný bol pre mňa každý jeden krok, chcem tieto svoje vedomosti aspoň čiastočne odovzdať menej skúseným tvorcom web stránok a podporiť ich tak a motivovať k prekonávaniu svojich predchodcov, vrátane mňa. Vôbec mi nebude vadiť, ak sa niekto z mojich rád poučí natoľko, že ma v mojom „remesle“ predbehne. Aspoň budem vedieť, že svoju prácu robí dôsledne a s chuťou a pre mňa potom bude len radosť po jeho skvelých stránkach surfovať.

Keď už som mal pár projektov za sebou, rozhodol som sa, že sa so svojou tvorbou podelím so svetom, poviem niečo o sebe, o svojej práci a že budem z času na čas dávať voľný priechod svojmu „básnickému“ črevu v podobe blogu. V hlave som si vytvoril obsahovú kostru svojho budúceho webu. Vedel som, že tam chcem uviesť niečo o mne, moje referencie, kontaktné údaje, niečo o tvorbe stránok a nakoniec samotný blog. Všetko to zabaliť do pekného grafického kabátu. Dnes už sú internetové pripojenia naozaj dobré a teda pár kilobytov hore-dole nikomu neublíži. Rozhodol som sa pre koncept úvodnej stránky a podstránok. Nemám rád uvítacie stránky, ktorých jedinou funkciou je návštevníka privítať a zobraziť mu jedinú možnost: „Vstúpte“. O tom ale snáď niekedy inokedy, začnime s tým, ako som tvoril svoju úvodnú stránku (ktorú ja rád nazývam rozcestník).

Hovorí sa, že múza vás kopne, keď to najmenej čakáte a ja som na ňu čakal asi poriadne, keďže všetky moje nápady boli nič moc. Rozhodol som sa pre inšpiráciu z internetu. Hľadal som rôzne stránky a snažil som sa nájsť v nich nejaké zaujímavé prvky, ktoré by som potom v určitej miere použil na svojom webe. Pôvodne som mal v hlave víziu stránky, ktorá je graficky čistá, povedal by som, že až sterilná.

Pôvodný layout (50% veľkosť)

Pôvodne som chcel, aby stránka vyzerala ako nejaký ovládací panel, ale potom som sa rozhodol, že by som mohol skúsiť niečo nové…niečo, čo som ešte nerobil a naučil sa tak nové techniky a postupy. Rozhodol som sa pre „organický“ štýl, tak ako to môžte vidieť v aktuálnej podobe. Na malé zelené PostIt papieriky som si nakreslil približné rozloženie prvkov, ktoré sú rozmiestnené okolo loga. To som prevzal z provizórnej verzie mojej stránky, ktorá vyzerala ako vizitka. Z jednej strany zelená s kontaktnými údajmi, na druhej strane svetlo sivá s odkazmi na stránky, ktoré som robil.

Obrázok pozadia pôvodnej stránky

Pri tvorbe úvodnej stránky som sa rozhodol pre rozmery 800×600. Nepýtajte sa ma prečo, proste som sa tak rozhodol. Nechcel som nič malé, ale ani moc veľké a pri dnešných monitoroch sa mi tento rozmer zdal tak akurát. Ako pozadie som zvolil jednoduchý prechod (gradient). Základ tvorí obyčajný obdĺžnik (shape) s čiernym 1-pixelovým okrajom. Efekt „tieňa“ pod podkladom som dosiahol pomocou štýlu vrstvy s Outer glow (čierna farba, 8 pixelov hrúbka, 54% priehľadnosť).

Na vygenerovanie textúry papiera som použil program Genetica, ktorého skúšobná verzia je voľne k dispozícii na stiahnutie. Pre trochu variability som veľmi jemným štetcom namaľoval pár fľakov a potom použil takmer úplne nevýrazný prechod, ktorý jemne stmavil pravú dolnú časť „papiera“, akoby bol nerovnomerne osvetlený. HTML kód v ľavom hornom a dolnom rohu je klasická textová vrstva. Modrý nápis v strede je tiež len text s modrým prechodom a fontom Pristina. Ten istý font som použil aj na ostatné nápisy. Farebné fľaky pod jednotlivými nápismi sú namaľované vo Photoshope štetcom pomocou jedného so štandardných umeleckých tipov.

Ručne písané popisy som si napísal ceruzkou na papier a potom obtiahol hrubšou čiernou fixkou, aby boli výrazné. Oscanoval som ich do počítača, kde som si celý obrázok dodatočne upravil. Zvýšil som jas a kontrast, aby sa stratili vlákna papiera a ešte viac sa zvýraznili čierne popisy. Potom som ich označil, vystrihol a po jednom vložil do obrázku stránky, upravil rozmer a orientáciu a nakoniec som ich trošku zosvetlil, aby neboli príliš výrazné. Pri vystrihovaní objektov z obrázka sa oplatí používať funkciu Refine edge (alt+r), ktorá vám zabezpečí, že hrany nebudú ostré, ale plynulé. Vyhnete sa tak nepríjemným „zubom“ na okrajoch prilepených objektov.

Ručne písane popisy na papieri

Prerušované modré čiary, ktoré vedú od loga smerom k okolitým položkám „menu“ sú robené vo Phothoshope pomocou štetca (brush) s vlastným tipom. V paneli nástrojov si zvoľte položku Brushes, ako tvar štetca si nastavte štvorec, roundness na 50% (čím vlastne vytvoríte zo štvorca obdĺžnik) a spacing nastavte posuvíkom na takú hodnotu, aby medzi jednotlivými „čiarkami“ vznikli požadované medzery. Potom ešte v časti Shape Dynamics nastavte Angle Jitter: Control na Direction, čím docielite, že sa orientácia jednotlivých „čiaročiek“ bude prispôsobovať smeru pohybu štetca. Pre hladké okraje ešte môžete zapnúť Smoothing.

Nastavenie stopy štetca

PostIt lístok som tvoril nasledovne: Najprv som vytvoril štvorcový shape a nastavil mu prechod z bledo žltej do mierne tmavšej žltej s ostrou hranicou prechodu, čiže nie plynulý prechod. Potom som mu ešte nastavil jemne viditeľnú textúru papiera, aby papierik pôsobil viac prirodzene. Potom som štyrmi šedými čiarami vytvoril riadky a do nich vložil text. Nechcelo sa mi piplať s riadkovaním, aby text presne zapadol do riadkov, tak som každý riadok vytvoril ako zvlášť textovú vrstvu. Potom som všetky vrstvy spojil do jedného Smart Objectu a použil naňho transformáciu Warp, aby som dosiahol efektu ohnutia v pravom dolnom rohu. Nakoniec som ešte vytvoril shape so šedou farbou a šedým Outer Glow a umiestnil pod PostIt papierik. Aj tento som deformoval pomocou Warpu tak, aby pravý spodný roh vyčnieval, čím som vytvoril tieň.

Tvorba PostIt lístka

Celý výsledný obrázok už aj s pridaným PostIt papierikom som potom rozdelil na slices tak, aby každá jedna položka bola v jednom výreze, ako je to vidno na obrázku:

Výrezy úvodnej stránky

Celý obrázok som potom vyexportoval do jednotlivých výrezov v JPG formáte s tým, že som urobil ešte jednu verziu, kde som dokreslil modré podčiarknutia pre každú položku. Celé som to potom poskladal dohromady v prehliadači pomocou HTML a CSS kódu. Každý jeden výrez je DIV a podľa toho, kde sa nacháda má nastavený parameter float buď na left, alebo right. To, kedy sa obrázok zmení naverziu s modrým podčiarknutím pri prechode myšou, som nastavil pomocou tagov <area> a <map>.

Jednotlivé vrstvy úvodnej stránky

Podstránky som robil v podstate rovnakým spôsobom. Vytvoril som si shape, na ktorý som potom aplikoval textúru papiera, potom som začal s tvorbou zeleného papierika. Opäť len jednoduchý shape s jemným zeleným prechodom a textúrou. Vytvoril som si jednoduché spinky, ktoré po zmenšení vyzerali celkom dobre a umiestnil som ich na zelený lístok. Potom som tam vložil logo a ručne napísaný a oscanovaný slogan. Postavičku a piškvorky som už ale nakreslil priamo v počítači. Digitálnym foťákom som si odfotil pár vecí, čo sa mi váľali po stole a z nich som potom použil ceruzku a gumu s tým, že som ešte dodatočne upravil ich odtieň, hlavne tej gumy, ktorá pôvodne vôbec nevyzerala ako guma.

Haraburdy

Na pravú stranu som vložil jednotlivé popisy v zhruba rovnakom rozložení ako na pôvodnej stránke a opäť som pod ne namaľoval farebné fľaky. Nakoniec som ešte pridal horizontálny oddeľovač (znova štetec s už spomínaným postupom) a prilepil som obrázok postavičky a piškvoriek. Na efekt som pod zelený papierik ešte dorobil špinu od gumy, aby to vyzeralo, že papierik prekrýva čosi, čo tam pôvodne bolo, ale vygumoval som to.

Nakoniec som celý layout rozdelil na výrezy a vyexportoval do JPG obrázkov. Ešte by som chcel pripomenúť, že textúra papiera má rovnakú výšku ako horné výrezy. Je to tak z dôvodu, aby sa plynule opakovala po celej výške papiera bez ohľadu na to, aký dĺhý je práve zobrazovaný obsah a aby som predišiel jej zalamovaniu.

Opäť som to celé poskladal pomocou HTML a CSS. Horná časť je rozdelená na 2 DIVy s tým, že ten pravý sa mení celý v závislosti od pozície kurzora, čiže som musel vytvoriť 6 rôznych verzií – jednu pre zvýraznenie každej z položiek plus jednu, kedy nie je žiadna zvýraznená. Je to trošku odlišný postup ako pri uvítacej stránke a môže to vyzerať neefektívne (treba načítať 6 rôznych obrázkov kvoli malej zmene), ale ušetrilo mi to kopec práce a času tým, že som obrázok nemusel rozdeľovať na kopec menších a ešte aj tie potom skladať dohromady.

Proces tvorby layoutu podstránok

Celý kód je napísaný ručne, žiadny WYSIWYG editor. Rád si veci upravujem sám, aspoň viem, že výsledok je potom taký, ako ho chcem ja. Podrobný popis kódu tu ale teraz robiť nejdem. Chcel by som ale dodať, že na to, aby som zabránil otrasnému „efektu“ oneskoreného načítania obrázkov pri prechode myšou, umiestnil som na koniec kód, ktorý zobrazí všetky potrebné obrázky s tým, že všetky obrázky tu majú pridelenú triedu class=“preload“ a v CSS súbore je záznam

.preload {
	visibility:hidden;
	width:0px;
	height:0px;
}

Tým pádom sa obrázky nezobrazia hneď, ale sú už uložené v cache prehliadača a pri prechode myšou cez zvolené položky sa zobrazia okamžite.

Toľko pre dnešok…dúfam, že ste tu našli nejaké informácie, ktoré vám pomôžu pri tvorbe vašich webov a ak sa aj niečím inšpirujete a prevediete to do praxe, budem rád, ak ma na to upozorníte. Som totiž zvedavý na váš výsledok. Tak teda veľa úspechov.