Návrh webu v programu GIMP

HTML a CSS Profesionální webdesign 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í

Výběr vzorku v GIMP 2.8 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.

Pozadí stránky

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.

Layout

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

Menu

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.

Text a komponenty

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 :)

Logo

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.

Ikony

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.

Hotový návrh webu

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:


 

Stáhnout

Staženo 1092x (2.22 MB)

 

  Aktivity (1)

Článek pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (9 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3
Miniatura
Následující článek
Flexibilní text

 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
Kit
Redaktor
Avatar
Kit:

Aha, myslel jsem, že to jen stačí zkompilovat. Asi to ve Windows není tak jednoduché.

Odpovědět 12.5.2012 12:48
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Drahomír Hanák:

Pro windows už taky vyšla ;) http://www.gimp.org/downloads/

 
Odpovědět 12.5.2012 12:56
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kit
David Čápka:

Vyšla, je to pecka v tom jednom okně, konečně po 17ti letech někdo přemýšlel :)

Odpovědět  +5 12.5.2012 12:57
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Amomym
Člen
Avatar
Amomym:

Ahoj, možnáse ptám blbě, ale jak naprogramovat šablonu?

 
Odpovědět 10.2.2013 20:36
Avatar
MarweXtv
Člen
Avatar
MarweXtv:

Pěkný :)

 
Odpovědět 20.3.2013 15:25
Avatar
Amomym
Člen
Avatar
Amomym:

ta stránka na ikony je to free?

 
Odpovědět 9.5.2013 15:42
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Amomym
Drahomír Hanák:

Ikony tam jsou od víc autorů. U každé máš uvedenou licenci ;)

 
Odpovědět 9.5.2013 15:54
Avatar
Amomym
Člen
Avatar
Odpovídá na Drahomír Hanák
Amomym:

nikde tam nic takového nevidím

 
Odpovědět 9.5.2013 16:06
Avatar
Amomym
Člen
Avatar
Amomym:

už to mám

 
Odpovědět 9.5.2013 16:07
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.

Zobrazeno 10 zpráv z 16. Zobrazit vše