Webdesign Step by Step. To je seriál, ktorý vás prevedie tvorbou modernej internetovej stránky krok po kroku. Prinášam vám druhú časť tohto seriálu obohatenú o videotutoriál a niekoľko tipov pri navrhovaní vzhľadu stránky.
Ahojte, v minulej časti som upozornil na možnosť dostať vlastný webdesign od pxforce.com úplne zadarmo. Ohlasov nebolo veľa a jednoznačný favorit bol Kusi a jeho blog. Vymenili sme si kontakt a začal som zisťovať, ako by mal jeho blog vyzerať. Ako redakčný systém, ktorý bude použitý sme Jednoznačne vybrali Wordpress. Prešli sme k dizajnu. Požiadavky na wedesign boli zhruba takéto:
- farebná podobnosť, zachovanie kontrastu tmavosivej a svetlej farby (vybral som neónovú modrú)
- motív draka použitý v headeri
- moderný vzhľad, prehľadnosť
- rozčleniť samotnú stránku na tri časti: ľavé + pravé menu a v strede obsah
- použiť šípky pred názvami menu, navrhnuté aj na akciu po prejdení kurzorom myši
Kusi píše najmä o počítačoch a internete. Medzi návštevníkmi je tak mnoho mladých a tieto farby sú podľa môjho názoru vhodné. V prípade, že by sa stránka zaoberala témami ako politika, ekonómia a podobne, treba myslieť na zloženie návštevníkov takejto stránky, ich vek, vzdelanie, vkus atď a prispôsobiť celkový design, ktorý bude viac elegantný až konzervatívny.
Priebeh práce
Zhodnotil som čo ma čaká a v hlave som začal skladať - „skicovať“. Oveľa jednoduchšie sa mi pracuje ak viem čo chcem dosiahnuť. Potom stačí len sledovať monitor a akoby „obťahovať“ myšlienku, vizualizáciu, ktorú si v hlave premietam. Takýmto spôsobom je práca oveľa rýchlejšia a nebudete musieť veľa prerábať. Stačí už len pohodlne sa usadiť a začať. Presný postup tvorby webdesignu si môžete pozrieť vo video návode, ktorý je dostupný TU (57,960 MB - 38 minút, 1024×768, bez zvuku).
Návod je určený pre mierne pokročilých, používam klávesové skratky pri práci s nástrojmi ale aj pracovným prostredím programu Photoshop CS2. Najzákladnejšie sú:
- TAB (skryje všetky panely nástrojov a možností, opätovným stlačením ich znova zobrazíte)
- F (umožní vám pohybovať dokumentom do strán, skryje vrchné menu a v kombinácii s TAB pracujete len s obrazom)
- Skratky nástrojov (nájdete ich v menu)
- Ctrl + Shift + N (vytvoriť novú vrstvu)
- Ctrl + J (skopírujete tak obsah výberu v danej vrstve do ďalšej vrstvy, prípadne skopírujete celú vrstvu ak nepoužijete výber)
Takto momentálne vyzerá Kusiho webdesign. V ďalšej časti navrhnem vzhľad textov, obsahu stránky, päty a upravím súčasný design podľa Kusiho prianí (menej výrazné položky menu, jeden hlavný nápis sekcie menu a ostatné odkazy majú byť menej výrazné časti tejto sekcie)
