Das neue Facebook Profil – Anleitung für optimales Design

neues-facebook-profil

16 Dez Das neue Facebook Profil – Anleitung für optimales Design

Seit kurzem hat Facebook die Darstellung der persönlichen Profile verändert und einige neue Features eingestellt. Die Reiter oberhalb des Newsfeeds sind nun den allgemeinen Informationen aus dem Profil gewichen und darunter befinden sich jetzt Bilder, in denen man als User markiert wurde. Natürlich haben einige findige Designer dieses Update sofort für sich entdeckt und haben eine sehr stimmige Komposition aus Profilbild, markierten Fotos und Newsfeed umgesetzt. Die bislang gelungenste Adaption der neuen Features hat wohl Tim G geschaffen, der ein sein Gesicht nicht nur mit Fotos wie eine Art Puzzle zusammengeführt hat, sondern zusätzlich auf seiner Pinnwand als multimediale Verknüpfung noch ein YouTube Video mit seinem Mund eingesetzt hat.

Wer sein Profil ebenso oder anderweitig etwas aufmotzen will, dem habe ich hier eine kurze Anleitung dafür zusammengestellt.

1. Auswahl des Motivs

Wer sein Foto soz. von links nach rechts abbilden möchte, der sollte ein entsprechend großes Motiv wählen, dass sowohl in der Höhe als auch in der Breite ausreichend ist. In der Breite empfiehlt sich ein Maß von mind. 690 Pixel. Die Höhe kann hierbei variieren, darf aber der max. Beschränkung durch Facebook von 600 Pixeln nicht überschreiten.

2. Das Ausschneiden der Elemente

Um ein stimmiges Gesamtbild zu erzeugen, sollte man das Motiv in einem Bildbearbeitungsprogramm im Ganzen öffnen. Dann wählt man die einzelnen Teile entsprechend der gewünschten Komposition aus, in dem man zunächst die Vertikale im Profilbild festlegt.

Möchte man ähnlich wie Tim G z.B. seine Augenpartie dann rechts entsprechend ergänzen, wählt man passend zur Vertikalen einen horizontalen Ausschnitt. Hierbei sind folgende Maße von 458 Pixel Breite und 68 Pixeln Höhe zu berücksichtigen, damit später alles passt.

Hilfreich zur exakten Positionierung ist hierbei ein Screenshot des eigenen Profils, dass man im Bildbearbeitungsprogramm in den Hintergrund legt.

Um eine optimale Anzeige im Profil zu erreichen, muss man die individuellen Angaben zwischen Profilnamen und den markierten Fotos beachten. Diese können je nach Einstellungen durchaus zwischen 1 bis 4 Zeilen variieren. Danach richtet sich entsprechend die Abstimmung zwischen der Vertikalen und der Horizontalen.

Ein wichtiger Hinweis: Die individuellen Profilangaben enthalten bei der eigenen Betrachtung weitere Angaben und Links zur Bearbeitung des Profils. Diese werden natürlich den anderen Nutzern nicht angezeigt, was dazu führt, dass mitunter die Zeilenanzahl sich unterscheidet. Wer kann, läßt sich sein Profil von einem anderen Nutzer zeigen, um zu sehen, wieviel Platz benötigt wird.

3. Die Dateien vorbereiten

Hat man die beste Abstimmung gefunden, setzt man am besten beide Ausschnitte dann in zwei neue Dateien im Bildbearbeitungsprogramm ein, bevor man sie weiter bearbeitet. Das vertikale Profilbild kann dann einfach entsprechend den Wunschmaßen als JPG oder PNG abgespeichert werden. Das horizontale Motiv muss noch in 5 einzelne Teile zerschnitten werden. Dabei gilt für jedes Einzelbild eine optimale Größe von 97×68 Pixeln. Jedes Einzelbild wird dann am besten in der Reihenfolge von links nach rechts jeweils als JPG oder PNG abgespeichert. Es empfiehlt sich den Bilder eine Nummerierung im Dateinamen zu geben, damit man hinterher weiß, wo das Gesamtmotiv links anfängt und rechts aufhört.

4. Der Upload der Bilder bei Facebook

Das Profilbild wird wie gewohnt einfach ausgetauscht. Wer das nicht kennt, geht auf sein eigenes Profil und fährt mit der Maus über das Bild. Kurz darauf erscheint oben recht am Bildrand ein kleiner Link „Bild ändern“. Bei Klick öffnet sich die Upload Funktion.

Für die horizontalen Motive erstellt man ein neues Album bei Facebook und gibt ihm den Namen z.B. „Profilbanner“. In diesen Ordner lädt man dann über den Uploader die vorher zurecht geschnittenen Einzelbilder. Es empfiehlt sich die Bilder hintereinander und nicht alle auf einmal hochzuladen und dabei die Reihenfolge von Bild-Nr. 1 bishin zu Bild Nr. 5 einzuhalten. Facebook fragt zwischendurch immer wieder, ob man das Album veröffentlichen möchte. Dies kann man machen, aber das Album erscheint dann auch sofort auf dem eigenen Newsfeed und dem seiner Freunde.

5. Das Markieren der Einzelbilder

Nachdem alle Bilder hochgeladen wurden, müssen sie anschließend noch mit dem eigenen Namen/Profil markiert werden. Ansonsten erscheinen sie nicht oberhalb der Profilseite, sondern verbleiben lediglich in der Foto Übersicht. Um die Bilder zu markieren geht man in das neu erstellte Album und öffnet das letzte Bild zuerst, sprich das Bild, was in der Horizontalen ganz rechts erscheinen soll.

Bitte beachten: Das Einhalten der Reihenfolge ist maßgeblich für die korrekte Anzeige.

Hat man das richtige Bild geöffnet, kann man mit der Funktion unterhalb des Bildes „Jemanden auf diesem Bild markieren“ im folgenden sich selbst in der Freundesliste aussuchen. Einfach den Haken vor dem eigenen Namen setzen und anschließend oben rechts über dem Bild „Fertig markiert“ anklicken.

Dann öffnet man das nächste Bild, also das was soz. das zweite von rechts sein soll, und wiederholt die Markierung mit dem eigenen Namen. Dann folgt Bild Nr. 3, 4 und schließlich das letzte, was ganz links stehen soll.

Hat man die Reihenfolge eingehalten und die Ausschnitte richtig vorbereitet, dann sollte sich nun ein perfektes Bild von links nach rechts im Zusammenspiel mit dem Profilbild ergeben.

Auf dem Blog von Xadacka findet man auch ein Video-Tutorial zur Verwendung des Imagehacks für das neue Facebook Profil.

Fazit:

Es gibt mittlerweile auch einige Facebook Apps, die einem die Arbeit abnehmen sollen, aber bisher hat aus meiner Sicht keines bislang so gut funktioniert, wie die manuelle Bearbeitung. Schön ist jedenfalls, dass nun auch die persönlichen Profile nicht mehr so trist aussehen, auch wenn die Reiter-Funktionen nun am rechten Rand ein wenig untergehen. Aber daran werden wir uns wohl gewöhnen müssen. Gerüchten zufolge wird Facebook das in Kürze auch für Corporate Pages ähnlich ändern.

In jedem Fall gibt es bereits zahlreiche gute umsetzungen, alles nicht nur für gutes Design zu nutzen, sondern auch marketing-technisch Botschaften und Ad Placements damit zu betreiben. Eine sehr gute Sammlung findet sich hierzu bei facebookmarketing.de.

Ein besonderer Dank geht hierbei an Vincent Schröder von Webteilchen Berlin, der den 1. Anstoß für diesen Beitrag gab.

Update I (19.12.10):

Ich bin darauf hingewiesen worden, dass das Profilbanner nicht zwingend Bilder enthalten muss, auf denen man markiert wurde. Es kann sogar passieren, dass das mühsam erstellte Layout verloren geht, wenn man von seinen Freunden markiert wird, da so die Bilder oberhalb des Newsfeeds automatisch ausgetauscht werden. Insofern empfiehlt es sich, in den Privacy Settings die Markierung durch andere auszustellen und die Bilder für das neue Facebook Profil Layout mittels eines neuen Albums bzw. lediglich mit den Bildern aus dem Album der Profilbilder zu erstellen.

Update I (14.02.11):

Letzte Woche hat Facebook auch das neue Layout für Pages ausgerollt. Der Aufbau ähnelt nun den persönlichen Profilen und erhält ebenfalls eine neue Fotozeile. Diese ist jedoch etwas komplexer in der Gestaltung und die Reihenfolge der Bilder ändert sich nach jedem Refresh der Page. Eine gute Anleitung, wie das neue Layout zu optimieren ist, findet sich im Blog bei schwindt-pr von Annette Schwindt. Dort wird auch ein vollständiges Whitepaper zu den neuen Optionen der Facebook Pages als PDF Download angeboten.

19 Comments
  • Vincent
    Posted at 13:46h, 17 Dezember

    Hallo Kai,

    danke für die Blumen. Vielleicht kann ich erklären, wie man die Vorbereitung auch anders machen kann., mit dem Vorteil, dass man eine genaue Vorschau des Endergebnisses bereits bei der Vorbereitung hat.

    1. Ich habe das so gelöst, dass ich mir ein Screenshot des Profils in Photoshop geladen habe.
    2. Die Bereiche mit den Bildern ausgeschnitten.
    3. In eine zweite Ebene mein Bild gelegt. (Hinter den Screenshot)

    Das Bild scheint jetzt an den ausgeschnittenen Bereichen durch und kann optimal platziert werden. Und man hat immer das Endergebnis vor Augen.

    4. Das ganze gesliced und weiter wie du mit Schritt 4.

    Dein Profilbild sieht jetzt wirklich hammermäßig aus.

  • kaipiranha
    Posted at 13:49h, 17 Dezember

    Ebenfalls danke für die Blumen. :) Deine Vorgehensweise ist auf jeden Fall auch sehr gut.

  • sebudde
    Posted at 17:03h, 24 Dezember

    Hallo Kai.
    Danke für deine Anleitung!
    Im Text befindet sich übrigens ein Zahlendreher: 458 Pixel sollten eigentlich 485 Pixel sein, oder?

  • Lena
    Posted at 19:28h, 24 Dezember

    Hallo, ich habe eine Frage an euch.
    Bei mir ist die Leiste komplett verschwunden, wie kann ich sie wieder herstellen?
    Würde mich freuen, wenn ihr eine Lösung findet.
    Mfg Lena

  • kaipiranha
    Posted at 11:50h, 25 Dezember

    Hallo Sebudde,
    du hast Recht! Danke für den Hinweis.

  • kaipiranha
    Posted at 11:57h, 25 Dezember

    Halo Lena,
    wahrscheinlich hast du alle Bilder aus dem Stream entfernt? Du kannst die Leiste mit allen Fotos wieder herstellen, wenn du auf deiner Profilseite auf „Bild ändern“ deines Profilbilds klickst. Auf der folgenden Dialogseite befindet sich unterhalb des angezeigten Profilbilds neben dem Text „Die Fotozeile oben auf dem Profil“ ein Button „Alle einblenden“. Wenn du darauf klickst, sollte die Bildleiste wieder erscheinen.

    Viele Grüße
    Kai

  • Nina
    Posted at 03:25h, 28 Dezember

    Ich habe auch das Problem mit der Fotozeile, sie lässt sich allerdings auf dem „normalen Weg“ auch nicht wiederherstellen. Hat jemand einen Idee woran das liegen könnte oder noch besser, eine Lösung? Ich hätte die Bildzeile sehr gerne wieder.

    Vielen Dank schonmals
    …und einen guten Rutsch!

    Nina

  • Felix Scholl
    Posted at 17:33h, 06 Januar

    Hei erst mal danke für des coole Tutorial jedoch hat bei mir das Bild nicht gepasst wenn ich das Profilbild auf maximale Größe also 200×650 gemacht habe. Mit 180×540 hats dann aber perfekt geklappt! :)

  • Larissa
    Posted at 15:01h, 27 Januar

    Ich hatte das Problem mit der Fotozeile auch.
    Profil bearbeiten –> Profilbild –> „Die Fotozeile oben auf dem Profil – [Alle einblenden]“

  • Browsersim
    Posted at 00:07h, 19 Februar

    Danke für die Anleitung, klappt prima :)

  • Kathi
    Posted at 16:50h, 28 Februar

    Bei mir werden die Fotos jedes mal in einer anderen Reihenfolge in der Fotoleiste angezeigt, obwohl ich genau nach Anleitung gearbeitet habe. Woran kanns liegen?

  • Björn
    Posted at 15:15h, 13 April

    Also ich schließe mich meiner Vorrednerin an. Bei mir werden die Bilder auch bei jedem Seitenaufruf in einer anderen Reihenfolge gezeigt. Da ich bei mir auch einen Schriftzug integriert hatte, ist das jedoch ziemlich sinnfrei. Hab ich da irgendetwas übersehen? Hab das Tutorial Schritt für Schritt nachgemacht. Für Hilfe wäre ich sehr dankbar…

Post A Comment