Návrh webu v programe GIMP

GIMP je program pre tvorbu grafiky. Môžete v ňom upravovať fotky, kresliť si obrázky, ale aj navrhovať weby. Weby je vždy dobré pred kódovaním navrhnúť, napríklad na papier alebo, keď už nič iné, tak aspoň v hlave. GIMP vám v tomto smere môže pomôcť. Môžete si v ňom webovú stránku najskôr navrhnúť a potom, keď už sa vám zdá dostatočne dobrá, ju nakódovať, prípadne zohnať niekoho, kto by ju nakódoval za vás. V tomto článku sa dozviete niečo málo o návrhu webe ao tom, čo by ste mali dodržiavať pri vytváraní webového dizajnu.

Ešte než začnem vykladať, chcel by som poukázať na vrstvy. V GIMP môžete a mali by ste pracovať s vrstvami. Uľahčujú prácu v programe a činní tak návrh viac flexibilné. Najlepšie je všetko rozdeľovať do vrstiev, aby sa potom dal obrázok čo najviac upravovať. Ak chcete uložiť rozloženú obrázok, stačí klávesová skratka Ctrl + S (alebo Súbor -> Uložiť). GIMP automaticky zvolí príponu XCF, čo je prípona pre GIMP obrázky, ktoré ešte budeme upravovať. Ako obrázok uložíte a zatvorte GIMP, tak sa vám pri opätovnom otvorení načíta vrátane vrstiev. Verzia 2.8 už rozlišuje rozdiel medzi uložením a exportom obrázka a mal by sa vás pýtať, či naozaj chcete zatvoriť GIMP, ak ste neuložili poslednej zmeny do formátu XCF. GIMP obrázky (* .xcf) odporúčam zálohovať, najlepšie na Dropbox, kde sa vám súbory automaticky synchronizujú na webové úložisko a nemusíte sa báť o stratu dát.

Pozadia

Na pozadí stránky sa dobre hodí opakovateľné vzorky. Stačí urobiť nejakú sieťku alebo pruhy, ktoré na seba pekne nadväzujú a uložiť obrázok do zložky {Zložka s nainštalovaným Gimp} /share/gimp/2­.0/patterns ako obrázok s príponou .pat (GIMP Pattern - vzorka). Po reštartovaní GIMP môžete v nástroji Plechovka zvoliť možnosť Vyplňovanie vzorkou a vybrať váš vzorku. Pre vykreslenie mriežky môžete použiť vstavané funkcie programu GIMP v menu Filtre -> Vykresliť -> Vzorka -> Mriežka. Pre vzorky na pozadí môžete použiť aj webový nástroj Stripemania, ktorým vie jednoducho generovať pruhový vzorky.

Na pozadí obsahu stránky sa väčšinou dáva len nejaká farba, aby bol text dobre čitateľný. Ak chcete, aby bolo vidieť pozadie stránky aj pod textom, vyberte pozadie obsahu nejakú priehľadnou farbou zapadajúce do dizajnu. Možno použiť klasickú čiernu alebo bielu a potom len nastaviť Krytie na nižšiu hodnotu.

Layout

Layout webu je veľmi dôležitý. Musíme vychádzať z reálnych rozmerov. Samozrejme možno web navrhnú v inom meradle ako 1: 1, ale je to zbytočné. Najlepšie je použiť skutočné rozmery. Layout by mal byť zobraziteľný minimálne pre monitory 1024 × 768. Ak robíme responzívne dizajn, nesmieme zabudnúť urobiť aj verzia pre iné rozlíšenie alebo pridať informácie o rozmeroch jednotlivých častí pri danom rozlíšení. Musíme tiež myslieť na to, kde budeme mať stĺpce, koľko ich chceme a aké menu zvolíme (horizontálne, vertikálne popr. Oboje). V mojom prípade som sa rozhodol pre horizontálne (vodorovné) menu a obsah bez postranných stĺpcov. Vy si však môžete zvoliť iné rozdelenie. To záleží hlavne na účelu webové stránky či aplikácie.

Menu

Menu je jedna z najdôležitejších zložiek webu. Musí byť prehľadné, upútať, nesmie prekážať jednotlivým zložkám webu a naopak zložky nesmie prekážať menu. V menu nezabudnite urobiť aj aktívne odkazy (po nabehnutí myši). Ak chcete použiť submenu, musíte ho tiež vytvoriť. Na pozadí menu sa hodí nejaký farebný prechod zložený z jednej farby (svetlejšieho a tmavšieho odtieňa danej farby). Na to použite vo výbere farieb mód HSV, kde si môžete nastaviť sýtosť a svetlosť farby. Možno tak jednoducho namiešať tmavšie alebo svetlejší odtieň danej farby. Jednotlivé položky oddeľujte treba čiarou alebo rovno dvoma (opäť svetlejšie a tmavšie variantom jednej farby).

Text a komponenty

Text je vôbec najdôležitejšia časť webového návrhu. Jednak musí byť čitateľný a tiež musí zapadať do dizajnu. Výber fontu ma osobne zaberie najviac času. Ak však nájdete ľúbivý font, máte v podstate vyhrané. Vďaka CSS3 a vlastnosti zvanej @ font-face už nie sme závislí na štandardných fontoch. Odporúčam vybrať font zo stránok Google Web Fonts. Na tejto stránke je zatiaľ vôbec najväčšia zoznam dostupných open-source fontov, ktoré môžete jednoducho na webe použiť a to zadarmo. Ak nájdete font mimo Google Web Fonts, vôbec to nevadí. Prinajhoršom môžeme namiesto textu použiť obrázok s alternatívnym textom, ktorý Google a iné vyhľadávače čítať vie. To môžeme použiť ale len na nadpisy, ktorých nie je toľko. Musíte potom totiž každý nadpis vytvoriť v programe zvlášť.

Komponenty ako sú tlačidlá, Input, formuláre a ďalšie musíme opäť vytvoriť. Teda ak ich chceme na webe použiť. Nezabudnite vytvoriť aj aktívny verzia tlačidiel. Na tlačidla sa hodí ako vnútorné aj vonkajšie tiene a opäť prechody. Máme veľa možností, ale zase musíme dbať na prehľadnosť a použiteľnosť danej komponenty.

Vloženie stiahnutého fontu

Pokiaľ si stiahneme font z internetu, stačí ho pridať do systémových fontov (vo Windows kliknite pravým tlačidlom na font a zvoľte nainštalovať alebo v ovládacích paneloch: Ovládací panel -> Vzhľad a prispôsobenie -> Písma - líšia sa v rôznych verziách Windows) a reštartovať GIMP . Pri opätovnom načítaní GIMP sa načíta aj font. Vo Windows má GIMP tendenciu sa niekedy pri načítaní nových systémových fontov trochu zaseknúť, ale nebojte, stačí chvíľu vydržať a GIMP sa bez problémov načíta.

Logo

Logo je asi najťažšia časť dizajnu. Musí zapadať do webu, vystihovať jeho obsah a nesmie byť zase moc veľké. Urobiť dobré logo je naozaj umenie, ktoré radšej prenecháme profesionálom

Nebojte sa ikon

Ikony webovú stránku často oživí. Musíme ich ale vhodne vybrať a alebo si ich rovno urobiť sami. Dajte si ale pozor na licencie jednotlivých ikon, aby ste sa zbytočne nedostali do problémov. Veľké množstvo ikon nájdete napríklad na stránke Icon archive.

Ukážkový návrh webu

Na ukážku som sa pokúsil dať dohromady jeden web. Dám som k dispozícii ako XCF súbor, ako aj PNG, aby ste videli, ako by sa mal deliť obrázok do vrstiev. To delenie by mohlo byť ešte väčší, ale pre lepšiu manipuláciu (hlavne presúvanie) som musel niektoré vrstvy zlúčiť.

Použité farby:

• Pozadie webe: prechod kruhový - # 961c07, # e86a16
• Pozadie menu: prechod lineárny - # feae23, # e88c16
• Rámček odkazov: # e88c16
• Aktívne odkaz: prechod rádiový, popredia do priehľadnosti - # ce7c14
• Tieň textu: čierna, priehľadnosť od 20% -30%

Použité fonty:

• Nadpisy: Candara Bold
• Tlačidlo: Bebas Neue
• Text a odkazy v menu: Georgia, Georgia bold