Zásada „přivítání oblečením“platí nejen pro lidi, ale také pro weby. Šaty webu je jeho design. A právě design určuje dojem, který má návštěvník během prvních sekund prohlížení zdroje. Tento dojem je obzvláště důležitý, protože určuje jeho budoucí chování. Prvním designovým prvkem, který vidí každý uživatel, který web navštíví, je jeho „záhlaví“. Víčko je tváří webového zdroje. Proto se každý začínající webový designér chce nejprve naučit, jak vytvářet záhlaví webů.
Nezbytné
- - přístup k internetu;
- - moderní prohlížeč;
- - editor rastrových grafik (GIMP, Photoshop);
- - volitelně: editor vektorové grafiky (CorelDraw);
- - volitelné: prostředí 3D modelování (Blender, 3DStudio);
- - volitelně: list papíru, tužka nebo pero.
Instrukce
Krok 1
Vytvořte koncept pro budoucí záhlaví webu. V ideálním případě by koncept měl vycházet z původní myšlenky. Když chybí nápady, inspiraci lze získat analýzou stávajících dobrých řešení. Odrážejte výsledek kreativního výzkumu ve formě náčrtu na kousku papíru. Náčrt by měl odrážet strukturu budoucí hlavičky webu s uvedením „gumových“míst a oblastí vyplněných obrázky. V této fázi je dobré přemýšlet o přibližném barevném schématu pro návrh záhlaví.
Krok 2
Vyberte velikost záhlaví. Ve skutečnosti stojí za to jasně definovat pouze jeden z jeho parametrů - výšku. Výška záhlaví webů je zpravidla pevná a nezávisí na logickém rozlišení, které ovlivňuje parametry zobrazení písem. Jinými slovy byste měli zvolit hodnotu výšky záhlaví v pixelech. V tomto případě má smysl vzít v úvahu možnost umístění bannerů nebo bloků kontextové reklamy do záhlaví. Pokud jde o šířku, měli byste určit minimální hodnotu a zvýraznit alespoň jednu „gumovou“oblast, která umožňuje přizpůsobení záhlaví různým velikostem webové stránky.
Krok 3
Vytvořte šablonu záhlaví v grafickém editoru. V novém dokumentu přidejte průhlednou vrstvu, do které přetáhnete skicu podle vybraných geometrických parametrů. Výška vrstvy by měla odpovídat výšce záhlaví. Šířku lze považovat za libovolnou, ale větší než minimální velikost, ponechávající prostor pro vodorovné „gumové“oblasti. “V šabloně označte zóny pevné a proměnné velikosti, zóny určené k vyplnění statickými obrázky, obrázky na pozadí.
Krok 4
Hledejte nebo vytvářejte statické obrázky, které chcete umístit do šablony záhlaví. Logo a některé jedinečné prvky lze vytvořit ve vektorovém editoru nebo v prostředí 3D modelování. Je docela snadné najít tematické obrázky na bezplatných fotobankách na internetu.
Krok 5
Vložte pozadí, logo a statické obrázky do šablony záhlaví webu v grafickém editoru. Přidejte pozadí a každý obrázek do samostatné průhledné vrstvy. Uspořádejte vrstvy nejlepším způsobem. Přesouváním obrázků ve vrstvách dosáhnete jejich dokonalého rozvržení, které odpovídá dříve vytvořené šabloně.
Krok 6
Uložte výsledný obrázek záhlaví. Uložte pracovní projekt v nativním formátu grafického editoru. Poté uložte zploštělý obrázek záhlaví ve bezztrátovém formátu (například PNG).
Krok 7
V případě potřeby vytvořte šablonu záhlaví HTML. Otevřete zploštělý obrázek v editoru. Vystřihněte z něj obrázky, které odpovídají oblastem pevné velikosti. Z míst odpovídajících „gumovým“oblastem vystřihněte obrázky široké 1 pixel. Uložte všechny obrázky na disk. Rozložte záhlaví HTML pomocí uložených obrázků.
