1. diel - Tvorba Bootstrap šablóny z PSD - Wireframe a grafický editor

Vitajte v prvej lekcii on-line kurzu Tvorba Bootstrap šablóny z PSD súboru. V tomto seriáli si postupne ukážeme, ako vytvoriť projekt, ktorý bude použiteľný a konkurencieschopný vo svete dnešného webdesignu.

Čo sa naučíme, teda prevádzať návrhy z PSD súborov do Bootstrap šablón, je reálna náplň práce kodéry a po absolvovaní kurzu budete túto prácu schopní vykonávať.

Ak máte svoje vlastné stránky alebo napríklad blog, budete si môcť na základe novo získaných vedomostí vašu stránku vylepšiť Ak nie, môžete si šablónu vytváranú v tomto Bootstrap kurze upraviť a získať tak prvé referenciu vašej práce. Každý potenciálny zamestnávateľ bude chcieť vidieť čo viete.

A teraz už konečne do práce!

Grafický návrh

Návrh webovej stránky určite nezačneme písaním kódu. Kým nepoznáme finálny vzhľad webu a nevieme, čo k sebe bude ladiť, zbytočne by sme kód neustále prepisovali. Nie je nič horšie, než celý deň kódovať a potom zistiť, že sa obstarávateľovi výsledok nepáči. Preto začneme obyčajným obrázkom, kde môžeme jednotlivé časti jednoducho meniť a presúvať, ako sa nám zapáči. Každá kvalitná webová prezentácia začína tvorbou grafického návrhu.

Wireframe

Pokiaľ má projekt viac podstránok, alebo je zákazník vyberavý, necháme si od zadávateľa najskôr odsúhlasiť tzv. Wireframe, alebo ak drôtený model. Ide o jednoduchú kostru stránky s rozmiestnením kľúčových prvkov. Obvykle obsahuje len dôležité texty a namiesto konkrétnych obrázkov len obdĺžniky. Dlhé texty sú nahradené populárnym "vyplňovacom" textom Lorem Ipsum ... a podobne.

Drôtený model nemusíme pri jednoduchších projektov vytvárať. My si ho v rýchlosti ukážeme. Až budete profesionálny webdesigner, môže vám ušetriť u náročnejších projektoch veľa času. Tvorba modelov trvá obvykle len niekoľko minút a klient uvidí, že ste profíci

Pre tvorbu drôteného modelu môžeme použiť napríklad webový editor https://www.draw.io/.

Založíme nový diagram. V ľavom stĺpci editora nájdeme najrôznejšie tvary, ktoré v našich diagramoch môžeme používať. Medzi nimi aj kategórii Bootstrap obsahujúce základné Bootstrap prvky ako tlačidlá, menu atď. Ak sa nám táto ponuka nezobrazuje, klikneme nižšie na "More Shapes ..." kde nájdeme kategórii "Bootstrap", zaškrtneme ju a potvrdíme.

Teraz si z kategórie Bootstrap vľavo nataháme do diagramu jednotlivé prvky stránky a upravíme ich text, veľkosť, prípadne ďalšie vlastnosti. Akonáhle sa s editorom trochu viac zoznámite, zistíte, že takýto model vytvoríte aj za niekoľko minút.

V našom kurze budeme tvoriť webovú prezentáciu pre holdingovú spoločnosť Moderné bývanie. Po troche snaženia sme pripravili na odsúhlasenie nasledujúcej drôtený model stránky:

PSD súbory

Akonáhle zákazník odsúhlasí wireframe alebo si veríme, že rovno vieme, čo očakáva, vytvorí sa kompletný grafický návrh webu tak, ako bude vo finálnej podobe vyzerať. Túto časť práce má na svedomí grafik, čo je často iná osoba ako kodér, ktorý web následne nakódujeme v HTML, CSS a frameworku Bootstrap. Obrázky z návrhu vyreže a vloží ich jednotlivo na správne miesta šablóny. Pri menších prezentácií môže byť grafik a kodér aj jedna osoba, ak obe zručnosti ovláda.

Predstavme si, že sme dostali od grafika návrh webu ako obrázok PSD (súbor aplikácie Photoshop), ktorý vyzerá takto:

Súbory PSD sa od obyčajných obrázkov odlišujú prítomnosťou vrstiev, kedy si môžeme jednotlivé časti obrázku "povypínať", aby sa nám lepšie vyrezávali.

Ako prvý budeme samozrejme potrebovať grafický editor, ktorý nám PSD súbor načíta. Photoshop je jedným z najpoužívanejších nástrojov pre webdesign. Jeho obstaranie je však pomerne nákladné, preto ako začiatočníci použijeme jednu z nasledujúcich alternatív:

• Affinity Photo - plnohodnotná náhrada Photoshopu, ktorá stojí asi 1.300 Sk navždy a má desaťdňové skúšobné obdobie (pre porovnanie, Photoshop stojí asi 600 Sk mesačne)
• Photopea - online editor dobre podporujúce formát PSD, v súčasnej dobe je kompletne zadarmo, ale často funguje pomaly a zasekáva sa
• grafik - ak máte problém s otvorením PSD, môžete požiadať grafika, aby vám finálny vzhľad a prípadné obrázky a ďalšie ikonky vyexportovali ako súbory PNG - tie už otvorte skoro vo všetkom, napríklad v Paint.NET

Vyrezanie obrázka z PSD

Počas nášho kurzu budú jednotlivé obrázky vždy k dispozícii na stiahnutie. Určite si ale potrebujeme ukázať akým spôsobom sa tieto obrázky z celkového PSD návrhu získajú, aby ste to potom zvládli urobiť sami u ďalších prezentácií. Odporúčam skôr (skúšobnú verziu) Affinity Photo, ale pre istotu predvediem aj prácu v editore Photopea.

Affinity Photo

Editor po načítaní súboru zahlási použité / chýbajúce fonty. Nás texty v PSD príliš netrápi, tak je nemusíme riešiť, skôr tak zistíme, aké fonty máme potom použiť v CSS. Po ľavej strane okna vidíme nástroja. Nás bude zaujímať najmä Crop Tool na vyrezávanie častí obrázku, ktoré potom môžeme samostatne uložiť. Horný riadok sa mení podľa zvoleného nástroja.

Niektoré obrázky stačí vyrezať tak, ako sú (napr. Foto sídla firmy, pokiaľ nám ho firma alebo grafik neposkytne vo vyššom rozlíšení). Niektoré budeme potrebovať vyrezať bez pozadia, teda priehľadné. Jedná sa napr. O ikonky v bielej lište. Tu využijeme okná Layers (vrstvy) v pravej časti aplikácie. Pomocou checkboxov môžeme jednoducho povypínať všetko okolo danej ikony. Tým sa okolo nej zobrazí priehľadné pozadie, reprezentovanej vzorom šedej šachovnice. Ikonu potom vyrežeme pomocou Crop Tool, ako je ukázané na obrázku nižšie:

Výrez potvrdíme tlačidlom "Apply" hore a kľúč uložíme napr. Ako images/key.png.

Ak ste niekedy pracovali s originálnym Photoshopom, určite ste si všimli, že Affinity Photo vyzerá aj funguje takmer identicky.

Obsah jednotlivých vrstiev sa zobrazí zmenšený ako ich náhľad, takže napríklad obrázky uvidíte na prvý pohľad.

Photopea

Alternatívne predvediem aj tú istú akciu vo free editora Photopea, aj keď to bude vyžadovať oveľa väčšiu trpezlivosť. PSD si do editora buď pretiahneme alebo nahráme pomocou file -> open. Po načítaní program zahlási opäť použité fonty.

V ľavom stĺpci nájdeme všetky potrebné nástroje jakozejména crop (orezania). Horný riadok sa opäť mení podľa zvoleného nástroja. V pravom stĺpci nájdeme layers (vrstvy), kde sa nám po načítaní zobrazí všetky prvky súboru ako vrstvy. Pri každej môžeme vidieť symbol oka. Pokiaľ na oko klikneme, vrstva zmizne. Ak podržíme alt a klikneme na oko, zmiznú všetky ostatné vrstvy okrem vybranej. Aby sme si mohli jednotlivé obrázky vyrezať ako priehľadné, budeme používať práve túto možnosť.

Vyberte nástroj move tool, kurzorom prejdite na obrázok a dvojklikom by sa vám mala označiť príslušná vrstva v pravom stĺpci. Keby vám náhodou editor začal vypisoval napr. Layer is locked; Layer must be rasterised first, a podobne, uistite sa, že máte v hornom riadku (nástroje tool move) zapnutú možnosť auto-select. Schováme všetky ostatné a zvolíme nástroj "Crop". V hornom riadku sa objaví krížik a fajfka. Až budeme s výberom pre orezanie spokojní, potvrdíme ho pomocou fajky a získaný prvok si uložíme ako png. Takto vyexportuje všetko potrebné.

Ak by vám v niektorom bode došla trpezlivosť, začnite sťahovať Affinity photo free trial

Paint.NET

Ak z nejakého dôvodu dostaneme miesto PSD len obrázkový súbor ako jpg alebo png, vystačíme si aj s jednoduchším programom ako je Paint.NET, ktorý je navyše v češtine. Vyberieme nástroj obdĺžnikový výber a vyberieme plochu na orezanie, potom pomocou presunutie výberu upresníme výber. Kombináciou Ctrl + Shift + X vyrežeme danú plochu. Tú uložíme pod nový názov a vrátime sa späť (Ctrl + Z). Týmto spôsobom vyrežeme všetky obrázky.

Editory si vyskúšajte, pretože sa s nimi aj ako neprofesionálne grafici budete často stretávať.

To je pre dnešok všetko! V budúcej lekcii, Tvorba Bootstrap šablóny z PSD - Založenie projektu , sa konečne pustíme do kódovania a vytvoríme prvú časť šablóny v HTML, CSS a samozrejme frameworku Bootstrap.