Hallo, meine Lieben!

Tatsache! ich habe es geschafft  noch ein Tutorial zu erstellen – Heute geht es um Photoshop (oder besser in?). Viele von euch haben gefragt, wie das denn mit meinem Header genau funktioniert – nunja, die Lösung ist eigentlich doch relativ einfach, ein Gif erstellen! Das bringe ich euch heute auf mehr oder minder einfache Art und Weise bei!

Was ihr dafür braucht ist eigentlich ganz einfach…Photoshop, den Rest bringe ich euch jetzt bei!

Als allererstes braucht ihr zwei Ebenen; einmal den Hintergrund und einmal das, was auf dem Hintergrund erscheinen soll, bei mir das süße pinke Herz. Die Ebenen seht ihr rechts im Bild.

Nun geht es darum, die Ebene zwei (also das, was später erscheint) unsichtbar zu machen – Dafür klickt ihr auf das kleine Kästchen mit dem Auge vor der Ebene. Wenn dies getan ist, ist die Ebene momentan nicht mehr sichtbar.

Nun wählt ihr das Animationsfenster aus – Ihr klickt oben in der Auswahlleiste auf „Fenster“ und dann auf „Animationen“ – Das dürfte nun bei euch so aussehen:

Wenn ihr Photoshop CC aus der Creative Cloud nutzt, gibt es hier zwei andere Schritte:

Ihr wählt auch hier „Fenster“ aus und im Drop-Down Menü „Zeitleiste“.

Hier könnt ihr dann die Variante „Frame-Animation erstellen“ auswählen. Alle restlichen Schritte bleiben allerdings gleich (:

Momentan seht ihr dort nur die Ebene eins, das ist ganz normal, da Ebene 2 in dem Sinne noch nicht vorhanden ist.

Nun wählt ihr unten in dem Animations-Fenster „dupliziert ausgewählte Frames“ aus und erstellt somit einen zweiten Animationsframe. Jetzt könnt ihr in diesem zweiten Frame euer Objekt (in meinem Fall das Herz) in Ebene 2 wieder sichtbar machen.

Wählt nun wieder den ersten Frame unten im Animationsfenster aus und klickt auf  „Fügt Animationsframes ein“, um einen besseren Übergang zwischen den beiden Frames zu bekommen.

Nun ploppt dieses Fenster auf – Ich habe mich für 5 Frames entschieden: Wer einen fließenderen, aber dennoch langsameren Übergang haben will, muss hier mehr Frames eingeben – Aber das ist alles eine Sache der Übung (:

Hier seht ihr nun meine erstellten Frames – Wie ihr seht erscheint das Herz (bildförmig…) langsam vom hellen in’s dunkle. Falls ihr das Ganze jetzt schon einmal ausprobieren wollt, klickt einfach auf den Play-Button unten im Animations-Fenster – Ihr seht, das Ganze läuft noch viel zu schnell und unschön.

Um das Ganze hinauszuzögern, müsst ihr die Verzögerungsrate einstellen. Hierfür klickt ihr auf den einzelnen Frame, um die Raten in Sekunden einzustellen.

So sieht das Ganze nun bei mir aus. Mein Tipp: Haltet die Verzögerungsrate recht gering, damit die Übergänge nicht zu ruckelig erscheinen – Das ist aber alles eine Sache der Übung. Probiert einfach herum, so, wie es euch gefällt.

So sieht meine Animation mit den ausgewählten Raten nun aus.
Allerdings muss das Ganze noch ordnungsgemäß gespeichert werden – Da die Endung *.jpg zum Beispiel keine einzelnen Frames darstellen kann.

Dafür wählt ihr nun „Datei“ und dann „Für Web und Geräte speichern“ aus.

In dem Fenster, welches nun aufploppt wählt ihr im zweiten Auswahl Menü als nächstes „GIF“ aus, das ist nämlich das Dateiformat, in dem eure Frames und somit die ganze Animation angezeigt werden kann.

Jetzt nur noch auf „Speichern“ und ihr habt euer erstes Gif erstellt (:

Wie gesagt, das ist alles eine Übungssache, aber wenn man das Ganze verstanden hat, gehen die darauffolgenden Male sehr schnell (: Einfach immer rumprobieren.

Ich hoffe mein Tutorial hat euch geholfen – Wer Fragen hat: Bitte melden!
Habt ihr noch weitere Ideen für Photoshop Tutorials?

Liebe Grüße,

Pin it:

Merken

Merken