1. diel - Tvorba šablóny v Adobe Photoshop - Začíname

Vitajte u prvého dielu kurze Tvorba webové šablóny v programe Photoshop. Tento kurz nadväzuje kurz Tvorba Bootstrap šablóny z PSD, kde sa pracuje s už pripravenou šablónou vo formáte PSD. Šablóna vyzerá vo finále takto.

My sa v tomto kurze pozrieme na to, ako sa taká šablóna pre web tvorí. K tomu využijeme platený program Adobe Photoshop, ktorý je jeden z celosvetovo najpoužívanejších grafických programov pre grafické práce. Bohužiaľ, ako už bolo spomenuté, Photoshop je platený a cena je pre občasné využívanie naozaj vysoká. Navyše platba prebieha mesačne, takže je to veľký nápor na financie a je nutné si rozmyslieť, či sa nám oplatí do toho investovať, prípadne si spočítať, či sa nám táto investícia v budúcnosti vráti.

Ak nemôžeme alebo nechceme kupovať Photoshop, možno využiť aj alternatívu v podobe programu Gimp, ktorý je bezplatný aj pre komerčné využitie. Jeho ovládanie je iné a veľa funkcií je odlišná, preto sa ním tu vôbec nebudeme zaoberať.

Teraz už sa ale pôjdeme pozrieť na to, ako vytvoriť webovú šablónu vo Photoshope.

Pracovné prostredie

Ako prvý sa pozrieme na to, ako si upraviť prostredie Photoshopu. Môže sa zdať divné, že začínam prípravou prostredia, keď som hovoril, že sa pôjdeme pozrieť na tvorbu webovej šablóny. Je to preto, že je dobrým zvykom si upravovať prostredie pre každý druh práce (webová šablóna, obal knihy, logo ...). Sú to síce malé zmeny, ale dokážu nám uľahčiť prácu.

Môžeme začať tým, že si zmeníme farbu (téma) prostredie, v ktorom pracujeme. Otvoríme si Photoshop, kde klikneme pravým tlačidlom myši na voľné miesto mimo pracovnú plochu a vyberieme farbu, ktorá nám vyhovuje. Ja osobne dávam prednosť tmavo šedej farbe, pretože z nej nebolí toľko oči, a hlavne v noci oceníte tmavšiu farbu prostredia.

.<>

Nový dokument

Ďalej si vytvoríme nový dokument s vlastnými rozmermi a rozlíšením. Skratka pre vyvolanie tejto ponuky je Ctrl + N / Cmd + N (za lomkou bude vždy skratka pre zariadenia od spoločnosti Apple) a do názvu dokumentu vyplníme sablona_web_prijmeni(_verze), prípadne sablona_web_prijmeni_yyyymmdd(_verze). Je dobré si zvoliť nejakú mennú konvenciu, ktorú budeme dodržiavať. Je potom oveľa pohodlnejšie sa v tom orientovať, čo sa ocenia predovšetkým vo väčšom objeme práce, prípadne, ak vytvárame viac kópií ako zálohy. Tiež je doporučené nepoužívať v názve diakritiku, pretože niektoré programy s diakritikou stále nedokážu plne pracovať a pri nejakej činnosti sa môže názov zmeniť na nezmyselné znaky. To potom môže spôsobovať ďalšie problémy.

Po premenovaní sa presunieme k rozmerom. Tu si u šírky zmeníme hodnotu na obrazové body a do kolónky šírka a výška vyplníme 1479 a 2682. Tieto rozmery sú prebrané z už hotové šablóny. Šírka sa berie orientačne a len tak, aby to vizuálne celé sedelo dohromady. Je to kvôli tomu, že väčšina stránok upravuje svoju šírku podľa zariadení, na ktorom je daná stránka zobrazená. Výška je potom určená buď dohodou so zákazníkom alebo jednoducho podľa toho, aby všetky obrázky a objekty boli zobrazené tak, ako chceme. Rozlíšenie v tomto prípade nepotrebujeme nijak veľké (len by nám to zbytočne trvalo pri ukladaní), takže 300 dpi prepíšeme na 72 dpi. Pretože budeme pracovať so šablónou pre web, budeme pracovať s farebným spektrom RGB.

Tiež si skontrolujeme, že v hlavnom menu v sekcii OKNA => PRACOVNÁ PLOCHA máme všetci zapnutú možnosť VÝCHODISKOVÉ.

Klávesové skratky

V ďalšom kroku si nastavíme klávesové skratky vo Photoshope, aby sme si neskôr ušetrili čas. Na účely tejto šablóny budeme nastavovať len tri skratky - vrátenie sa o jeden krok späť / vpred, vrátenie o viac krokov späť a prevod na inteligentné objekty. Tieto skratky sú už buď prednastavené, ale osobne mi neprídu logicky nastavené, alebo ich budeme nastavovať novo. Opäť záleží na tom, čo ako komu vyhovuje, takže tento krok môžete pokojne preskočiť. Počas kurzu vám budem vždy hovoriť aj ďalšie možnosti, ako daného kroku docieliť aj bez skratky.

Pre zmenu klávesových skratiek nájdeme v hlavnom menu vľavo hore sekciu ÚPRAVY a štvrtá odspodu je podsekcie klávesové skratky a PONUKY. Pre vyvolanie túto ponuku využiť klávesové skratky Alt + Shift + Ctrl + K / Alt + Shift + Cmd + K. Tu si najprv prehodíme klávesové skratky pre Vrátenie sa o jeden krok späť / vpred a Vrátenie sa o viac krokov späť.

Pre vysvetlenie: O jeden krok späť / vpred slúži na vrátenie sa iba o jeden krok späť v histórii a tiež vpred na poslednú "verziu" - pri použití tejto funkcie sa teda neustále točíme v kruhu posledný a predposledný verzia. O viac krokov späť sa vlastne dostaneme do histórie - môžeme sa dostať teda aj na verziu vzdialenú viac krokov.

Pre zmenu týchto skratiek klikneme na ÚPRAVY a skratku SPÄŤ / ZNOVU prepíšeme z existujúcej skratky Ctrl + Z / Cmd + Z na Ctrl + Shift + Z / Cmd + Shift + Z. Z môjho pohľadu je praktickejšie používať možnosti vrátenia sa o viac krokov späť. Asi chápem, prečo je to takto nastavené (možnosť porovnania pred a po úprave), ale osobne mne to skôr prekáža, než že by mi to nejako uľahčilo prácu. Tým pádom prepíšeme aj skratku KROK SPÄŤ na Ctrl + Z / Cmd + Z.

Ďalšie, a pre nás posledná skratkou, ktorú nastavíme, je prevedenie na inteligentný objekty. Rozkliknite ponuku VRSTVA a v spodnej časti ponuky nájdeme možnosť INTELIGENTNÉ OBJEKTY a hneď pod tým PREMIESTNIŤ NA INTELIGENTNÉ OBJEKT. Tu nie je žiadna skratka prednastavená, takže si môžeme zvoliť akú skratku chceme.

Dajte si pozor na prepísanie existujúcich skratiek, preto vyberajte starostlivo, akú klávesovú skratku zvoliť. Ja treba viem, že nepoužívam klávesovú skratku F2 (používaná pre funkciu Vystrihnúť), takže si ju tam nastavím.

Nakoniec stačí už len potvrdiť tlačidlom OK vpravo hore.

Tým sme ukončili nastavenie našej pracovnej plochy a môžeme prejsť na hrubý návrh šablóny pre web.

Hrubý návrh šablóny

Pri návrhu šablóny pre webové stránky (ale aj pre inú tvorbu) vždy odporúčam si najskôr vziať papier a ceruzku. Pre niekoho možno archaický prístup, ale z mojej skúsenosti sme na papieri oveľa kreatívnejší, netlačia nás obmedzenia našich skúseností s grafickými programami a ďaleko viac to môžeme premyslieť. Tiež je to všeobecne oveľa rýchlejší pre hrubú predstavu. Ja si vždy na jednu stranu bloku napíšem, čo všetko je nutné na webe mať, čo chcem, aby web o sebe vypovedal, akú emóciu má v človeku vzbudiť a čo očakáva zákazník, prípadne otázky a problémy, ktoré ma pri návrhu napadnú, a ktoré je potrebné ďalej konzultovať. Na druhej strane potom tvorím samotný hrubý návrh stránky.

Ďalej si volím farebnú schému webu. Tu prezradím vám malý trik. Pokiaľ s farebnou typológiou nie ste práve kamaráti, vôbec to nevadí, stačí sa riadiť pár pravidlami:

• Prvé pravidlo: v jednoduchosti je krása
• A druhé pravidlo: ak si neviem rady, existuje veľa stránok na pomoc s výberom farebnosti.

Osobne mám najradšej zdúpnejú stránku colorschemede­signer. Tu si len vyberiete, či chcete docieliť farebného komplement (doplnkové farby), monochromatické (odtiene jednej farby) farebnosti, prípadne iné farebnosti, zvolíte nejakú farbu a stránka sama zobrazí najvhodnejšie možnosti.

Keď už potom máme neskôr farebnú typológiu v oku, tak si ju môžeme dovoliť aj zámerne porušiť.

Prvé návrhy zaberú nejaký čas, než prídete na to, aké farby zvoliť a ako to správne usporiadať. Po nejakej dobe už na to prídete a tvorba bude oveľa jednoduchšie.

Ak máme všetko spísané a zvolené, vrhneme sa na hrubý návrh rozloženia. Ako som už spomenul, pre mňa osobne je najlepší a najrýchlejší si tento návrh urobiť ručne na papier. Ak však chcete využiť rovno nejaký program pre návrh, môžete využiť napr. Webový editor draw, ktorý už bol spomenutý v kurze Tvorba Bootstrap šablóny z PSD.

Ja som také schému webu a jeho farebnosť pre lepšiu čitateľnosť "načrtol" radšej v programe. Takto napríklad môže vyzerať hrubý návrh webovej stránky. Je to rýchle a jednoznačne je vidieť, čo kde bude a ako čo bude fungovať.

Pretože vychádzame zo šablóny, ktorá bola použitá v inom kurze, farebnosť i rozloženie boli jasné.

Tým by som prvý diel ukončil.

V ďalšom dieli, Tvorba šablóny v Adobe Photoshop - Hrubý návrh 1 , sa pozrieme podrobnejšie na to, ako vytvoriť hrubý návrh webové šablóny, na čo si dať pozor, čo si možno zjednodušiť a čo je lepšie si premyslieť hneď zo začiatku.