Lekce 1 - Tvorba Bootstrap šablony z PSD - Wireframe a grafický editor

Vítejte v první lekci on-line kurzu Tvorba Bootstrap šablony z PSD souboru. V tomto seriálu si postupně ukážeme, jak vytvořit projekt, který bude použitelný a konkurenceschopný ve světě dnešního webdesignu.

Co se naučíme, tedy převádět návrhy z PSD souborů do Bootstrap šablon, je reálná náplň práce kodérů a po absolvování kurzu budete tuto práci schopní vykonávat.

Pokud máte svoje vlastní stránky nebo třeba blog, budete si moci na základě nově získaných vědomostí vaši stránku vylepšit Pokud ne, můžete si šablonu vytvářenou v tomto Bootstrap kurzu upravit a získat tak první referenci vaší práce. Každý potenciální zaměstnavatel bude chtít vidět co umíte.

A teď už konečně do práce!

Grafický návrh

Návrh webové stránky určitě nezačneme psaním kódu. Dokud neznáme finální vzhled webu a nevíme, co k sobě bude ladit, zbytečně bychom kód neustále přepisovali. Není nic horšího, než celý den kódovat a pak zjistit, že se zadavateli výsledek nelíbí. Proto začneme pouhým obrázkem, kde můžeme jednotlivé části jednoduše měnit a přesouvat, jak se nám zlíbí. Každá kvalitní webová prezentace začíná tvorbou grafického návrhu.

Wireframe

Pokud má projekt více podstránek, nebo je zákazník vybíravý, necháme si od zadavatele nejdříve odsouhlasit tzv. wireframe, nebo-li drátěný model. Jedná se o jednoduchou kostru stránky s rozmístěním klíčových prvků. Obvykle obsahuje jen důležité texty a místo konkrétních obrázků jen obdélníky. Dlouhé texty jsou nahrazené populárním "vyplňovacím" textem Lorem Ipsum... a podobně.

Drátěný model nemusíme u jednodušších projektů vytvářet. My si jej v rychlosti ukážeme. Až budete profesionální webdesigneři, může vám ušetřit u náročnějších projektů spoustu času. Tvorba modelů trvá obvykle jen několik minut a klient uvidí, že jste profíci

Pro tvorbu drátěného modelu můžeme použít například webový editor https://www.draw.io/.

Založíme nový diagram. V levém sloupci editoru najdeme nejrůznější tvary, které v našich diagramech můžeme používat. Mezi nimi i kategorii Bootstrap obsahující základní Bootstrap prvky jako tlačítka, menu atd. Pokud se nám tato nabídka nezobrazuje, klikneme níže na "More Shapes..." kde najdeme kategorii "Bootstrap", zaškrtneme ji a potvrdíme.

Nyní si z kategorie Bootstrap vlevo nataháme do diagramu jednotlivé prvky stránky a upravíme jejich text, velikost, případně další vlastnosti. Jakmile se s editorem trochu více seznámíte, zjistíte, že takový model vytvoříte i za několik minut.

V našem kurzu budeme tvořit webovou prezentaci pro holdingovou společnost Moderní bydlení. Po troše snažení jsme připravili na odsouhlasení následující drátěný model stránky:

PSD soubor

Jakmile zákazník odsouhlasí wireframe nebo si věříme, že rovnou víme, co očekává, vytvoří se kompletní grafický návrh webu tak, jak bude ve finální podobě vypadat. Tuto část práce má na svědomí grafik, což je často jiná osoba než kodér, který web následně nakóduje v HTML, CSS a frameworku Bootstrap. Obrázky z návrhu vyřízne a vloží je jednotlivě na správná místa šablony. U menších prezentací může být grafik a kodér i jedna osoba, pokud obě dovednosti ovládá.

Představme si, že jsme dostali od grafika návrh webu jako obrázek PSD (soubor aplikace Photoshop), který vypadá takto:

Soubory PSD se od obyčejných obrázků odlišují přítomností vrstev, kdy si můžeme jednotlivé části obrázku "povypínat", aby se nám lépe vyřezávaly.

Jako první budeme samozřejmě potřebovat grafický editor, který nám PSD soubor načte. Photoshop je jedním z nejpoužívanějších nástrojů pro webdesign. Jeho pořízení je ovšem poměrně nákladné, proto jako začátečníci použijeme jednu z následujících alternativ:

• Affinity Photo - plnohodnotná náhrada Photoshopu, která stojí asi 1.300 Kč napořád a má desetidenní zkušební dobu (pro srovnání, Photoshop stojí asi 600 Kč měsíčně)
• Photopea - online editor dobře podporující formát PSD, v současné době je kompletně zdarma, ale často funguje pomalu a zasekává se
• grafik - pokud máte problém s otevřením PSD, můžete požádat grafika, aby vám finální vzhled a případné obrázky a další ikonky vyexportoval jako soubory PNG - ty už otevřete skoro ve všem, například v Paint.NET

Vyříznutí obrázku z PSD

Během našeho kurzu budou jednotlivé obrázky vždy k dispozici ke stažení. Určitě si ale potřebujeme ukázat jakým způsobem se tyto obrázky z celkového PSD návrhu získají, abyste to pak zvládli udělat sami u dalších prezentací. Doporučuji spíše (zkušební verzi) Affinity Photo, ale pro jistotu předvedu i práci v editoru Photopea.

Affinity Photo

Editor po načtení souboru zahlásí použité/chybějící fonty. Nás texty v PSD příliš netrápí, tak je nemusíme řešit, spíše tak zjistíme, jaké fonty máme poté použít v CSS. Po levé straně okna vidíme nástroje. Nás bude zajímat zejména Crop Tool na vyřezávání částí obrázku, které pak můžeme samostatně uložit. Horní řádek se mění podle zvoleného nástroje.

Některé obrázky stačí vyříznout tak, jak jsou (např. foto sídla firmy, pokud nám jej firma nebo grafik neposkytne ve vyšším rozlišení). Některé budeme potřebovat vyříznout bez pozadí, tedy průhledné. Jedná se např. o ikonky v bílé liště. Zde využijeme okna Layers (vrstvy) v pravé části aplikace. Pomocí checkboxů můžeme jednoduše povypínat vše okolo dané ikony. Tím se kolem ní zobrazí průhledné pozadí, reprezentované vzorem šedé šachovnice. Ikonu poté vyřízneme pomocí Crop Tool, jako je ukázané na obrázku níže:

Výřez potvrdíme tlačítkem "Apply" nahoře a klíč uložíme např. jako images/key.png.

Pokud jste někdy pracovali s originálním Photoshopem, určitě jste si všimli, že Affinity Photo vypadá i funguje téměř identicky.

Obsah jednotlivých vrstev se zobrazí zmenšený jako jejich náhled, takže například obrázky uvidíte na první pohled.

Photopea

Alternativně předvedu i tu samou akci ve free editoru Photopea, i když to bude vyžadovat mnohem větší trpělivost. PSD si do editoru buď přetáhneme nebo nahrajeme pomocí file -> open. Po načtení program zahlásí opět použité fonty.

V levém sloupci najdeme všechny potřebné nástroje jakozejména crop (ořezání). Horní řádek se opět mění podle zvoleného nástroje. V pravém sloupci najdeme layers (vrstvy), kde se nám po načtení zobrazí všechny prvky souboru jako vrstvy. U každé můžeme vidět symbol oka. Pokud na oko klikneme, vrstva zmizí. Pokud podržíme alt a klikneme na oko, zmizí všechny ostatní vrstvy kromě vybrané. Abychom si mohli jednotlivé obrázky vyřezat jako průhledné, budeme používat právě tuto možnost.

Vyberte nástroj move tool, kurzorem najeďte na obrázek a dvojklikem by se vám měla označit příslušná vrstva v pravém sloupci. Kdyby vám náhodou editor začal vypisoval např. Layer is locked; Layer must be rasterised first, a podobně, ujistěte se, že máte v horním řádku (nástroje tool move) zaškrtnutou možnost auto-select. Schováme všechny ostatní a zvolíme nástroj "Crop". V horním řádku se objeví křížek a fajfka. Až budeme s výběrem pro ořezání spokojeni, potvrdíme jej pomocí fajfky a získaný prvek si uložíme jako png. Takto vyexportujeme všechno potřebné.

Pokud by vám v některém bodě došla trpělivost, začněte stahovat Affinity photo free trial

Paint.NET

Pokud z nějakého důvodu dostaneme místo PSD pouze obrázkový soubor jako jpg nebo png, vystačíme si i s jednodušším programem jako je Paint.NET, který je navíc v češtině. Vybereme nástroj obdelníkový výběr a vybereme plochu k ořezání, potom pomocí přesunutí výběru upřesníme výběr. Kombinací Ctrl + Shift + X vyřežeme danou plochu. Tu uložíme pod nový název a vrátíme se zpátky (Ctrl + Z). Tímto způsobem vyřežeme všechny obrázky.

Editory si vyzkoušejte, protože se s nimi i jako neprofesionální grafici budete často potýkat.

To je pro dnešek všechno!

V příští lekci, Tvorba Bootstrap šablony z PSD - Založení projektu, se pustíme do kódování a vytvoříme první část šablony v HTML, CSS a samozřejmě frameworku Bootstrap.