Het principe van "gegroet worden door kleding" geldt niet alleen voor mensen, maar ook voor sites. De jurk van de site is het ontwerp. En het is het ontwerp dat de indruk bepaalt die de bezoeker heeft in de eerste paar seconden van het bekijken van de bron. Deze indruk is vooral belangrijk omdat het zijn toekomstig gedrag bepaalt. Het eerste ontwerpelement dat elke gebruiker die de site bezoekt, ziet, is de "header". De dop is het gezicht van de webresource. Daarom wil elke beginnende webdesigner allereerst leren hoe hij headers voor sites kan maken.
Noodzakelijk
- - toegang tot internet;
- - moderne browser;
- - raster grafische editor (GIMP, Photoshop);
- - optioneel: vector grafische editor (CorelDraw);
- - optioneel: 3D-modelleeromgeving (Blender, 3DStudio);
- - optioneel: vel papier, potlood of pen.
instructies:
Stap 1
Ontwikkel een concept voor de toekomstige siteheader. Idealiter zou het concept gebaseerd moeten zijn op het oorspronkelijke idee. Bij gebrek aan ideeën kan inspiratie worden opgedaan door bestaande goede oplossingen te analyseren. Reflecteer het resultaat van creatief onderzoek in de vorm van een schets op een stuk papier. De schets moet de structuur van de toekomstige kop van de site weerspiegelen met de aanduiding van "rubberen" plaatsen en gebieden gevuld met afbeeldingen. In dit stadium is het een goed idee om na te denken over een ongeveer kleurenschema voor het ontwerp van de koptekst.
Stap 2
Selecteer de grootte van de kop. Het is eigenlijk de moeite waard om slechts één van de parameters duidelijk te definiëren - de hoogte. In de regel is de hoogte van de siteheaders vast en is deze niet afhankelijk van de logische resolutie die de weergaveparameters van lettertypen beïnvloedt. Met andere woorden, u moet een waarde kiezen voor de kophoogte in pixels. In dit geval is het zinvol om rekening te houden met de mogelijkheid om banners of blokken met contextuele advertenties in de koptekst te plaatsen. Met betrekking tot de breedte moet u de minimumwaarde bepalen, waarbij u ten minste één "rubberen" gebied markeert waarmee de kop zich kan aanpassen aan verschillende formaten van de webpagina.
Stap 3
Maak een koptekstsjabloon in een grafische editor. Voeg in een nieuw document een transparante laag toe waarnaar u de schets zult slepen volgens de geselecteerde geometrische parameters. De laaghoogte moet overeenkomen met de kopteksthoogte. De breedte kan willekeurig worden genomen, maar groter dan de minimumgrootte, zodat er ruimte overblijft voor horizontale "rubberen" gebieden.
Stap 4
Zoek of maak statische afbeeldingen om in uw kopsjabloon te plaatsen. Het logo en enkele unieke elementen kunnen worden gemaakt in een vectoreditor of een 3D-modelleringsomgeving. Het is vrij eenvoudig om thematische afbeeldingen te vinden op gratis fotobanken op internet.
Stap 5
Voeg de achtergrond, het logo en de statische afbeeldingen in de sjabloon voor de sitekoptekst in een grafische editor in. Voeg de achtergrond en elke afbeelding toe aan een aparte transparante laag. Schik de lagen op de beste manier. Door afbeeldingen in lagen te verplaatsen, krijgt u hun perfecte lay-out, overeenkomend met de eerder gemaakte sjabloon.
Stap 6
Sla de resulterende koptekstafbeelding op. Sla het werkproject op in de oorspronkelijke indeling van de grafische editor. Sla vervolgens de afgevlakte koptekstafbeelding op in een verliesvrije indeling (bijvoorbeeld PNG).
Stap 7
Maak indien nodig een HTML-headersjabloon. Open de afgeplatte afbeelding in de editor. Knip er afbeeldingen uit die overeenkomen met gebieden met een vaste grootte. Knip de afbeeldingen 1 pixel breed uit de plaatsen die overeenkomen met de "rubberen" gebieden. Sla alle afbeeldingen op schijf op. Lay-out de HTML-header met behulp van de opgeslagen afbeeldingen.
