Basics – erstellen eines Gifs

Da ich gefragt worden bin, schreib ich hier mal ein Basic Tutorial zum erstellen von einfachen Gifs. 

Wichtig hierfür ist die Vorbereitung bzw das Richtige “Material” für eure Animation. Photoshop verarbeitet Videos im MP4, MOV oder AVI Format. Ich habe allerdings die Erfahrung gemacht, dass MP4 am besten funktioniert und meist ohne Probleme. Bei den anderen hatte ich schon oft Probleme.

Am besten schaut ihr nach einem Konvertierungsprogramm das Videos in mp4 umwandeln kann. Die gibt es entweder kostenlos im Netz oder für kleines Geld. 

Wenn ihr eine mp4 Datei habt. Funktioniert das ganze folgendermaßen.


Ihr öffnet eure Videodatei über Datei –> Importieren –> Videofilmes in Ebenen. Es öffnet sich folgendes Fenster

[Bild: cmsHQBY.png]

Dort könnt ihr festlegen ob ihr vom Anfang bis zum Ende das Video importieren wollt. Oder nur jeden 2. Frame. Bei jedem zweitem Frame gibt es ein leichtes Ruckeln, daher würde ich euch empfehlen immer von Anfang bis Ende auszuwählen. Am besten lasst ihr die Einstellungen so wie sie sind und bestätigt das ganze mit OK

Ist das Video kurz genug wird Photoshop das Video einfach importieren ohne noch mal etwas zu fragen.
Sollte eurer Video zu lang sein, wird sich folgendes Fenster öffnen

[Bild: U359jOr.png]

Photoshop wird euer Video auf 500 Frames pro Import begrenzen. Das hört sich nun erst mal wenig an aber in der Regel erstellt es 24 Frames pro Sekunde. Das heißt bei 500 Frames wären es 20,83 Sekunden Videomatieral. Auch das mag euch wenig erscheinen aber 20 Sekunden sind ein extrem langes gif und ich würde euch empfehlen eure gifs immer so auf 50-100 Frames zu beschränken.

Nur zum Vergleich, dieses Gif enthält 29 Frames. 

[Bild: qlJ9tMI.gif]

Wenn ihr bei dem Fenster ok sagt werden die ersten 500 Frames des Videos genommen. Wollt ihr einen bestimmten Ausschnitt haben würde ich euch empfehlen es vorher in dem Konvertierungsprogramm zurecht zu schneiden. 

Ist euer Video in Photoshop importiert habt ihr zwei wichtige Werkzeuge

1. Die Zeitleiste

[Bild: FIGgktu.png]

Die Zeitleiste öffnet sich am unteren Rand von Photoshop. Solltet ihr die Zeitleiste nicht automatisch haben findet ihr sie im Menüpunkt “Fenster” Dort einfach den Harken bei Zeitleiste setzen. In früheren Versionen von Photoshop hieß es noch Animation nur falls ihr Zeitleiste nicht findet. 

Die einzelnen kleinen “Fenster” in der Zeitleiste heißen Frames

2. Die Ebenen

[Bild: PQ6Piq7.png]

Genau wie bei allen anderen Grafiken in Photoshop hat nun jedes Bild eine einzelne Ebene. 

GANZ WICHTIG!!!! 

Jedes Frame ist mit einer Ebenen verbunden.

Frame 1 = Ebene 1
Frame 2 = Ebene 2
Frame 3 = Ebene 3

usw usw. Löscht ihr eine Ebene wird dieses Frame leer sein und eure Animation ein Loch haben. Löscht ihr ein Frame bleibt die Ebene bestehen und ihr könnt das Frame wieder herstellen.

Zitat:

Die Animation hat schon eine bestimmte Abspielzeit. Diese könnt ihr verändern indem ihr unten in der Zeitleiste auf den Drop-Down Pfeil klickt.

[Bild: Bim4JJJ.png]

Es öffnet sich dieses kleine Menü

[Bild: fvGj3qx.png]

Bei Film und Serienszenen hat sich eine Zeit von 0,05 Sekunden bewährt und ist nicht zu schnell oder zu langsam. Aber das müsst ihr bei jedem Video neu austesten, denn jedes reagiert anders. Aber 0,05 ist wie gesagt für Film und Serien Gifs in den meisten Fällen gut geeignet.

Im Grunde ist euer Gif durch den Import schon fertig. Ihr stellt nur die Zeit optimal ein und wenn ihr es dann für Web speichert ist es ein Gif oder eine Animation.

Aber ihr solltet es vorher noch zuschneiden, denn die Originalgröße ist einfach viel zu groß.

Zum verkleinern z.B. so auf Tumbler-Größe solltet ihr euch ein wenig mit den Funktionen Bildgröße und Arbeitsfläche beschäftigen

1. BildgrößeBei der Funktion Bildgröße (Bild –> Bildgröße…) verändert ihr die Größe des gesamten Bildes.

[Bild: 6NqPRzy.png]

Ist der Knoten aktiviert dann verändert sich die Höhe proportional richtig zu euer Breite, wenn ihr diese Verändert.

Ich stell es mal auf 350 Breite und die Höhe verkleinert sich automatisch auf 182. Der Knoten ist wichtig damit ihr euch euer Gif nicht verzerrt.

[Bild: 3tlM8cn.png]

Wie ihr seht wir mein Gif halt insgesamt kleiner.

[Bild: sZPF1n4.gif]

2. ArbeitsflächeBei der Funktion ist es so, dass ihr nur die Größe eurer Grafik beeinflusst und nicht deren Inhalt. 

[Bild: WJ2cZkh.png]

Hier gibt es keinen Knoten bei Höhe und Breite sondern ihr legt beide Werte fest.

Ich stelle die Größe wieder auf 350×182. Wie ihr seht, wird die Grafik genau so groß wie die andere oben bei Bildgröße aber der Bildausschnitt ist ein anderer und sein Kopf ist nun viel größer bzw er ist bleichgroß wie vorher aber durch die kleinere Arbeitsfläche wirkt er in der Animation größer.

[Bild: 6k7oXMV.gif]

Wenn ihr nun eur Gif bearbeiten wollt verkleinert es erst etwas über die Bildgröße also z.B. von 1000px breite auf 400px breite und macht dann den Feinschliff und die passende Größe für euer Forum oder Tumblr dann am Ende mit der Arbeitsfläche damit ihr den passenden Bildausschnitt habt.

Hat euer Gif die passende Größe, könnt ihr es speichern.

Bei PS CC findet ihr es unter 

[Bild: V7S5Pa9.png]

In früheren Versionen gibt es den Punkt Exportieren nicht sondern es steht direkt “Für Web speichern” unter Datei.

Es öffnet sich dieses Fenster.

[Bild: tMy8F6W.png]

Dort könnt ihr euer Gif noch mal kontrollieren und schauen ob es sauber läuft. Und dann dem Button “Speichern” eben als gif speichern.

ACHTUNG! Oft sehen Gifs in PS und in der Vorschau langsamer aus als es dann beim Hochladen der Fall ist, da müsst ihr ein wenig mit der Zeit rumspielen.

Zitat:
Happy

 ich hoffe es konnte euch ein wenig weiter helfen. Sollten noch Fragen bestehen, fragt einfach. Animationen und Gifs sind gerade am Anfang ein wenig knifflig.