Bestpreis-GarantieKauf auf RechnungOnline-Designer
0351 20 44 444Mo - Fr: 8 - 18 Uhr
Saxoprint
Kundenbereich
Anmelden Hallo ##Anrede## ##Nachname##

Neukunde? Registrieren.

AuftragsübersichtGespeicherte DesignsAdressbuchKundendatenNewsletterAbmelden
Warenkorb
  • Saxoprint
  • Druckprodukte
    Werbebedarf
    • Aufkleber
    • Broschüren & Kataloge 
    • Bücher
    • Etiketten
    • Flyer 
    • Folder 
    • Grußkarten
    • Haftnotizen
    • Kalender & Werbekalender
    • Karten
    • Lesezeichen
    • Multimedia
    • Plakate & Poster 
    • Postkarten
    • Prospekte
    • Schreibblöcke
    • Tragetaschen
    Geschäftsausstattung
    • Briefpapier 
    • Briefumschläge
    • Durchschreibesätze 
    • Haftnotizen
    • Kalender
    • Loseblattsammlung
    • Notizbücher
    • Ordner
    • Präsentationsmappen
    • Schreibblöcke
    • Schreibtischunterlagen
    • Stempel
    • Versandtaschen
    • Visitenkarten 
    Gastro & Event
    • Beachflags
    • Eintrittskarten
    • Faltzelte
    • Kellnerblöcke
    • Klatschpappen
    • Liegestühle
    • Pappbecher
    • Plakate & Poster 
    • Speisekarten (gebunden)
    • Speisekarten (gefalzt)
    • Tischaufsteller
    • Tischsets
    • Tragetaschen
    Overnight
    • Bonuskarten
    • Briefpapier
    • CD- & DVD-Booklets
    • CD-Cover
    • Flyer
    • Folder
    • Grußkarten
    • Speisekarten
    • Taschenkalender
    • Terminkarten
    • Tischsets
    • Visitenkarten
    Alle Produkte anzeigen Produktmuster bestellen 
  • Bestpreis-Garantie
    Briefpapier
    Broschüren
    Flyer
    Folder
    Grußkarten
    Kalender
    Plakate & Poster
    Postkarten
    Schreibblöcke
    Schreibtischunterlagen
    Gefalzte Speisekarten
    Visitenkarten
    Mehr Informationen Papiermuster bestellen 
  • Verpackungen
    Faltschachteln
    Verpackungen mit Deckel
    Geschenkverpackungen
    Schuber
    Kissen- und Taschenverpackungen
    Offene Verpackungen
    Lebensmittelechte Verpackungen
    Transport- und Versandkarton
    Alle Produkte anzeigen Verpackungsmuster bestellen 
  • Werbetechnik
    Fahnen & Flaggen
    Faltzelte
    Klebefolien
    Leuchtreklame
    Messetheken
    Messewände
    Planen
    Roll Ups
    Schilder
    Stoffbanner
    Textilspannrahmen
    X- / L- Banner
    Alle Produkte anzeigen Produktmuster bestellen 
  • Corona-Produkte
    Fußbodenfolien
    Roll Ups Transparent
    Gesichtsmasken
    Gesichtsvisiere
    Gastronomie Produkte
    Home Office Produkte
    Alle Produkte anzeigen 
  • Service und Hilfe
    Bestellinformationen
    • Bestellprozess
    • Logosponsoring
    • Reseller
    • Sicherheit
    • Vorteile
    Druckdaten
    • Datencheck
    • Druckdatenanleitung
    • Druckvorlagen
    • Online-Designer
    • SAXOPRINT® pro design
    Produktoptionen
    • Druckveredelungen
    • Papierformate
    • Produktmuster
    • Sonderfarben
    FAQÜber unsBlog
    Persönlicher KontaktPersönliche Fachberatung
    • 0351 20 44 444
    • Mo - Fr:8 - 18 Uhr
    •  
    • service@saxoprint.de
    • Kontaktformular
  • Anmelden Hallo ##Anrede## ##Nachname##

    Neukunde? Registrieren.

    AuftragsübersichtGespeicherte DesignsAdressbuchKundendatenNewsletterAbmelden
    2
  • Druckprodukte
  • Bestpreis-Garantie
  • Verpackungen
  • Werbetechnik
  • Service & Hilfe
  • Blog

Tutorial: Kreativen Facebook-Profilbanner erstellen

Tutorial: Kreativen Facebook-Profilbanner erstellen
von Thomas Trummer | 16. August 2013
8 Kommentare
Tags: Design, Photoshop-Tutorials, Tutorial

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.

Tutorial Facebook Profilbanner erstellen (1)

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.

Tutorial Facebook Profilbanner erstellen (2)

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.

Tutorial Facebook Profilbanner erstellen (3)

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.

Tutorial Facebook Profilbanner erstellen (4)

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.

Tutorial Facebook Profilbanner erstellen (5)

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.

Tutorial Facebook Profilbanner erstellen (6)

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.

Tutorial Facebook Profilbanner erstellen (7)

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.

Tutorial Facebook Profilbanner erstellen (8)

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.

Tutorial Facebook Profilbanner erstellen (9)

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.

Tutorial Facebook Profilbanner erstellen (10)

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.

Tutorial Facebook Profilbanner erstellen (Fertig)

Einen umfassenden Überblick über alle Maße auf den Social-Media-Plattformen findet ihr drüben auf Raidious.com.

Tutorial Facebook Profilbanner erstellen (Abmessungen)

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!

Tutorial Facebook Profilbanner erstellen (Beispiel 1)

© Tom Lambie

Tutorial Facebook Profilbanner erstellen (Beispiel 2)

© Nagaraj Vijayarangan

Tutorial Facebook Profilbanner erstellen (Beispiel 3)

© Daniel Decker

Tutorial Facebook Profilbanner erstellen (Beispiel 4)

© Rallye Elbflorenz

Tutorial Facebook Profilbanner erstellen (Beispiel 5)

© Eduardo Calvo

Tutorial Facebook Profilbanner erstellen (Beispiel 6)

© Jonas Späinghaus

Tutorial Facebook Profilbanner erstellen (Beispiel 7)

© Giuseppe Draicchio

Tutorial Facebook Profilbanner erstellen (Beispiel 8)

© Maria Suckert

Tutorial Facebook Profilbanner erstellen (Beispiel 9)

© Jérôme Vadon

Tutorial Facebook Profilbanner erstellen (Beispiel 10)

© Alfred Schweinepriest

Tutorial Facebook Profilbanner erstellen (Beispiel 11)

© Jörgen Bröms

Tutorial Facebook Profilbanner erstellen (Beispiel 12)

© Antonio Fadda

Tutorial Facebook Profilbanner erstellen (Beispiel 13)

© Fabio Maravilla

Dieser Blogbeitrag wurde von Thomas Trummer verfasst

Hallo, mein Name ist Thomas Trummer und bereits seit 2009 veröffentliche ich in regelmäßigen Abständen innovative Grafik-Tutorials. In diesen erkläre ich Step by Step die Gestaltung von Printmedien, das Erstellen von Effekten oder das Bearbeiten von Fotos. Einsteiger, aber auch Professionals, können mit Hilfe dieser Anleitung Flyer, Visitenkarten oder Poster von Anfang bis Ende optimal gestalten und diese im Anschluss bei SAXOPRINT bestellen.

Durch die Nutzung bekannter Grafikanwendungen wie Photoshop, Illustrator oder auch GIMP möchte ich auf die individuellen Bedürfnisse unserer Leser eingehen und die unterschiedlichen Handhabungen aufzeigen. Selbstverständlich freue ich mich an dieser Stelle über Feedback jeglicher Art.

Das könnte dich auch interessieren



Gestalte deine Facebook-Timeline (Chronik) als Karte

Gestalte deine Visitenkarte im Google+ Look

Freitagstutorial: Herbstliches Tischset-Design gestalten

8 Kommentare


Mario B.
2015-01-19 13:43:12

(Reply)



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

    Robert Block
    2015-01-19 17:15:04

    (Reply)



    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

The Hidden Truth on Homework – Jack Split — Murfreesboro Axe Throwing
2019-12-12 17:55:13

(Reply)



[…] Hausarbeit beispiel […]

The New Fuss About Bachelor – My Blog
2019-12-17 14:04:07

(Reply)



[…] https://www.saxoprint.de/blog/tutorial-facebook-profilbanner/ […]

Ein Einfacher Trick für das Schreiben der Hausarbeit Erläutert | Garopaba Prime Imóveis
2019-12-17 16:56:44

(Reply)



[…] 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. […]

Understanding Buy Coursework – Avadh Consultancy & Export
2020-01-14 17:57:11

(Reply)



[…] 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 […]

Definitions of Buy Coursework – Solartech
2020-01-16 13:14:41

(Reply)



[…] 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 […]

Understanding Buy Coursework | Daitech - Thiết kế thi công nội thất văn phòng
2020-01-23 17:20:27

(Reply)



[…] Hausarbeit beispiel coursework will be researched and edited to generate certain it’s best. It’s simple and […]


Kommentar hinterlassen

Mit dem Absenden des Kommentars bestätigst Du, dass Du unsere Datenschutzerklärung zur Kenntnis genommen hast.

  Abbrechen


  • THEMEN AUF DEM SAXOPRINT BLOG

    • Druck & Gestaltung
    • Tutorials
    • Gut zu wissen
    • Die Drucklotsin
    • Aus der Fertigung
    • Presse & Sponsoring
    • Gewinnspiele
    • Unsere Blogredaktion
  • Nichts mehr verpassen

    • 68231likes
    • 1819followers
    • 1346followers
    • 1340subscribers
  • Neueste Artikel

    • Perfekt vorbereitet auf das neue Schuljahr mit einem Stundenplan zum Ausdrucken
    • Video-Tutorial: Ein Buch mit Hardcover gestalten (inkl. Unboxing)
    • Die Verwendung des Pantone Matching Systems im Offsetdruck
    • Sonderfarben im HKS-Farbfächer (HKS-Farbtabelle)
    • Wahlwerbung drucken: So gelingt der nächste Wahlkampf
  • Neueste Kommentare

    • Ilse bei Freitagstutorial: Mosaikfoto in Photoshop
    • Brigitte Gareus bei Freitagstutorial: Mosaikfoto in Photoshop
    • Gitti bei Freitagstutorial: Mosaikfoto in Photoshop
    • Anne bei Freitagstutorial: Mosaikfoto in Photoshop
    • Mike Schmidt bei 66 Beispiele für Werbeanzeigen aus Printkampagnen
  • Wonach suchst Du?



© SAXOPRINT 2019 Impressum & Datenschutz & Cookie-Einstellungen

Produkte
  • Flyer drucken
  • Aufkleber drucken
  • Broschüren drucken
  • Kalender & Werbekalender drucken
  • Visitenkarten drucken
Informationen
  • Über uns
  • Karriere
  • Druckdatenanleitung
  • Druckvorlagen
  • FAQ
Newsletter

Jetzt zum Newsletter anmelden und 5 Euro Willkommensgutschein für die nächste Bestellung sichern.

Kontakt

Persönliche Fachberatung

0351 20 44 444
Mo - Fr:
9 - 18 Uhr


Kontaktformular
service@saxoprint.de
700
engagierte Druckexperten
20
Jahre Druckerfahrung
3,3
Fussballfelder große Produktionsfläche
Kauf auf Rechnung
Vorkasse
Deutschland
  • Österreich
  • Schweiz
  • Großbritannien
  • Frankreich
  • Spanien
  • Italien
  • Niederlande
  • Belgien
AGB |  Datenschutz |  Impressum |  Karriere |  Kontakt |  Cookie-Einstellungen