Lekce 1 - Tvorba šablony v Adobe Photoshop - Začínáme
Vítejte u prvního dílu kurzu Tvorba webové šablony v programu Photoshop. Tento kurz navazuje kurz Tvorba Bootstrap šablony z PSD, kde se pracuje s již připravenou šablonou ve formátu PSD. Šablona vypadá ve finále takto.
My se v tomto kurzu podíváme na to, jak se taková šablona pro web tvoří. K tomu využijeme placený program Adobe Photoshop, který je jeden z celosvětově nejpoužívanějších grafických programů pro grafické práce. Bohužel, jak již bylo zmíněno, Photoshop je placený a cena je pro občasné využívání opravdu vysoká. Navíc platba probíhá měsíčně, takže je to velký nápor na finance a je nutné si rozmyslet, zda se nám vyplatí do toho investovat, případně si spočítat, zda se nám tato investice v budoucnu vrátí.
Pokud nemůžeme nebo nechceme kupovat Photoshop, lze využít i alternativu v podobě programu Gimp, který je bezplatný i pro komerční využití. Jeho ovládání je jiné a spousta funkcí je odlišná, proto se jím zde vůbec nebudeme zabývat.
Teď už se ale půjdeme podívat na to, jak vytvořit webovou šablonu ve Photoshopu.
Pracovní prostředí
Jako první se podíváme na to, jak si upravit prostředí Photoshopu. Může se zdát divné, že začínám přípravou prostředí, když jsem říkal, že se půjdeme podívat na tvorbu webové šablony. Je to proto, že je dobrým zvykem si upravovat prostředí pro každý druh práce (webová šablona, obal knihy, logo …). Jsou to sice malé změny, ale dokážou nám ulehčit práci.
Můžeme začít tím, že si změníme barvu (téma) prostředí, ve kterém pracujeme. Otevřeme si Photoshop, kde klikneme pravým tlačítkem myši na volné místo mimo pracovní plochu a vybereme barvu, která nám vyhovuje. Já osobně dávám přednost tmavě šedé barvě, protože z ní nebolí tolik oči, a hlavně v noci oceníte tmavší barvu prostředí.
Nový dokument
Dále si vytvoříme nový dokument s vlastními rozměry a rozlišením.
Zkratka pro vyvolání této nabídky je Ctrl + N /
Cmd + N (za lomítkem bude vždy zkratka pro zařízení
od společnosti Apple) a do názvu dokumentu vyplníme
sablona_web_prijmeni(_verze), případně
sablona_web_prijmeni_yyyymmdd(_verze). Je dobré si zvolit nějakou
jmennou konvenci, kterou budeme dodržovat. Je pak mnohem
pohodlnější se v tom orientovat, což se ocení především ve větším
objemu práce, případně, pokud vytváříme více kopií jako zálohy. Také
je doporučeno nepoužívat v názvu
diakritiku, protože některé programy s diakritikou stále
nedokážou plně pracovat a při nějaké činnosti se může název změnit na
nesmyslné znaky. To pak může způsobovat další problémy.
Po přejmenování se přesuneme k rozměrům. Zde si u šířky změníme
hodnotu na obrazové body a do kolonky šířka a výška
vyplníme 1479 a 2682. Tyto rozměry jsou přebrané z
již hotové šablony. Šířka se bere orientačně a jen tak, aby to
vizuálně celé sedělo dohromady. Je to kvůli tomu, že většina stránek
upravuje svou šířku podle zařízení, na kterém je daná stránka
zobrazena. Výška je pak určena buď dohodou se zákazníkem nebo prostě
podle toho, aby všechny obrázky a objekty byly zobrazeny tak, jak chceme.
Rozlišení v tomto případě nepotřebujeme nijak veliké (jen by nám to
zbytečně trvalo při ukládání), takže 300 dpi přepíšeme na
72 dpi. Protože budeme pracovat se šablonou pro web, budeme
pracovat s barevným spektrem RGB.
Také si zkontrolujeme, že v hlavním menu v sekci OKNA => PRACOVNÍ PLOCHA máme všichni zaškrtnutou možnost VÝCHOZÍ.
Klávesové zkratky
V dalším kroku si nastavíme klávesové zkratky ve Photoshopu, abychom si později ušetřili čas. Pro účely této šablony budeme nastavovat pouze tři zkratky – vrácení se o jeden krok zpět/ vpřed, vrácení o více kroků zpět a převod na inteligentní objekty. Tyto zkratky jsou již buď přednastavené, ale osobně mi nepřijdou logicky nastaveny, nebo je budeme nastavovat nově. Opět záleží na tom, co jak komu vyhovuje, takže tento krok můžete klidně přeskočit. Během kurzu vám budu vždy říkat i další možnosti, jak daného kroku docílit i bez zkratky.
Pro změnu klávesových zkratek najdeme v hlavním menu vlevo nahoře sekci ÚPRAVY a čtvrtá odspodu je podsekce KLÁVESOVÉ ZKRATKY A NABÍDKY. Pro vyvolání této nabídky lze využít klávesové zkratky Alt + Shift + Ctrl + K / Alt + Shift + Cmd + K. Zde si nejprve prohodíme klávesové zkratky pro Vrácení se o jeden krok zpět/ vpřed a Vrácení se o více kroků zpět.
Pro vysvětlenou: O jeden krok zpět/vpřed slouží k vrácení se pouze o jeden krok zpět v historii a také vpřed na poslední “verzi” - při použití této funkce se tedy neustále točíme v kruhu poslední a předposlední verze. O více kroků zpět se vlastně dostaneme do historie – můžeme se dostat tedy i na verzi vzdálenou více kroků.
Pro změnu těchto zkratek klikneme na ÚPRAVY a zkratku ZPĚT/ ZNOVU přepíšeme ze stávající zkratky Ctrl + Z / Cmd + Z na Ctrl + Shift + Z / Cmd + Shift + Z. Z mého pohledu je praktičtější používat možnosti vrácení se o více kroků zpět. Asi chápu, proč je to takto nastaveno (možnost porovnání před a po úpravě), ale osobně mně to spíš vadí, než že by mi to nějak usnadnilo práci. Tím pádem přepíšeme i zkratku KROK ZPĚT na Ctrl + Z / Cmd + Z.
Další, a pro nás poslední zkratkou, kterou nastavíme, je převedení na inteligentní objekty. Rozklikneme nabídku VRSTVA a ve spodní části nabídky najdeme možnost INTELIGENTNÍ OBJEKTY a hned pod tím PŘEVÉST NA INTELIGENTNÍ OBJEKT. Zde není žádná zkratka přednastavena, takže si můžeme zvolit jakou zkratku chceme.
Dejte si pozor na přepsání stávajících zkratek, proto vybírejte pečlivě, jakou klávesovou zkratku zvolit. Já třeba vím, že nepoužívám klávesovou zkratku F2 (používaná pro funkci Vyjmout), takže si ji tam nastavím.
Nakonec stačí už jen potvrdit tlačítkem OK vpravo nahoře.
Tím jsme ukončili nastavení naší pracovní plochy a můžeme přejít na hrubý návrh šablony pro web.
Hrubý návrh šablony
Při návrhu šablony pro webové stránky (ale i pro jinou tvorbu) vždy doporučuji si nejdříve vzít papír a tužku. Pro někoho možná archaický přístup, ale z mé zkušenosti jsme na papíře mnohem kreativnější, netlačí nás omezení našich zkušeností s grafickými programy a daleko více to můžeme promyslet. Také je to obecně mnohem rychlejší pro hrubou představu. Já si vždy na jednu stranu bloku napíšu, co všechno je nutné na webu mít, co chci, aby web o sobě vypovídal, jakou emoci má v člověku vzbudit a co očekává zákazník, případně otázky a problémy, které mě při návrhu napadnou, a které je třeba dále konzultovat. Na druhé straně pak tvořím samotný hrubý návrh stránky.
Dále si volím barevné schéma webu. Tady prozradím vám malý trik. Pokud s barevnou typologií nejste zrovna kamarádi, vůbec to nevadí, stačí se řídit pár pravidly:
- První pravidlo: v jednoduchosti je krása
- A druhé pravidlo: pokud si nevím rady, existuje spousta stránek na pomoc s výběrem barevnosti.
Osobně mám nejraději užasnou stránku colorschemedesigner. Zde si jen vyberete, jestli chcete docílit barevného komplementu (doplňkové barvy), monochromní (odstíny jedné barvy) barevnosti, případně jiné barevnosti, zvolíte nějakou barvu a stránka sama zobrazí nejvhodnější možnosti.
Když už pak máme později barevnou typologii v oku, tak si ji můžeme dovolit i záměrně porušit.
První návrhy zaberou nějaký čas, než přijdete na to, jaké barvy zvolit a jak to správně uspořádat. Po nějaké době už na to přijdete a tvorba bude mnohem jednodušší.
Pokud máme všechno sepsáno a zvoleno, vrhneme se na hrubý návrh rozložení. Jak jsem již zmínil, pro mě osobně je nejlepší a nejrychlejší si tento návrh udělat ručně na papír. Pokud ovšem chcete využít rovnou nějaký program pro návrh, můžete využít např. webový editor draw, který již byl zmíněn v kurzu Tvorba Bootstrap šablony z PSD.
Já jsem takové schéma webu a jeho barevnost pro lepší čitelnost “načrtnul” raději v programu. Takto například může vypadat hrubý návrh webové stránky. Je to rychlé a jednoznačně je vidět, co kde bude a jak co bude fungovat.
Protože vycházíme ze šablony, která byla použita v jiném kurzu, barevnost i rozložení byly jasné.
V dalším dílu, Tvorba šablony v Adobe Photoshop - Hrubý návrh 1, se podíváme podrobněji na to, jak vytvořit hrubý návrh webové šablony, na co si dát pozor, co si lze zjednodušit a co je lepší si promyslet hned ze začátku.
