So gestalten Sie das perfekte Twitter-Header-Bild

Twitter hat kürzlich ein aktualisiertes Design für Profilseiten eingeführt, mit dem Sie ein neues "Header-Foto" einfügen können. das sich auf Ihrem Feed befindet, ähnlich wie das Timeline-Titelbild von Facebook.

Heute werden wir ein paar Beispiele für gute Twitter-Profilbilder sehen und diskutieren, wie Sie Ihre eigenen gestalten können. Ich werfe sogar eine kostenlose Vorlage, damit Sie sofort loslegen können.

Kostenlose Vorlage!

Bevor wir in den Artikel eintauchen, finden Sie hier eine praktische, kostenlose Vorlage, mit der Sie Ihr eigenes Twitter-Headerbild entwerfen können. Die bereitgestellte Datei ist eine in Photoshop CS6 erstellte PSD.

Schnappen Sie sich Ihre kostenlose PSD: Klicke hier zum herunterladen.

Wie man es benutzt

Um diese Vorlage zu verwenden, ersetzen Sie einfach das Hintergrundbild. Die UI-Layer-Gruppe soll Ihnen helfen, eine gute Vorstellung davon zu bekommen, wie das Bild aussehen wird, sobald es auf der Website implementiert ist. Blenden Sie die gruppierten Ebenen vor dem Speichern aus.

Lernen Sie das neue Twitter-Profil kennen

Früher war Twitter ein textorientierter Dienst. Heutzutage versuchen sie ständig, das visuelle Erlebnis durch die Integration von Multimedia-Funktionen und -Support zu verbessern.

Das neueste Profil-Redesign führt diese Idee durch prominentere Fotostreams und eine brandneue Funktion: den Twitter-Profilheader.

Wie Sie sehen können, befindet sich dieses neue Bild oben auf Ihren letzten Tweets und enthält Ihr Profilbild sowie einen kurzen Text über Sie. Um die Einführung der neuen Profile zu erleichtern, scheint Twitter eine Partnerschaft mit NBC eingegangen zu sein. Viele unserer Beispiele stammen von ihren verschiedenen Konten (noch nicht alle Benutzer haben ein Upgrade durchgeführt).

Letztendlich fügt dies Ihrem Profil keine Unmenge an Designarbeit hinzu, es ist lediglich ein zusätzliches Bild. Allerdings kann auch ein kleines Bild viele Fragen aufwerfen, daher beantworte ich hier einige Fragen, die Sie möglicherweise beim Erstellen Ihres Twitter-Headerbildes haben.

Wie setzen Sie Ihren Profilkopf?

Die erste Frage, die Sie sich stellen müssen, lautet: Wie wenden Sie sich an diese Sache? Wenn Sie zu Ihrem Profil gehen, sieht es aus wie immer. Derzeit behalten Benutzer, die kein Header-Bild eingerichtet haben, das alte Design.

Um Ihr Profil zu aktualisieren, klicken Sie oben rechts auf der Seite Einstellungen auf. Klicken Sie von hier auf "Design". Registerkarte in der linken Navigationsleiste.

Wenn Sie sich auf der Gestaltungsseite befinden, scrollen Sie nach unten, um Ihre eigenen Einstellungen vorzunehmen. Sektion. Hier sehen Sie einen? Header ändern? Taste. Klicken Sie einfach darauf und laden Sie Ihr Bild hoch, um Ihre Kopfzeile festzulegen.

Das ist alles dazu! Jetzt müssen Sie nur noch entscheiden, was Sie dort ablegen möchten!

Welche Größe?

Die nächste wichtige Frage, die Sie beim Entwerfen Ihres Profilkopfes stellen sollten, lautet: Welche Größe? Wenn wir uns die NBC-Bilder ansehen, die Twitter zweifellos persönlich beim Einrichten mitgeholfen hat, sehen wir, dass die Größe 520px groß und 260px hoch ist.

Letztendlich bricht dies zu einem Verhältnis von Breite zu Höhe von 2: 1 zusammen mit einer maximalen Uploadgröße von 5 MB oder 1252 Pixeln bei 626 Pixeln.

Design-Tipps und Überlegungen

Die Größe des Bildes, das Sie hochladen, ist sicherlich nicht die einzige Überlegung, die Sie berücksichtigen müssen. Ich habe ein paar Macken bemerkt, die Sie unbedingt wissen müssen, wenn Sie ein erfolgreiches Design erstellen möchten.

Achten Sie auf Ihre Lesbarkeit

Um mit dem Raum auf meinem persönlichen Konto zu experimentieren, habe ich ein zufälliges Foto von einer digitalen Anzeige in New York City aufgenommen. Es schien, als würde er den perfekten abstrakten Hintergrund bilden. Hier ist das Ergebnis:

Wie Sie sehen, ist es ein ziemlich attraktives Bild. Das Problem ist jedoch, dass es den Text ziemlich stört und ich eine lesbare Nuss bin.

Natürlich möchten Sie mit dem weißen Text einen Hintergrund, der anständig dunkel ist. Meine passt zu dieser Beschreibung, aber die Lichter dienen als helle Punkte, die den Kontrast zwischen den Buchstaben und dem Hintergrund verringern und zu viele Ablenkungen hinzufügen.

Die Lösung hier ist ziemlich einfach, ich habe nur den Hintergrund verdunkelt, in dem der Text liegt, so dass die Lichter nicht so stark stören. Das Ergebnis ist optisch nicht ganz so cool, aber es ist viel lesbarer:

Twitter-Schrauben mit Ihrem Bild

Die Leute bei Twitter wissen, dass der Trick, den ich oben verwendet habe und den unteren Rand des Bildes verdunkelt, etwas ist, das bei vielen Bildern gemacht werden muss. Tatsächlich führt die Site dies automatisch aus, egal ob Sie es möchten oder nicht.

Als Test habe ich dieses Image genommen und für den Design Shack-Header vorbereitet. Folgendes sehe ich in Photoshop:

Wenn ich nun dieses Bild hochlade, wie Sie es oben sehen, ist hier das Ergebnis, wie es auf unserer Profilseite angezeigt wird:

Sieh den Unterschied? Es wurde automatisch ein Hintergrundverlauf angewendet, der die Originalfarben erheblich verdunkelt. Bei den meisten Fotos ist dies ein subtiler Effekt, aber wenn Sie mit weniger Details in etwas eindringen, fällt es wirklich auf.

Dies ist sicherlich keine schlechte Sache, es hilft in der Tat, den Text hervorzuheben, es ist nur etwas zu bedenken, wenn Sie Ihr Bild vorbereiten. Beachten Sie außerdem, dass Twitter automatisch abgerundete Ecken auf das Profil und das Kopfzeilenbild anwendet.

Design-Tipps

Nun, da wir alles über das Erstellen und Anwenden unseres Images wissen, wollen wir uns umsehen und sehen, was andere mit diesem Bereich für Inspiration machen.

Integrieren Sie Ihr Profilbild

Eines der besten, das ich bisher gesehen habe, ist das von Ryan Seacrest. Ich liebe die Integration des Profilfotos in das Kopfbild. Brillant. Sie können voll erwarten, zu sehen Tonnen von Benutzern, die versuchen, dies auf unterschiedliche Weise zu erreichen.

Zeig deine Arbeit

Graham Smith, der beliebteste Logo-Designer von allen, nutzte die Gelegenheit, sein Profil sofort zu aktualisieren. Seine Idee ist einfach und effektiv: Sie zeigt seine Arbeit in einem schönen, unauffälligen Raster von Logos.

Passen Sie Ihren Profilhintergrund an

Beachten Sie bei der Arbeit an Ihrem Kopfbild, dass es eigentlich Teil eines größeren Designs ist und gut zu Ihrem Hintergrundbild passen sollte.

Wir sehen, dass dies auf dem aktuellen News-Account unten gut funktioniert. Das Kopfbild ist eine rote Weltkarte aus Pixeln.

Dies ist eigentlich das gleiche Bild, das sie für den Seitenhintergrund verwendet haben, nur kleiner und in einer anderen Farbe. Dies ergibt einen schönen konsistenten Look.

Ich finde es toll, dass der große Hintergrund die subtilere Version ist, während das Kopfbild Ihre Aufmerksamkeit mit einer kräftigen Farbe erregt.

Halte es einfach

Wenn Sie Probleme mit einem guten Kopfbild haben, sollten Sie sich an drei mächtige Wörter erinnern: Halten Sie es einfach. Abgesehen von dem Bild ist in diesem Bereich viel los. Ihr Ziel ist es, alles zusammenzubinden, nicht zu kompliziert.

In Twitters eigener Großfamilie sehen wir einige gute und schlechte Beispiele dafür. Der Mitbegründer von Twitter, Evan Williams, hat sich mit einer Grafik, die für diesen Bereich viel zu beschäftigt ist, definitiv schlecht entschieden.

Vergleichen Sie dies mit dem von Twitter Bootstrap-Schöpfer Mark Otto verwendeten Bild. Seine Wahl ist viel besser:

Das ist schön, einfach und eigentlich ziemlich auffällig. Der Großteil des Bildes besteht aus Leerzeichen (in diesem Fall schwarzer Bereich), so dass der Text nicht zu stören ist. Der Inhalt ist jedoch ein Ereignis voller Emotionen und Wunder für uns alle, was zu einem unvergesslichen Erlebnis wird.

Zeig uns Deine!

Dort haben Sie alles, was Sie wissen müssen, um das perfekte Twitter-Header-Bild zu erstellen. Jetzt, da Sie meine Tipps gelesen und tolle Inspirationen gesehen haben, machen Sie sich mit unserer kostenlosen Vorlage Ihre eigenen!

Wenn Sie Ihr Twitter-Header-Bild erstellt haben, hinterlassen Sie einen Kommentar mit einem Link, damit wir sehen können, was Sie erwartet haben.