Schließen

Twitter & Facebook & Google+ Bilder-Kit

21. September 2012, Stephan Fletzberger, 3 Kommentare

Twitter-Kit

Nachdem Twitter vor einigen Tagen bekannt gegeben hat, ähnlich wie bei Facebook in Zukunft neben dem eigentlichen Profilbild auch ein Headerbild anzuzeigen, haben wir uns dazu entschlossen, ein Twitter-Kit zur einfacheren Erstellung zu basteln. Dabei handelt es sich um eine Photoshop-Vorlage, bei der nur noch die beiden Bilder (Header- & Profilbild) an den richtigen Platz geschoben werden müssen, um dann vollautomatisch mittels Photoshop-Actions die benötigten Bilder zu erstellen.

Kurzanleitung

  1. Twitter-Kit öffnen
  2. Twitter-Kit-Aktion importieren (Im Aktionsfenster in Photoshop auf den Button rechts oben und Aktion importieren)
  3. Achtung: Twitter empfiehlt Headerbilder in einer Größe von 1252px X 626px hochzuladen, um alle Endgeräte abzudecken. Im Twitter-Profil wird das Bild dann aber deutlich kleiner dargestellt. Daher sollte das Bild von Anfang an Hochauflösend vorliegen. Bevor das Bild in den Headerbereich eingepasst wird, ist es daher besonders wichtig, die Ebene des Bildes in ein Smart-Object zu konvertieren. Damit gibt es keinen Qualitätsverlust wenn das Bild später wieder hochskaliert wird. Dieses vorgehen ist auch beim Profilbild empfohlen.
  4. Nachdem Header- bzw. Profilbild fertig angepasst wurden und am richtigen Platz in der Vorlage liegen, kann eine der beiden Aktionen (Header- bzw. Profilbild zuschneiden) in Gang gebracht werden um Header- bzw. Profilbild zu erhalten.

Facebook-Kit

Neben dem neuen Twitter-Kit haben wir auch unser Facebook-Kit überarbeitet. Facebook empfiehlt mittlerweile, Profilbild und Timelinebild nicht mehr grafisch ineinander überlaufen zu lassen, weil dieser Effekt spätestens seit der Einführung des Timelinebildes auf mobilen Geräten nicht mehr garantiert werden kann. Daher liegt der Fokus dieser Version stärker darin, möglichen Kunden eine Vorschau auf die eigene Timeline zu gewähren bzw. Timeline- und Profilbild vollautomatisch zuzuschneiden.

Kurzanleitung

  1. Facebook-Kit öffnen
  2. Facebook-Kit-Aktion importieren (siehe Twitter-Kit)
  3. Achtung: Wie Twitter stellt Facebook das Profilbild im Web kleiner dar, als es hochgeladen werden muss. Also gilt auch hier wie bei Twitter, eine höher aufgelöste Version des Profilbilds in ein Smart-Object zu konvertieren, bevor es in den Bereich des Profilbilds eingepasst wird.
  4. Profil- bzw. Timelinebild über die mitgelieferten Aktionen zuschneiden.

Update 5. Oktober 2012: Google+

Download

Im .zip-Archiv befinden sich sowohl die Photoshop-Vorlagen als auch zwei Aktionsvorlagen (.atn).

Twitter-Kit & Facebook-Kit

GooglePlus-Kit

Beitrag geschrieben am 21.09.2012 von

Stephan Fletzberger

Er ist bei Liechtenecker verantwortlich für: Konzeption, Design und Frontendentwicklung

Er mag...
Filme & Serien, JavaScript, das Web & Elektronik

Kommentare

  • […] Twitter & Facebook-Kit […]

  • Pingback: Die Woche in Links (38/12) | gumpelMEDIA

  • Danke. Und G+?

    • Hallo Johannes!

      Das Google+ Kit ist in Planung und sollte bald fertig sein!

      Liebe Grüße,
      Stephan