Der Grundsatz „von Kleidern begrüßt zu werden“gilt nicht nur für Menschen, sondern auch für Websites. Das Kleid der Website ist ihr Design. Und es ist das Design, das den Eindruck bestimmt, den der Besucher in den ersten Sekunden beim Betrachten der Ressource hat. Dieser Eindruck ist besonders wichtig, weil er sein zukünftiges Verhalten bestimmt. Das erste Gestaltungselement, das jeder Benutzer, der die Site besucht, sieht, ist der "Header". Die Kappe ist das Gesicht der Webressource. Daher möchte jeder unerfahrene Webdesigner zunächst lernen, wie man Header für Websites erstellt.
Notwendig
- - Zugang zum Internet;
- - moderner Browser;
- - Rastergrafik-Editor (GIMP, Photoshop);
- - optional: Vektorgrafik-Editor (CorelDraw);
- - optional: 3D-Modellierungsumgebung (Blender, 3DStudio);
- - optional: Blatt Papier, Bleistift oder Kugelschreiber.
Anweisungen
Schritt 1
Entwickeln Sie ein Konzept für den zukünftigen Site-Header. Idealerweise sollte das Konzept auf der ursprünglichen Idee basieren. Wenn Ideen fehlen, kann Inspiration durch die Analyse vorhandener guter Lösungen gewonnen werden. Reflektieren Sie das Ergebnis kreativer Recherche in Form einer Skizze auf einem Blatt Papier. Die Skizze sollte die Struktur des zukünftigen Headers der Site mit der Angabe von "Gummi"-Stellen und mit Bildern gefüllten Bereichen widerspiegeln. In dieser Phase empfiehlt es sich, über ein ungefähres Farbschema für die Gestaltung der Kopfzeile nachzudenken.
Schritt 2
Wählen Sie die Größe der Kopfzeile aus. Eigentlich lohnt es sich, nur einen seiner Parameter klar zu definieren - die Höhe. In der Regel ist die Höhe der Site-Header fest und hängt nicht von der logischen Auflösung ab, die sich auf die Anzeigeparameter von Schriftarten auswirkt. Mit anderen Worten, Sie sollten einen Wert für die Kopfzeilenhöhe in Pixeln wählen. In diesem Fall ist es sinnvoll, die Möglichkeit zu berücksichtigen, Banner oder Blöcke kontextbezogener Werbung im Header zu platzieren. In Bezug auf die Breite sollten Sie den Mindestwert bestimmen, indem Sie mindestens einen "Gummi"-Bereich hervorheben, der es der Kopfzeile ermöglicht, sich an unterschiedliche Größen der Webseite anzupassen.
Schritt 3
Erstellen Sie eine Kopfzeilenvorlage in einem Grafikeditor. Fügen Sie in einem neuen Dokument eine transparente Ebene hinzu, auf die Sie die Skizze gemäß den ausgewählten geometrischen Parametern ziehen. Die Layerhöhe sollte der Kopfzeilenhöhe entsprechen. Die Breite kann beliebig gewählt werden, ist jedoch größer als die Mindestgröße, sodass Platz für horizontale „Gummi“-Bereiche bleibt. „Bestimmen Sie in der Vorlage Zonen mit fester und variabler Größe, Zonen, die mit statischen Bildern und Hintergrundbildern gefüllt werden sollen.
Schritt 4
Suchen oder erstellen Sie statische Bilder zum Platzieren in Ihrer Header-Vorlage. Das Logo und einige einzigartige Elemente können in einem Vektoreditor oder einer 3D-Modellierungsumgebung erstellt werden. Es ist ganz einfach, thematische Bilder auf kostenlosen Fotobanken im Internet zu finden.
Schritt 5
Fügen Sie den Hintergrund, das Logo und die statischen Bilder in die Site-Header-Vorlage in einem Grafikeditor ein. Fügen Sie den Hintergrund und jedes Bild einer separaten transparenten Ebene hinzu. Ordnen Sie die Schichten am besten an. Durch das Verschieben von Bildern in Ebenen erreichen Sie ihr perfektes Layout, das der zuvor erstellten Vorlage entspricht.
Schritt 6
Speichern Sie das resultierende Header-Bild. Speichern Sie das Arbeitsprojekt im nativen Format des Grafikeditors. Speichern Sie dann das reduzierte Kopfzeilenbild in einem verlustfreien Format (z. B. PNG).
Schritt 7
Erstellen Sie bei Bedarf eine HTML-Header-Vorlage. Öffnen Sie das reduzierte Bild im Editor. Schneiden Sie daraus Bilder aus, die Bereichen einer festen Größe entsprechen. Schneiden Sie an den Stellen, die den "Gummi"-Bereichen entsprechen, die Bilder 1 Pixel breit aus. Speichern Sie alle Bilder auf der Festplatte. Gestalten Sie den HTML-Header mit den gespeicherten Bildern.
