Facebook kann man wohl getrost zu einer der größten Erfolgsgeschichten des digitalen Zeitalters zählen. Kaum jemand will bzw. kann sich dem Social Network entziehen und alle User möchten sich optimal präsentieren. Hierfür kann man sich einiger kreativer Möglichkeiten bedienen. Seit Einführung der Profilbanner lassen sich zum Beispiel Titelbild und Profilbild faszinierend miteinander verbinden. Im folgenden Photoshop-Tutorial zeige ich euch, wie ihr eine Aufnahme von euch mit dem großen Titelbild zu einem innovativen Profilbanner verschmelzen lassen könnt. Zusätzlich findet ihr noch weitere kreative Beispiele von originell gestalteten Facebook-Profilen.
Damit das ganze Prozedere für euch noch etwas leichter vonstatten geht, findet ihr hinter dem Icon eine kostenlose Vorlage für Photoshop. In dieser PSD-Datei findet ihr alle Maße für euer Profilbild und den Header. Euer Profilbild wird von Facebook in einer Größe von 160 x 160 px angezeigt. Allerdings müssen bei dem sozialen Netzwerk hochgeladene Bilder mindestens 180 x 180 px groß sein, so dass ihr euer Profilbild auch in dieser Größe anlegen müsst. Um auf die Darstellungsgröße von 160 x 160 px zu kommen, schneidet Facebook an den Rändern automatisch wieder jeweils 10 px ab. Das Titelbild müsst ihr in einer Größe von 851 x 315 px erstellen. Das mag gerade etwas kompliziert klingen, aber mit dieser Vorlage wird die Erstellung eures Profilbanners zum Kinderspiel und nach lediglich 10 Steps habt ihr eure kreative Idee umgesetzt.
Step 1
Ihr beginnt nun, in dem ihr die abgespeicherte Vorlage in Adobe Photoshop über den Menüpunkt Datei->Öffnen oder die Tastenkombination Strg+O öffnet.
Step 2
Nun fügt ihr euer Titelbild in die Vorlage ein. Dazu geht ihr auf Datei->Platzieren und öffnet dann das gewünschte Bild (© Maurizio Carta, sxc.hu) vom Speicherort. Da euer Titelbild natürlich nur für die Webdarstellung gedacht ist, braucht euer Bild auch nur eine Auflösung von 72 dpi zu haben. Um euch besser zu verdeutlichen, wie dieses Ausgangsbild dann hier in der Vorlage platziert werden sollte, habe ich hier mal die Deckkraft dieser Ebene auf 50 % gesenkt.
Step 3
Dieses Bild könnt ihr im Ebenenfenster nun in die Gruppe „Titelbild“ über der Ebene Titelbild platzieren. Dann kommt schon der erste Magic Step. Ihr zieht euch mit dem Slice-Werkzeug (C), das ihr im selben Werkzeug-Fenster wie das Freistellen-Werkzeug findet, ein Slice-Rechteck auf. Damit es für euch in diesem Screenshot besser sichtbar ist, habe ich es hier im Foto noch einmal rot nachgezogen.
Step 4
Um sicherzugehen, dass der Slice auch wirklich die Größe eures Titelbildes, also 851 x 315 px hat, klickt ihr mit dem Slice-Auswahlwerkzeug (C), das ihr unter dem Slice-Werkzeug findet, doppelt auf den Slice im Bild. Im sich neu öffnenden Fenster könnt ihr nun noch einmal exakt die Abmaße des Slices eingeben. Mit dem Slice-Auswahlwerkzeug könnt ihr den Slice dann auch punktgenau an die richtige Position schieben.
Step 5
Damit habt ihr nun schon euer Titelbild eingegrenzt. Dann müsst ihr euer eigentliches Profilbild in das Bild einfügen. Dazu geht ihr wieder auf Datei->Platzieren und wählt euer gewünschtes Profilbild (© inarik, istockphoto.com) aus. Dieses müsst ihr nun in den Rahmen des Profilbildes einpassen. Um das Bild beim Einpassen zu sehen, müsst ihr die Ebene „Profilbild“ mit Klick auf das Augensymbol unsichtbar machen.
Step 6
Über dieses Profilbild legt ihr nun einen 180 x 180 px großen Slice mit dem Slice-Werkzeug (C) wie in den Steps 3 und 4 beschrieben.
Step 7
Damit nun auch euer Profilbild wirklich in das Titelbild hineinragt, müsst ihr, wie hier zu sehen, den weißen Hintergrund entfernen. Dazu fügt ihr der Ebene mit eurem Bild eine Ebenenmaske hinzu über den Menüpunkt Ebene->Ebenenmaske->Alle einblenden. Dann entfernt ihr auf der aktiven Ebenenmaske mit dem Pinselwerkzeug (P) und einem schwarzen Pinsel. Ich habe das Ganze hier jetzt nur einmal schnell nachvollzogen. Wenn ihr die Haare exakt freistellen wollt, dann erfahrt ihr in diesem Video von Mark Dannenberg, wie das schnell und einfach in Photoshop geht.
Step 8
Jetzt könnt ihr eurem Titelbild noch einen flotten oder schlauen Spruch mit dem Textwerkzeug (T) hinzufügen. Als Schriftart habe ich hier „Allura“ gewählt und die Schriftgröße beträgt 30 pt.
Step 9
Wenn nun alles korrekt platziert ist, könnt ihr euch dann schon an das Exportieren der einzelnen Slices machen. Hierfür blendet ihr zunächst noch den Rahmen um das Profilbild aus, denn diesen stellt Facebook später ja sowieso dar, weshalb wir ihn nicht mitexportieren. Dann geht ihr auf Datei->Für Web und Geräte speichern und speichert dort nun euer Profilbild ab. In dem neu erstellten Ordner am Speicherort befindet sich nun euer 180 x 180 px großes Profilbild. Dieses könnt ihr euch aus diesem Ordner herauskopieren und dann könnt ihr diesen Ordner auch schon wieder löschen.
Step 10
Jetzt müsst ihr mit dem Slice-Auswahlwerkzeug den Slice mit dem Titelbild auswählen. Diesen müsst ihr dann durch Klick auf die markierte Schaltfläche oben in der Steuerungsleiste „In den Vordergrund“ schieben. Dann verfahrt ihr wieder wie in Step 9 beschrieben. Nun habt ihr ein Titelbild und ein Profilbild, mit denen ihr dann euer Facebook-Profil aufpeppen könnt.
Fertig!
Damit ihr alles noch einmal genau nachvollziehen könnt, findet ihr hier unten das gesamte Tutorial noch einmal als PSD-Datei zum kostenlosen Download.
Einen umfassenden Überblick über alle Maße auf den Social-Media-Plattformen findet ihr drüben auf Raidious.com.
Kreative Beispiele
Nun wisst ihr, wie ihr das Ganze technisch umsetzen könnt. Sollte euch noch die passende kreative Idee fehlen, findet ihr sie vielleicht hier in den Beispielen, die ich einmal für euch rausgesucht habe. Viel Spaß beim Durchstöbern!
© Tom Lambie
© Nagaraj Vijayarangan
© Daniel Decker
© Rallye Elbflorenz
© Eduardo Calvo
© Jonas Späinghaus
© Giuseppe Draicchio
© Maria Suckert
© Jérôme Vadon
© Alfred Schweinepriest
© Jörgen Bröms
© Antonio Fadda
© Fabio Maravilla
8 Kommentare
Super Tutorial, kann man sehr gut nachvollziehen. Leider weiß ich nicht ob Facebook was geändert hat, jedenfalls ist beim fertigen Bild in Facebook ein Versatz beider Bilder zu erkennen obwohl sie aus einem Guß sind.
Viele Grüß Mario
Hallo Mario,
es kann natürlich sein, dass Facebook seiner Plattform in der Zwischenzeit die ein oder andere Designanpassung unterzogen hat. Die aufgeführten Daten sind daher vielleicht nicht mehr up-to-date. Versuch es doch mal mit diesen hier: https://www.facebook.com/help/125379114252045
Viel Erfolg und beste Grüße,
Robert
[…] Hausarbeit beispiel […]
[…] https://www.saxoprint.de/blog/tutorial-facebook-profilbanner/ […]
[…] relativ einfach zu bekommen, aber nichts für jemanden, der langfristig in USA ziehen möchte, https://www.saxoprint.de/blog/tutorial-facebook-profilbanner/ da es sich um ein Nicht-Einwanderungsvisum handelt und sich sich um ein restriktives Visum handelt. […]
[…] that you’re dissatisfied with the coursework you received or if a component of it is lacking. https://www.saxoprint.de/blog/tutorial-facebook-profilbanner/ In case for what website service that is online to choose you have to purchase coursework but […]
[…] to try and recall it has meaning because of many explanations, when composing a coursework. https://www.saxoprint.de/blog/tutorial-facebook-profilbanner/ You can ask us for revision if you discover that you’re dissatisfied with the coursework if a […]
[…] Hausarbeit beispiel coursework will be researched and edited to generate certain it’s best. It’s simple and […]