Office week Slevový týden - Květen
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
30 % bodů zdarma na online výuku díky naší Slevové akci!

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.

Hotova šablona

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í.

Adobe Photoshop

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.

Gimp

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í.

Volba barvy prostředí 1
Volba barvy prostředí 2
Volba barvy prostředí 3
Volba barvy prostředí 4

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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.

Nastavení dokumentu

Také si zkontrolujeme, že v hlavním menu v sekci OKNA => PRACOVNÍ PLOCHA máme všichni zaškrtnutou možnost VÝCHOZÍ.

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.

Klávesové zkratky

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 colorschemede­signer. 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.

Výběr barevného schématu

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.

Draw.io editor

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.

Hrubý návrh

Protože vycházíme ze šablony, která byla použita v jiném kurzu, barevnost i rozložení byly jasné.

Barevnost šablony

Tím bych první díl ukončil.

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.


 

 

Aktivity (12)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!