Es gibt drei Arten von Headern, die normalerweise auf den alten Interwebs verwendet werden – Navigationsheader, vollständige Fotoheader und Begrüßungsheader. Wenn Sie daran interessiert sind, wie Sie einen Blog-Header erstellen, müssen Sie die Vor- und Nachteile für jeden Typ kennen, bevor wir uns mit der Erstellung befassen.

Navigationsüberschriften

Navigationsüberschriften basieren nicht auf Fotos. Zum Beispiel habe ich ganz oben auf meiner Website mein Logo sowie Links zu wichtigen Seiten oder Anmeldeformularen. Schau mal.

Navigationsüberschriften wie diese sind ideal, wenn Sie ein Fan von Minimalismus sind und die Leute dazu bringen möchten, sich wirklich auf Ihr Schreiben zu konzentrieren, ohne von Bildern abgelenkt zu werden.

Es ist auch eine großartige Route, wenn Sie neu sind, Ihr Branding noch nicht herausgefunden haben oder einfach nur online gehen müssen.

Das Layout ist nicht in Stein gemeißelt – Navigationsüberschriften können auf alle Arten angelegt werden. Sie haben wahrscheinlich einige gesehen, bei denen sich das Logo in der Mitte über Textlinks befindet, oder es enthält möglicherweise nur das Logo ohne Links (oder umgekehrt).

Dieser Header lebt oft in Harmonie mit zusätzlichen Blog-Headern (meine Website hat tatsächlich auch einen anderen Header darunter), wie vollständige Foto-Header und Willkommens-Header.

Foto-Header

Der Foto-Header-Stil ist sehr auffällig und zieht Sie wirklich an. Wenn Sie einen Foto-Header in Ihrem Blog haben möchten, überlegen Sie, was das Thema sein wird. Wird es ein Foto einer Person sein? Wie Sie oder Sie und Ihre Familie oder eine Darstellung Ihres idealen Kunden? Oder wird es ein Foto mit einer Art Landschaft, Muster, Cartoon / Icons oder sogar ein Video sein?

Schauen Sie sich dieses Beispiel von AlexTooby.com . Alex verwendet ein Foto von sich und ein bisschen von der Idee der Willkommensmatte mit einem starken Call-to-Action, um sich für ihren Kurs anzumelden.

Das Foto funktioniert sowohl für Neulinge als auch für wiederkehrende Besucher. Warum? Weil sie ein paar subtile visuelle Elemente verwendet (mehr dazu später), die dazu dienen, die Stärke dieses Headers zu verstärken. Sie hält ihr Handy heraus, mit der Instagram-Oberfläche verspottet, und sie schaut auf den Text, den sie lesen soll. Dein Auge wird natürlich zu ihrem Gesicht gezogen, dann zu den Worten, dann runter zum leuchtend rosa Knopf zum Klicken. Dies wäre weniger effektiv, wenn sie auf die linke Seite des Bildschirms schauen würde.

Profi-Tipp: Wenn jemand „in“ in Richtung Kopie oder Schaltfläche zeigt, ist dies ein Ninja-Designtrick, den Sie auch verwenden können.

Foto-Header können eine Stimmung setzen und dazu beitragen, Ihre Leser zum Handeln zu bewegen. Da Foto-Header groß sind, blockieren sie andere Ablenkungen auf der Seite und helfen den Lesern, sich genau auf das zu konzentrieren, was Sie tun sollen (wie Alex ‚Schaltfläche „Kostenlosen Kurs starten“).

Begrüßungsmatte>

Die typische „Begrüßungsmatte“, die Sie im Internet sehen, ist eine Vollbild-Übernahme, und es gibt Tools, die Ihnen dabei helfen.

Oder, wenn Sie nicht Ihre gesamte Seite übernehmen möchten, können Sie auch einen Teil einrichten, der sich wie eine Willkommensmatte oder ein Anmeldeformular für ein spezielles Werbegeschenk verhält, das Sie anbieten. Nicht sicher, wie das aussehen würde? Schauen Sie sich das Bild unten von meiner Website an. Ich biete einen kostenlosen E-Kurs an, den alle Besucher zuerst sehen sollen, damit ich meine E-Mail-Liste mit der richtigen Zielgruppe für zukünftige E-Mails und Werbeaktionen erstellen kann. Meine Blogeinträge werden darunter angezeigt, sodass Besucher einfach nach unten scrollen können, um meine neuesten Beiträge zu sehen.

Nachdem Sie die drei verschiedenen Stile gesehen haben, ist es an der Zeit, über das Erstellen eines Blog-Headers für Ihre Website zu sprechen.

So erstellen Sie einen Blog-Header, der gebrandmarkt aussieht

Ich weiß, dass der Begriff „gebrandmarkt“ offiziell und einschüchternd klingt, aber keine Angst! Es ist eigentlich ziemlich einfach, wenn Sie sich nur auf ein paar wichtige Dinge konzentrieren. Nämlich Farben (oft in Ihrem Logo zu finden) und Schriftarten.

Profi-Tipp: Stellen Sie sich einen Markenleitfaden in einem Ordner zusammen, damit Sie diese Informationen (zusammen mit Ihrem Logo) jederzeit im Auge behalten können.

Selbst wenn Sie keinen ausgefallenen gedruckten Leitfaden erstellen, können Sie diese Informationen auf eine Haftnotiz notieren und auf Ihrem Monitor aufbewahren. Es wird Ihnen auf lange Sicht viel Zeit sparen! Lassen Sie uns nun einige Designelemente aufschlüsseln.

Wählen Sie Ihre Farben

Möglicherweise haben Sie einige Farben für Ihre Marke ausgewählt, aber ein guter Ausgangspunkt ist Ihr Logo. Ihre Logo-Farbe (n) sind eine große über Ihre Website, Branding und Blog-Header zu verwenden. Konsistenz ist der Schlüssel – wenn Sie ein heißes Rosa haben, dann haben Ihre Fotos vielleicht ein Element von Rosa oder eine allgemeine rosa Besetzung, oder vielleicht verwenden Sie Schwarz und Weiß und ziehen Farbe auf andere Weise.

Aby von YouBabyMeMummy.com tut dies wunderbar, indem sie eine wunderschöne, vollfarbige Version über ihr Logo als Überlagerung auf einem Schwarzweißfoto von sich selbst mit ihrer Tochter einfügt. Dieser Foto-Header zieht Sie wirklich auf mutige und ansprechende Weise in ihre Geschichte ein. Klicken Sie sich auf ihrer Website um, wenn Sie weitere Beispiele für atemberaubende Vollbildbilder sehen möchten.

Und wenn Sie immer noch versuchen herauszufinden, welche Farben Sie in Ihrer Marke verwenden sollen, ist dieser Artikel über Farbpsychologie sehr aufschlussreich!

Wählen Sie eine Schriftart

Die Einbindung einer stilvollen oder gebrandeten Schriftart direkt in Ihre Kopfzeile kann eine wirklich relevante und schnelle Möglichkeit sein, Ihre Botschaft zu vermitteln. Wie in diesem sehr einzigartigen und auffälligen Bild von Luci drüben ByLucinda.co.uk.

Diese Meereslandschaft passt genau zu ihrer Marke, die viele natürliche Elemente enthält und ihre elegante, aber freche Atmosphäre zeigt. Keine Times New Roman für diese Dame! Sie hat auch eine clevere Möglichkeit, ihre Social-Media-Links auf der rechten Seite in einem hellgrünen rechteckigen Streifen anzuzeigen. Es verbindet die obere Navigation mit dem großen, fetten Foto und hilft, das Auge absichtlich auf die Seite zu ziehen.

Sie können einige wirklich lustige, kostenlose Schriftarten online von Orten wie Font Squirrel und Dafont finden. Viele dieser kostenlosen Schriftarten sind direkt in Programme wie Canva und PicMonkey integriert. Da sie jedoch kostenlos sind, besteht eine höhere Wahrscheinlichkeit, dass jemand anderes (sogar ein Konkurrent) den gewünschten verwendet.

Wenn Sie ausgefallenere Schriftarten im Textkörper oder in den Überschriften Ihrer Website verwenden möchten (d. H. Nicht in einem Bild), sollten Sie sich etwas Zeit nehmen, um sich mit Google Fonts vertraut zu machen. Und um zu erfahren, welche Schriftarten für das Webdesign verwendet werden sollen, lesen Sie diese drei Gebote.

Integrieren Sie visuelle Elemente

Wenn Sie Ihren Marken-Blog-Header erstellen, sollten Sie darüber nachdenken, welche visuellen Elemente Sie einfügen möchten. Wir haben Beispiele mit einem Logo, einem Foto und einem großen Clear-Button überprüft.

Jen von ToastMeetsJam.com tut genau das. Sie hat nicht einfach eine Tabelle wie in einer langweiligen Tabelle abgelegt – sie hat künstlerische Linien und großartige Schriftarten zusammen mit ihren Formularfeldern und einem kreisförmigen „GO“ -Button verwendet.

Sehen Sie, wie sie ihre E-Mail-Anmeldung nahtlos in das Design integriert? Sie beschäftigt dich nicht nur mit dem Foto von sich selbst, das animiert und freundlich aussieht, sondern nutzt auch einen sauberen, grauen Hintergrund, um dich auf den Text und das Formular zu konzentrieren. Keine ablenkenden Muster oder Bilder, die Sie von der Hauptaufgabe ablenken, dieses Formular auszufüllen und voranzukommen. Es könnte nicht klarer sein, was Sie tun müssen, um ihren kostenlosen fünftägigen Kurs zu erhalten.

Machen Sie sich bereit zu entwerfen

Sie haben einige Beispiele für großartige Blog-Header gesehen, aber was machen Sie als nächstes? Um Ihren eigenen Blog-Header zu erstellen, müssen Sie einige Design-Tools und Informationen zur Bildgröße sammeln.

Design-Tools

Die wesentlichen Design-Tools für die Erstellung Ihrer eigenen benutzerdefinierten Blog-Header müssen nicht schwer zu bedienen oder teuer sein. Probieren Sie ein paar aus und sehen Sie, womit Sie sich wohl fühlen, dann machen Sie es! Mach dir keine Sorgen, wenn sie sich zuerst unangenehm anfühlen — du wirst besser, je mehr du sie benutzt. Hier sind einige, die Sie erkunden können, in der Reihenfolge vom einfachsten zum schwierigsten.

Canva. Dies ist wahrscheinlich die einfachste auf dem Markt, und es ist kostenlos! Es gibt eine kostenpflichtige Version namens Canva for Work, wenn Sie tiefer eintauchen möchten, aber die kostenlose Version macht wirklich Spaß und ist einfach zu erlernen. Es ist ein webbasiertes Design-Tool, also loggen Sie sich einfach auf der Website ein und verwenden Sie es direkt in Ihrem Browser.

PicMonkey. Wenn Sie wirklich Fotos bearbeiten und mit Filtern spielen möchten, ist PicMonkey einen Versuch wert. Es gibt viele lustige Effekte eingebaut. Wie Canva ist PicMonkey webbasiert und verfügt über eine kostenlose Version sowie eine kostenpflichtige Version mit zusätzlichen Funktionen.

Photoshop. Sie können keine Designsoftware erwähnen und Photoshop nicht aufrufen! Es ist ein Kraftpaket eines Programms und kann viel mehr als nur einen Blog-Header erstellen, aber dafür ist es definitiv großartig. Es ist eine Anwendung, die Sie herunterladen, und Sie zahlen per monatlichem Abonnement (eine kostenlose Testversion ist ebenfalls verfügbar).

Als professioneller Designer verwende ich Photoshop seit meiner gesamten Karriere und ich liebe es. Die meisten meiner Leser denken, dass Photoshop zunächst einschüchternd ist, aber es ist völlig machbar, sobald Sie ein paar Grundlagen gelernt haben. Ich muss jedoch sagen, seit ich Canva entdeckt habe, verwende ich oft eine Kombination aus Photoshop und Canva, um meine Grafiken zu erstellen. Canva macht einfach Spaß!

Pro-Tipp: Wenn Sie den Foto-Plan von Adobe abholen, können Sie Photoshop + Lightroom für eine ziemlich niedrige monatliche Kosten erhalten. Nicht zu schäbig.

WordSwag. Wenn Sie gerne Grafiken auf Ihrem Telefon erstellen, ist dies genau das Richtige für Sie. Diese mobile Anwendung ist nicht kostenlos, kostet aber nur ein paar Dollar und verfügt über eine iOS- und Android-Version. Außerdem ist es an eine kostenlose Creative Commons-Fotoseite angeschlossen, sodass Sie bei der Bildauswahl in Ihrem Blog-Header nie ratlos sind. Es stehen alle möglichen Farben, Texturen und Schriftarten zur Auswahl. Alles, was Sie tun müssen, ist, Ihre endgültige Grafik in „the Cloud“ zu speichern oder sie an Ihren Computer anzuschließen, damit Sie sie auf Ihre Website hochladen können.

Bildgrößen

Wenn Sie Ihren Blog-Header erstellen, müssen Sie die Bildgröße in Bezug auf Ihre Site-Plattform berücksichtigen. Die Größe Ihres WordPress-Themes unterscheidet sich möglicherweise von der Squarespace-Seite der nächsten Person oder dem GoDaddy GoCentral-Website-Builder. Hier sind einige Dinge zu beachten:

Pixelabmessungen. Größen werden normalerweise als einige Zahlen breit und einige Zahlen hoch und in Pixelabmessungen aufgeführt. Beispiel: 1000 × 400 (oder 1000px x 400px) bedeutet, dass Ihr Bild 1000 Pixel breit und 400 Pixel hoch ist.

Auflösung. Für das Internet ist Ihre Auflösung einfach — es ist immer 72! Höhere Auflösungen wie 300, 600 oder mehr sind zum Drucken geeignet. Bildschirmauflösungen für Monitore sind immer nur 72. Wenn Sie also unsere Beispielabmessungen von oben verwenden, wäre Ihr endgültiges Bild 1000 Pixel breit und 400 Pixel hoch, 72 dpi (oder ppi).

Dateityp. PNG-Dateien verlieren niemals an Qualität, egal wie oft Sie sie speichern, sondern sind in MB (Megabyte) größer. JPG (JPEG) -Dateien können auf verschiedenen Qualitätsstufen gespeichert werden, so dass Sie die Dateigröße (MB) klein halten können, aber jedes Mal, wenn Sie sie speichern, verlieren sie ein wenig an Qualität. A.eine JPG-Datei, die zweimal gespeichert wird, sieht gut aus, aber nachdem Sie sie fünf oder 10 Mal gespeichert haben, sieht sie pixelig und körnig aus.

Optimieren bedeutet, sie kompakter bei einer kleineren Dateigröße zu speichern, aber vorsichtig, damit Sie nicht an Qualität verlieren. Sie können dies ganz einfach über eine kostenlose Website namens TinyPNG tun. Beobachten Sie, wie der süße Panda Ihre Bilder so komprimiert, dass sie fabelhaft aussehen, aber Megabyte sparen!

So erstellen Sie einen Blog-Header in Canva

1. Registrieren Sie sich für ein Konto.

2. Verwenden Sie benutzerdefinierte Dimensionen.

3. Wählen Sie ein kostenloses Foto.

4. Fügen Sie benutzerdefinierten Text hinzu.

5. Personalisieren Sie Ihr Design.

6. Fügen Sie ein Logo hinzu.

7. Laden Sie Ihren Blog-Header herunter.

Jetzt zum lustigen Teil! Lassen Sie uns mit Canva einen benutzerdefinierten Blog-Header von Grund auf neu erstellen. Ich benutze Ressourcen, die kostenlos zur Verfügung stehen, so können Sie völlig dies auf eigene Faust zusammen mit mir tun. Melden Sie sich einfach für ein kostenloses Konto an und Sie können loslegen.

Hier ist der Blog-Header, den wir erstellen werden:

1. Registrieren Sie sich für ein Konto.

Sobald Sie sich für ein Konto bei Canva angemeldet haben, gelangen Sie zu einer Seite zum Erstellen eines Designs, auf der Sie oben rechts auf Benutzerdefinierte Abmessungen verwenden klicken möchten.

Verwenden Sie benutzerdefinierte Abmessungen.

Geben Sie die gewünschte Breite und Höhe in die angezeigten Felder ein und wählen Sie „px“ für Pixel. Danach klicken Sie auf das Design! Schaltfläche.

Ein neues Projekt wird mit einem leeren Bildschirm und der Registerkarte Layouts links angezeigt. Beachten Sie, dass der Projektname nicht angegeben wurde, sodass er sich oben neben der Freigabetaste „1000px x 400px — Untitled Design“ nennt.

Wählen Sie ein kostenloses Foto aus.

Klicken Sie auf Elemente und wählen Sie ein kostenloses Foto aus den bereitgestellten aus. Alle freien sagen „FREI“ in der unteren Ecke. Sie können auch Ihr eigenes Foto hochladen, aber für unser Tutorial werden wir mit einem dieser kostenlosen Fotos arbeiten.

Sobald Sie auf das Foto klicken, wird es sofort im Designbereich Ihres Projekts angezeigt. Lassen Sie uns dieses Projekt umbenennen, während wir gerade dabei sind. Klicken Sie auf den temporären Namen neben der Schaltfläche Freigeben, und geben Sie einen neuen ein. Ich nenne das „Reisetagebücher“ für meinen eigenen Reiseblog.

Nachdem sich Ihr Bild im Entwurfsbereich befindet, können Sie es vergrößern, indem Sie die Kreise in den Ecken ziehen. Passen Sie die Größe dieses Bildes an das Dokument an.

Fügen Sie benutzerdefinierten Text hinzu.

Großartig! Jetzt brauchen wir etwas Text. Klicken Sie auf die Registerkarte Text in der linken Spalte, und Sie sehen einige Optionen zur Auswahl. Sie können im unteren Bereich dieses Fensters auf vorgefertigte Textanordnungen oder oben auf einzelne Textzeilen klicken. Gehen Sie weiter und klicken Sie auf Überschrift hinzufügen. Dieser Text wird standardmäßig in Schwarz im Bild angezeigt.

Jetzt für etwas Spaß! Wählen wir eine andere Schriftart. Durchsuchen Sie die Schriftarten und wählen Sie alles aus, was Ihnen gefällt. Ich wählte einen Pinsel-Stil. Es ist schwer, Schwarz auf diesem Bild zu sehen, also ändern wir es in Weiß. Klicken Sie auf das bunte Kästchen oben, um die Farbauswahl aufzurufen, und wählen Sie das weiße Quadrat. Ich habe auch die Größe auf 104 angepasst.

Als nächstes ziehen Sie diese Überschrift in das Bild, damit sie zentrierter ist.

Personalisieren Sie Ihr Design.

Es ist etwas schwierig, den Text auf diesem geschäftigen Hintergrund zu lesen und zu fokussieren. Klicken Sie einfach auf das Hintergrundfoto, um es auszuwählen, wählen Sie dann Filter und klicken Sie auf Erweiterte Optionen.

Das Filterfenster wird erweitert, um Ihnen einige andere Dinge zu zeigen, die Sie tun können. Sie können mit Sättigung, Farbtönung, Hinzufügen einer Vignette und vielem mehr spielen.

Klicken Sie auf den schwarzen Punkt im Abschnitt Unschärfe und ziehen Sie ihn nach rechts. Ich habe +22 auf der Unschärfeskala gewählt.

Fügen Sie ein Logo hinzu.

Klicken Sie nun aus diesem Fenster, um Ihr Design zu sehen. Sieht gut aus! Lassen Sie es uns nun mit einem Logo versehen. Sie können Ihr Logo hochladen, indem Sie links auf die Registerkarte Uploads und dann auf die große grüne Schaltfläche Eigene Bilder hochladen klicken.

Wählen Sie ein Transparent .PNG-Version Ihres Logos, damit es nicht auf eine Volltonfarbe abgeflacht wird (es sei denn, Ihr Logo-Stil befindet sich in einem weißen Rechteck oder ähnlichem).

Wenn es geladen ist, sehen Sie es im Bereich unter der grünen Schaltfläche. Es bleibt für Sie da, um es für zukünftige Projekte zu verwenden. Praktisch! Ich hatte bereits mein gefälschtes Logo hochgeladen, also habe ich einfach nach unten gescrollt, um es zu finden.

Klicken Sie auf das Logo, und es wird in Ihrem Design angezeigt.

Jetzt können Sie die Größe ändern, verschieben und sogar schick werden und mit der Transparenz spielen, wenn Sie möchten.

Laden Sie Ihren Blog-Header herunter.

Juhu! Jetzt ist Ihr Design fertig, also müssen Sie es nur noch herunterladen. Klicken Sie oben auf dem Bildschirm auf die Schaltfläche Herunterladen und wählen Sie Ihren Dateityp aus. Ich gehe normalerweise mit dem empfohlenen PNG-Typ.

Sobald Ihr Design auf Ihren Computer heruntergeladen wurde, können Sie es öffnen und bewundern und dann in Ihr Blog laden.

Und das ist alles! Hoffentlich haben Sie einen guten Überblick darüber, wie Sie einen Blog-Header erstellen und wie wichtig ein herausragendes Bild ist. Jetzt können Sie einen zu Ihrem Blog hinzufügen. Glückliches Branding!