Zásada „pozdravenia odevom“platí nielen pre ľudí, ale aj pre stránky. Šaty stránky sú jej dizajnom. A práve dizajn určuje dojem, ktorý má návštevník v prvých sekundách prezerania zdroja. Tento dojem je obzvlášť dôležitý, pretože určuje jeho budúce správanie. Prvý dizajnový prvok, ktorý uvidí každý používateľ, ktorý navštívi web, je jeho „hlavička“. Kryt je tvárou webového zdroja. Preto sa každý začínajúci webový dizajnér chce predovšetkým naučiť, ako vytvárať hlavičky pre webové stránky.
Nevyhnutné
- - prístup na internet;
- - moderný prehliadač;
- - editor rastrových grafík (GIMP, Photoshop);
- - voliteľné: editor vektorovej grafiky (CorelDraw);
- - voliteľné: prostredie 3D modelovania (Blender, 3DStudio);
- - voliteľné: list papiera, ceruzka alebo pero.
Inštrukcie
Krok 1
Vypracovať koncepciu budúcej hlavičky webu. V ideálnom prípade by koncept mal vychádzať z pôvodnej myšlienky. Ak chýbajú nápady, inšpiráciu je možné získať analýzou existujúcich dobrých riešení. Odrazte výsledok tvorivého výskumu v podobe náčrtu na kúsku papiera. Náčrt by mal odrážať štruktúru budúcej hlavičky webu s vyznačením „gumových“miest a oblastí vyplnených obrázkami. V tejto fáze je dobré premyslieť si približnú farebnú schému pre návrh hlavičky.
Krok 2
Vyberte veľkosť hlavičky. V skutočnosti stojí za to jasne definovať iba jeden z jeho parametrov - výšku. Výška hlavičiek stránok je spravidla pevná a nezávisí to od logického rozlíšenia, ktoré ovplyvňuje parametre zobrazenia fontov. Inými slovami, mali by ste zvoliť hodnotu výšky hlavičky v pixeloch. V tomto prípade má zmysel zohľadniť možnosť umiestnenia bannerov alebo blokov kontextovej reklamy do hlavičky. Pokiaľ ide o šírku, mali by ste určiť minimálnu hodnotu so zvýraznením najmenej jednej „gumenej“oblasti, ktorá umožňuje hlavičke prispôsobiť sa rôznym veľkostiam webovej stránky.
Krok 3
Vytvorte šablónu hlavičky v grafickom editore. V novom dokumente pridajte priehľadnú vrstvu, do ktorej potiahnete skicu podľa vybraných geometrických parametrov. Výška vrstvy by sa mala zhodovať s výškou hlavičky. Šírku je možné považovať za ľubovoľnú, ale väčšiu ako minimálna veľkosť, čím sa ponechá priestor pre vodorovné „gumené“oblasti. “V šablóne označte zóny pevnej a premennej veľkosti, zóny určené na vyplnenie statickými obrázkami, obrázkami na pozadí.
Krok 4
Vyhľadajte alebo vytvorte statické obrázky, ktoré chcete umiestniť do šablóny hlavičky. Logo a niektoré jedinečné prvky je možné vytvoriť vo vektorovom editore alebo v prostredí 3D modelovania. Je celkom ľahké nájsť tematické obrázky na bezplatných fotobankách na internete.
Krok 5
Vložte pozadie, logo a statické obrázky do šablóny hlavičky webu v grafickom editore. Pridajte pozadie a každý obrázok do samostatnej priehľadnej vrstvy. Usporiadajte vrstvy najlepším spôsobom. Pohybom obrázkov vo vrstvách dosiahnete ich dokonalé rozloženie zodpovedajúce predtým vytvorenej šablóne.
Krok 6
Uložte výsledný obrázok hlavičky. Uložte pracovný projekt v natívnom formáte grafického editora. Potom uložte sploštený obrázok hlavičky v bezstratovom formáte (napríklad PNG).
Krok 7
V prípade potreby vytvorte šablónu hlavičky HTML. Otvorte sploštený obrázok v editore. Vystrihnite z neho obrázky, ktoré zodpovedajú oblastiam pevnej veľkosti. Z miest zodpovedajúcich „gumovým“oblastiam vystrihnite obrázky so šírkou 1 pixel. Uložte všetky obrázky na disk. Rozložte hlavičku HTML pomocou uložených obrázkov.
