Tutorial: Facebook Design – Profil Photostream clever gestalten » Photostream, Bild, Bilder, Facebook, Umsetzung, Profil

Tutorial: Facebook Design – Profil Photostream clever gestalten

Demos & Tutorials | 4 Kommentare | Tags: Design, Facebook, Photostream

15.12.2010

Beim Profile surfen auf Facebook bin ich jetzt auf eine interessante Nutzung des neuen Profils gestoßen. Wie im Beispiel unten zu sehen, kann man aus einer Kombination des Profilbildes mit dem Photostream einen interessanten Effekt erzielen. Damit wird das Profil auf jeden Fall zum Hingucker.

Vorbereitung

Photostream löschen

Der Photostream wird automatisch gefüllt, ein richtiges System habe ich nicht erkennt, offensichtlich ein Mix aus neu hochgeladenen Bildern und Bilder auf denen man markiert wurde. Unterm Strich ist das auch egal, denn um das Design umzusetzen müssen wir eh erstmal alle vorhanden Bilder aus dem Stream löschen. Das ist ganz einfach. Fährt man mit der Maus über ein Bild im Photostream erscheint rechts oben ein kleines X zum löschen. Kurz geklickt und bestätigt und das Bild ist weg. Das Bild wird dabei nicht aus dem Album gelöscht sondern nur aus der Ansicht im Photostream, in den regulären Fotoalben kann das Bild natürlich nach wie vor aufgerufen werden.

Pixelei

Weiter braucht man natürlich ein paar Pixelmaße um die Umsetzung auch entsprechend hinzubekommen. Mit dem genialen Firebug Plugin für Firefox, ließen sich die entsprechenden CSS Klassen schnell nachschlagen und viele Maße entnehmen auslesen. Die Anzahl der Zeilen unter dem Namen hängt natürlich davon ab, wie viel persönliche Angaben gemacht wurden. Je mehr Angaben, desto mehr Zeilen, desto weiter rutscht der Photostream nach unten. Hier half mir das MeasureIt Plugin für Firefox, um den Abstand von oben bis zum Photostream zu ermitteln.

Maße im Überblick

Umsetzung

Um die Umsetzung für zukünftige Bilder zu erleichtern habe ich mir eine grafische Maske angelegt. Die ist nichts anderes als eine maßgenaue weiße Grafik mit entsprechenden transparenten Bereichen, legt man die über das Wunschfoto kann man sich sehr schnell einen Gesamteindruck über die spätere Optik machen. Am Ende des Beitrages findet ihr ein Downloadpaket, es enthält die verschiedenen Masken für die Versionen wie sie oben in der Skizze gezeigt werden.

Schritte im Überblick

Bild öffnen und entsprechende Maske darüber legen
die durch die Maskierung entstanden einzelnen Bilder müssen jetzt mit dem Maß 97×68 Pixel einzeln aus dem Bild ausgeschnitten und gespeichert werden. Theoretisch müsste es auch reichen, wenn man die Einzelbilder mit einem gleichen Seitenverhältnis zu 97×68 Pixel ausschneidet, da Facebook die Bilder entsprechend verkleinert.
Profilbild ebenfalls als Einzeldatei ausschneiden und speichern. Genaues Maß wäre 180 Pixel breit, Höhe spielt keine Rolle wird komplett von Facebook angezeigt. Auch hier kann man ein größers Bild mit gleichen Seitenverhältnis nehmen, Facebook rechnet runter.
Bei Facebook einloggen und ich empfehle eine extra Fotoalbum anzulegen.
Alles Einzelbilder für den Photostream in das neu angelegte Fotoalbum laden.
Im nächsten Schritt markiert ihr euch selbst auf den einzelnen Fotos. Da der Photostream von links nach rechts aufgefüllt wird ist es hier wichtig, dass ihr mit dem letzten Bild beginnt, sprich die Bilder in umgekehrter Reihenfolge markiert und mit dem rechten Bild beginnt und mit dem linken Bild im Photostream aufhört.
Im letzten Schritt ladet ihr ein neues Profilbild hoch und macht es zum Standard

Wenn alles geklappt hat könnte das Profil wie ganz oben gezeigt aussehen. Ihr könnt natürlich auch nur den Photostream nutzen und das Profilbild behalten. Dann könnte euer Profil vielleicht so aussehen.

Ich wünsche viel Spaß beim probieren und wie immer gilt, wenn es euch geholfen hat, lasst es mich mit einem Kommentar wissen.

Download

Im Paket finden sich die verschiedenen Masken für eine bessere Vorschau. Bei Fragen fragen!
Download
822 mal runtergeladen

4 Kommentare

yoyo
Februar 19th, 2011 on 13:44

super!
vor allen dingen die maße und die masken haben mir sehr geholfen, danke
bea
Mai 4th, 2011 on 13:30

gefällt mir super, nur leider wird jedesmal wenn ich auf info oder pinnwand klicke, der photostream umsortiert. kann ich das irgendwie unterbinden?
danke schonmal für die hilfe.
Angelo
Mai 18th, 2011 on 14:33

Ciaoo!
ich habe das wie in der Anleitung beschrieben versucht – leider funktioniert das bei mir überhaupt nicht! Die Bilder verschieben sich ständig, egal in welcher Reihenfolge ich mich darauf selbst markiere. Was kann ich dagegen machen?
Rico
Mai 19th, 2011 on 08:37

Ohh…der Eintrag stammt vom Dezember. Mittlerweile ist keine Handarbeit mehr notwendig, es gibt bereits eine App die das übernimmt. Schaut mal hier: http://apps.facebook.com/tickrphotostream/