24.08.2012 Diverses

Facebook: Animierte App Row Icons erstellen

Wer kennt die Situation. Gerade eine neue, tolle Facebook App online gestellt. Das App Row Icon ist erstellt, nur würde man lieber mehr Aufmerksamkeit mit dem Icon erhalten um die Leute auf die Applikation zu lotsen. Nur, wie kriege ich es hin, das App Row Icon zu animieren? Webmatch hat zwei tolle Video-Tutorials erstellt, wie […]

Florian Muff
1 Min. Lesezeit
4 Kommentare

Wer kennt die Situation. Gerade eine neue, tolle Facebook App online gestellt. Das App Row Icon ist erstellt, nur würde man lieber mehr Aufmerksamkeit mit dem Icon erhalten um die Leute auf die Applikation zu lotsen. Nur, wie kriege ich es hin, das App Row Icon zu animieren? Webmatch hat zwei tolle Video-Tutorials erstellt, wie man dies mit einem Workaround bewerkstelligen kann.

Nachtrag (10:29): Wir haben soeben getestet ob dies auch mit dem App Icon (75x75px) funktioniert und ja, es klappt. Da das 75x75px App Icon z.B. bei Wallposts erscheint, dürfte auch hier die Aufmerksamkeit garantiert sein. Wenn dies nun jedoch alle einsetzen, dürfte es zu vermehrten Augenkrebs-Situation im Newsfeed führen. Facebook wird diesen “Bug” hoffentlich bald schliessen.

Nachtrag (30.08.2012 – 11:51): Gemäss den Facebook Policies verstossen animierte App Row Icons gegen die Richtlinien. Der Verstoss hierbei ist das hochladen eines PSD Files und somit ein Verstoss gegen Punkt 1.3 aus den Richtlinien.

Du darfst keine von uns beabsichtigten Einschränkungen zu den Kernfunktionen von Facebook umgehen (oder dies behaupten).

Theoretisch könnte es zu Sanktionen, zum Beispiel der Sperrung der Facebook Seite kommen. Dies dürfte wohl nicht der Fall sein, eher wird Facebook diesen Bug beheben und den upload von PSD-Files in Zukunft verhindern.

 

 

Es geht aber nicht nur mit Videos

Einfache Animationen, wie wir es auf unserer Facebook Seite einsetzen, können auch ohne Videos erstellt werden. Hier eine kurze Step by Step Anleitung wie wir unser Statistik App Row Icon erstellt haben:

  1. Einen Basis Ordner innerhalb von Photoshop erstellen, welche die Elemente beinhaltet die bei jedem Frame angezeigt werden sollen

    Basisvorlage erstellen

    Basisvorlage erstellen

  2. Diesen Ordner kopieren und geringfügige Änderungen an den Grafiken erstellen
  3. Schritt 2 wiederholen, bis man alle verschiedenen Frames erstellt hat
  4. Die einzelnen Ordner in Smart Objekte konvertieren

    konvertieren in Smart Objekt

    konvertieren in Smart Objekt

  5. Alle Ebenen rastern

    Ebenen rastern

    Ebenen rastern

  6. Photoshop Datei speichern und als App Row Icon hochladen

Somit habt ihr in wenigen Minuten euer eigenes animiertes App Row Icon erstellt.

Facebook Instagram Twitter LinkedIn Xing TikTok

Kommentar via Facebook

Bitte akzeptieren Sie die Cookies um die Facebook Kommentare zu nutzen.

Schreib uns einen Kommentar

Möchtest Du immer auf dem neusten Stand mit unseren Newsletter sein?

Melde Dich jetzt an