Photoshop GIF Animation – HowTo

HowTo | 3. Juli 2014

Photoshop GIF Animation – HowTo

Mit Photoshop kann man wirklich vieles machen, was die Bildbearbeitung angeht. Mit der Zeit hat sich Photoshop von Adobe wirklich zu einem sehr umfangreichen Tool entwickelt. Man kann natürlich Bilder bearbeiten, jedoch verwenden immer mehr Webdesigner Photoshop beispielsweise auch zum Gestalten ihrer Webseiten.

Eine Funktion, die schon recht lange in Photoshop integriert ist, jedoch relativ vielen Benutzern unbekannt ist, ist die Funktion, dass man mit Photoshop GIF Animationen erstellen kann.

Exkurs: Warum GIF Animationen?

Früher (vor dem Jahr 2000) waren GIF Animationen sehr beliebt. Auf vielen Webseiten fand man kleine, animierte Grafiken, die schön aussehen sollten, jedoch den User eigentlich nur verwirrt haben. Mittlerweile liegen GIF Animationen wieder voll im Trend, dank Tumblr & Co.

Aber auch Banner werden zum Teil mit einer GIF Animation versehen. GIF Animationen sollte man dezent einsetzen, manchmal kann eine kleine Animation jedoch auch Sinn machen.

Außerdem sollte man beachten, dass, gerade weil es ein relativ veraltetes Dateiformat ist, die Animationen (und generell auch Grafiken) sehr beschränkt sind. GIF ist in erster Linie für Grafiken gedacht, also gibt es dank des Dateiformats eine Beschränkung, was die Farben einer GIF Datei angeht. Deswegen sehen GIF-Animationen, die Videos darstellen, auch immer so eigenartig aus, was die Farben angeht. Außerdem ist die Dateigröße, die die Animation am Ende besitzt, verhältnismäßig groß.

Twitter hat vor Kurzem die Möglichkeit der Integration von GIF-Videos ermöglicht. Es sind aber keine GIF Videos, die dem User ausgeliefert werden: Twitter wandelt intern die Animationen in .mp4 Videos um. So wird die Dateigröße enorm verkleinert, was Twitter in Sachen Bandbreite sehr viel Traffic einsparen wird.

Animationen im Web

Man kann mittlerweile animierte Dinge weitaus effektiver umsetzen, als durch eine animierte GIF-Datei. Heute gibt es z.B. jQuery und HTML5, die einen dabei behilflich sein können (siehe auch Twitter..).

Da es das Dateiformat GIF aber schon seit 1987 gibt (Animationen kamen ca. 1-2 Jahre später hinzu), unterstützen sehr viele Ausgabemedien das Forma. Sie funktionieren auf dem neuen Smartphone, aber auch auf älteren PCs mit noch älteren Browsern.

Neue Möglichkeiten setzen z.B. die Aktivierung von Java (bei jQuery) voraus, die Installation eines Plugins (bei Flash Animationen) oder grundsätzliche neue Browser (HTML5). GIF Animationen laufen eigentlich überall. Wahrscheinlich einer der Gründe, warum viele auch heute noch auf eine GIF Animation zurückgreifen.

Mit Photoshop GIF Animation erstellen

Wo wir wieder beim Anfang wären: Wie erstellt man mit Photoshop eine GIF Animation?

  • GIF Animationen arbeiten mit Frames. Jedes Frame (also jedes Bild) der Animation muss man zu Beginn in Photoshop auf einer einzelnen Ebene zur Verfügung haben.
  • man benötigt das Zeitleiste-Fenster (Fenster -> Zeitleiste)
  • durch Klick auf den Button Videozeitleiste erstellen erscheinen die einzelnen Ebenen in der Zeitleiste. Man kann diese jetzt beliebig variieren, sodass man die Länge, die das einzelne Frame angezeigt werden soll, verändern kann.
  • Ist man zufrieden (durch den Play-Button kann man immer eine Vorschau begutachten), klickt man auf Datei -> Für Web speichern unter und wählt natürlich als Format eins der GIF-Vorgaben aus. Ganz unten kann man noch Optionen zur Animation definieren, wie z.B. die Anzahl der Wiederholungen.

Das war’s schon 🙂

 

 

, ,

Aktuelles aus HowTo

Photoshop GIF Animation – HowTo

Photoshop GIF Animation – HowTo

Mit Photoshop kann man wirklich vieles machen, was die Bildbearbeitung angeht. ...

Sie möchten einen Banner für die Kategorie "HowTo" buchen? Sprechen Sie uns an!

Ähnliche Beiträge

Folgt uns

Neuste Beiträge

Wirtschaftsspionage erkennen und verhindern

Wirtschaftsspionage erkennen und verhindern

Wirtschaftsspionage ist ein oft unterschätztes Risiko für Unternehmen - ...

Firmenwagen für Mitarbeiter

Firmenwagen für Mitarbeiter

Praktisches Transportmittel oder wahres Statussymbol. Viele Beschäftigte empfinden den ...

Beliebte Beiträge

Top RSS Feeds

Top RSS Feeds

RSS Feeds gibt es seit Anfand der 2000er Jahre. ...

Top 10 Kostenlose Stock Foto Anbieter

Top 10 Kostenlose Stock Foto Anbieter

Für seine Internetprojekte benötigt man auch immer wieder hochwertige ...

Firmenhomepage Fehler

Firmenhomepage Fehler

In der Artikelserie "Firmenhomepage Fehler" geht es um Kleinigkeiten ...

Müllabfuhrkalender & Siri bzw. HomePod: Allgemeine Fragen

Müllabfuhrkalender & Siri bzw. HomePod: Allgemeine Fragen

Wie man einen Kurzbefehl für Siri baut, durch den ...

Nanoleaf Essentials & Alexa

Nanoleaf Essentials & Alexa

Nanoleaf hat vor Kurzem erste Leuchtmittel mit dem neuen ...

Ähnliche Filme finden

Ähnliche Filme finden

Wer kennt es nicht? Man hat einen Film gesehen ...

Artikelverzeichnis Liste

Artikelverzeichnis Liste

Artikelverzeichnisse werden von vielen SEOs nicht mehr benutzt. Gerade ...

10 Tipps zur Conversion Optimierung Teil 1

10 Tipps zur Conversion Optimierung Teil 1

Der Großteil der Webseite im Internet zielt darauf ab, ...

In eigener Sache: responsive Design

In eigener Sache: responsive Design

Zum Jahresende haben wir Neuigkeiten: Wir haben es endlich ...