Návrh webu v programu GIMP

GIMP je program pro tvorbu grafiky. Můžete v něm upravovat fotky, kreslit si obrázky, ale také navrhovat weby. Weby je vždy dobré před kódováním navrhnout, třeba na papír nebo, když už nic jiného, tak alespoň v hlavě. GIMP vám v tomto ohledu může pomoci. Můžete si v něm webovou stránku nejdříve navrhnout a pak, když už se vám zdá dostatečně dobrá, ji nakódovat, popřípadě sehnat někoho, kdo by ji nakódoval za vás. V tomto článku se dozvíte něco málo o návrhu webu a o tom, co byste měli dodržovat při vytváření webového designu.

Ještě než začnu vykládat, chtěl bych poukázat na vrstvy. V GIMPu můžete a měli byste pracovat s vrstvami. Ulehčují práci v programu a činní tak návrh více flexibilní. Nejlépe je vše rozdělovat do vrstev, aby se pak dal obrázek co nejvíc upravovat. Pokud chcete uložit rozdělaný obrázek, stačí klávesová zkratka Ctrl + S (nebo Soubor -> Uložit). GIMP automaticky zvolí příponu xcf, což je přípona pro GIMP obrázky, které ještě budeme upravovat. Jak obrázek uložíte a zavřete GIMP, tak se vám při opětovném otevření načte včetně vrstev. Verze 2.8 již rozlišuje rozdíl mezi uložením a exportem obrázku a měl by se vás ptát, zda opravdu chcete zavřít GIMP, pokud jste neuložili poslední změny do formátu XCF. GIMP obrázky (*.xcf) doporučuji zálohovat, nejlépe na DropBox, kde se vám soubory automaticky synchronizují na webové uložiště a nemusíte se bát o ztrátu dat.

Pozadí

Na pozadí stránky se dobře hodí opakovatelné vzorky. Stačí udělat nějakou síťku nebo pruhy, které na sebe hezky navazují a uložit obrázek do složky {Složka s nainstalovaným GIMPem}/share/gim­p/2.0/patterns jako obrázek s příponou .pat (GIMP Pattern - vzorek). Po restartování GIMPu můžete v nástroji Plechovka zvolit možnost Vyplňování vzorkem a vybrat váš vzorek. Pro vykreslení mřížky můžete použít vestavěné funkce programu GIMP v menu Filtry -> Vykreslit -> Vzorek -> Mřížka. Pro vzorky na pozadí můžete použít také webový nástroj Stripemania, kterým umí jednoduše generovat pruhové vzorky.

Na pozadí obsahu stránky se většinou dává jen nějaká barva, aby byl text dobře čitelný. Pokud chcete, aby bylo vidět pozadí stránky i pod textem, zvolte pozadí obsahu nějakou průhlednou barvou zapadající do designu. Lze použít klasickou černou nebo bílou a pak jen nastavit Krytí na nižší hodnotu.

Layout

Layout webu je velmi důležitý. Musíme vycházet z reálných rozměrů. Samozřejmě lze web navrhnou v jiném měřítku než 1:1, ale je to zbytečné. Nejlepší je použít skutečné rozměry. Layout by měl být zobrazitelný minimálně pro monitory 1024×768. Pokud děláme responzivní design, nesmíme zapomenout udělat i verze pro jiné rozlišení nebo přidat informace o rozměrech jednotlivých částí při daném rozlišení. Musíme také myslet na to, kde budeme mít sloupce, kolik jich chceme a jaké menu zvolíme (horizontální, vertikální popř. oboje). V mém případě jsem se rozhodl pro horizontální (vodorovné) menu a obsah bez postranních sloupců. Vy si však můžete zvolit jiné rozdělení. To záleží hlavně na účelu webové stránky či aplikace.

Menu

Menu je jedna z nejdůležitějších složek webu. Musí být přehledné, upoutat, nesmí překážet jednotlivým složkám webu a naopak složky nesmí překážet menu. V menu nezapomeňte udělat i aktivní odkazy (po najetí myši). Pokud chcete použít submenu, musíte ho také vytvořit. Na pozadí menu se hodí nějaký barevný přechod složený z jedné barvy (světlejšího a tmavšího odstínu dané barvy). Na to použijte ve výběru barev mód HSV, kde si můžete nastavit sytost a světlost barvy. Lze tak jednoduše namíchat tmavší nebo světlejší odstín dané barvy. Jednotlivé položky oddělujte třeba čarou nebo rovnou dvěma (opět světlejší a tmavší variantou jedné barvy).

Text a komponenty

Text je vůbec nejdůležitější část webového návrhu. Jednak musí být čitelný a také musí zapadat do designu. Výběr fontu mě osobně zabere nejvíc času. Pokud ovšem naleznete líbivý font, máte v podstatě vyhráno. Díky CSS3 a vlastnosti zvané @font-face již nejsme závislí na standardních fontech. Doporučuji vybrat font ze stránek Google Web Fonts. Na této stránce je zatím vůbec největší seznam dostupných open-source fontů, které můžete jednoduše na webu použít a to zdarma. Pokud najdete font mimo Google Web Fonts, vůbec to nevadí. Přinejhorším můžeme místo textu použít obrázek s alternativním textem, který Google a jiné vyhledávače číst umí. To můžeme použít ale jen na nadpisy, kterých není tolik. Musíte pak totiž každý nadpis vytvořit v programu zvlášť.

Komponenty jako jsou tlačítka, inputy, formuláře a další musíme opět vytvořit. Tedy pokud je chceme na webu použít. Nezapomeňte vytvořit i aktivní verze tlačítek. Na tlačítka se hodí jak vnitřní, tak i vnější stíny a opět přechody. Máme spoustu možností, ale zase musíme dbát na přehlednost a použitelnost dané komponenty.

Vložení staženého fontu

Pokud si stáhneme font z internetu, stačí ho přidat do systémových fontů (ve Windows klikněte pravým tlačítkem na font a zvolte nainstalovat nebo v ovládacích panelech: Ovládací panely -> Vzhled a přizpůsobení -> Písma - liší se v různých verzích Windows) a restartovat GIMP. Při opětovném načtení GIMPu se načte i font. Ve Windows má GIMP tendenci se někdy při načítání nových systémových fontů trochu zaseknout, ale nebojte, stačí chvíli vydržet a GIMP se bez problémů načte.

Logo

Logo je asi nejtěžší část designu. Musí zapadat do webu, vystihovat jeho obsah a nesmí být zase moc velké. Udělat dobré logo je opravdu umění, které raději přenecháme profesionálům

Nebojte se ikon

Ikony webovou stránku často oživí. Musíme je ale vhodně vybrat a nebo si je rovnou udělat sami. Dejte si ale pozor na licence jednotlivých ikon, abyste se zbytečně nedostali do problémů. Velké množství ikon naleznete třeba na stránce Icon archive.

Ukázkový návrh webu

Na ukázku jsem se pokusil dát dohromady jeden web. Dám jsem k dispozici jak XCF soubor, jak i PNG, abyste viděli, jak by se měl dělit obrázek do vrstev. To dělení by mohlo být ještě větší, ale pro lepší manipulaci (hlavně přesouvání) jsem musel některé vrstvy sloučit.

Použité barvy:

• Pozadí webu: přechod kruhový - #961c07, #e86a16
• Pozadí menu: přechod lineární - #feae23, #e88c16
• Rámeček odkazů: #e88c16
• Aktivní odkaz: přechod radiový, popředí do průhlednosti - #ce7c14
• Stín textu: černá, průhlednost od 20%-30%

Použité fonty:

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