Header Image selbst erstellen

Eine Möglichkeit, ein modernes und hübsches Header Image zu erstellen, ist es, ein geeignetes Foto auszuwählen, zurecht zu schneiden und den Domainnamen und einen Slogan als Text über dieses Foto zu legen. Exemplarisch an meinem aktuellen Nischenseiten-Projekt für Waffenkoffer möchte ich das in diesem Artikel zeigen.

Natürlich sollte man gerade für das Header Image ein Foto wählen, welches keine Nennung des Urhebers erfordert, am besten verwendet man also ein Foto aus der Fotodatenbank Pixabay. Dieses sollte thematisch passen – man findet jedoch dort kaum Fotos mit den notwendigen Header-Abmessungen. Diese werden i.d.R. vom WordPress-Theme empfohlen und finden sich als Ratschlag dort, wo man auch das Header Image wählen kann. Also muss man ein Foto wählen, welches auch nach dem Zuschneiden noch ein interessantes Foto ergibt und davon die größte Auflösung downloaden (erfordert Anmeldung bei Pixabay).

Beispiel des Rohbildes:

Paint sollte man nicht benutzen, weil die Schrift nicht separat gespeichert und irgendwann wieder editiert werden kann, sondern mit dem Bild verschmilzt. Daher nimm für die Headerbild-Gestaltung das Online-Designtool canva.com. Wähle hier „Benutzerdefinierte Abmessungen verwenden“. Dann schau im WordPress-Theme nach (Appearance -> Customize -> Header-Image (o.Ä.)), wie groß das Bild sein sollte und gib diese Abmessungen bei canva.com ein. Lade das Rohbild hoch. Dann zieht man das Bild so lange in die passende Größe, bis der Bildausschnitt optisch ansprechend ist.

Beispiel nach dem Zuschneiden:

Jetzt braucht es noch die Schrift in der passenden Größe, Schriftart und Farbe. Ich wähle die Domain selbst und einen Slogan als Text. Die Farbe stimmt man mit den dominanten Elementen auf dem Bild ab – hier die Patronenhülse. Mit

Mit Just Color Picker kann man die Farbe der Patrone als Hexwert(!) bestimmen. Das muss man ein bisschen try&error-mäßig machen, weil sich selbst benachbarte Pixel in der Farbe unterscheiden. Danach gibt man den Farbwert in einen Online-Colormatcher ein, um die dazu passenden Farben herauszufinden.

In meinem Beispiel passt zu (8d6c36) am besten (DBA753)

Das Ergebnis kann sich sehen lassen:

Veröffentlicht von

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.