pixelstarter.de - Dein Einstieg in die Welt der Bildbearbeitung

Viele kennen Sie als Profilbilder bei Wer-kennt-wen und Co., animierte kleine Bilder, die so genannten Gif’s. Diese sind bei Wkw mittlerweile nicht mehr lauffähig können aber auch auf der eigenen Homepage oder anderen Social Communitys eingesetzt werden und dort als echter Eyecatcher dienen.

Hinsichtlich anderen Bildformaten hat Gif die besondere Eigenschaft Bilderreihen zu speichern und diese in zeitlich definierter Folge anzeigen zu können. Somit entsteht die Illusion einer Animation, ganz wie bei einem Zeichentrickfilm. Wie einfach es ist in Photoshop eine Animation in Gif zu erstellen zeigt dieses Tutorial.

Als Beispiel nehmen wir das Pixelstarter Logo. Hier wollen wir das Pfeilsymbol animiert spiegeln und anschließend drehend in dessen Ausgangslage zurückbringen.

Wir öffnen zunächst das Logo und gestalten uns die einzelnen Bilder die unsere Animation bilden werden.

Das Pfeilsymbol markieren wir mit dem Auswahlwerkzeug  und kopieren es in eine neue Ebene STRG+J.

Jetzt ziehen wir nochmals mit dem Auswahlwerkzeug das Logo und füllen diese Fläche mit STRG+Löschtaste mit weißer Farbe.

Nun duplizieren wir die Ebene mit dem Pfeil einmal. Dazu Ebene markieren und STRG+J drücken. Dann quetschen wir diese mit STRG+T etwas zusammen und bestätigen das mit Return.

Die ursprüngliche Pfeilebene (Ebene1) kopieren wir jetzt erneut mit STRG+J und ziehen sie in der Ebenenpalette ganz nach oben.

Diese quetschen wir jetzt nochmal über STRG+T etwas zusammen.

Das kopieren der ursprünglichen Pfeilebene (Ebene1) und deren Verzerrung über STRG+T wiederholen wir jetzt noch zweimal bis wir den Pfeil komplett gespiegelt haben.

Der erste Teil ist jetzt geschafft. Jetzt lassen wir das Pfeilsymbol aus dem Bild springen und wieder landen. „Ebene 1 Kopie 5“ ist jetzt zunächst unsere jeweilige Basis um sie mit mit STRG+J zu kopieren, diese wird wieder in unserer Ebenenpalette ganz nach obenen gezogen und anschließend transformiert.

Wenn der Pfeil fast gänzlich aus dem Bild gesprungen ist, nehmen wir wieder die ursprüngliche Ebene 1 als Basis. Also wieder duplizieren mit STRG+J, an die oberste Stelle der Ebenenpalette ziehen und Transformieren.

So fast fertig Wir haben jetzt alle nötigen Einzelbilder für unsere Animation angelegt. Etwas mühsam aber das Endergebnis lässt sich sehen – ihr werdet sehen.

Jetzt aktiviert über den Menüpunkt Fenster den Abschnitt Animation. Menü->Fenster->Animation. Im unteren Bereich von Photoshop wird jetzt eine Zeitleiste angedockt.

Klickt jetzt auf neues Frame (im Screenshot rot markiert) und erstellt somit zwölf weitere Bilder.

Jetzt bestimmen wir den Inhalt der Einzelbilder. Dazu erst auf das jeweilige Bild in der Zeitleiste klicken und entsprechend in der Ebenenpalette alle Ebenen ausblenden die nicht dargestellt werden sollen.

Dieses Schritt führen wir jetzt für jedes der 13 Bilder in der Zeitleiste aus.

Wenn alle Bilder der Zeitleiste entsprechend behandelt wurden. Klicken wir auf die Zeitangabe unterhalb des ersten Bildes und geben dort an 5sec. an. Damit wird klargestellt das dieses Bild 5 Sekunden lang angezeigt werden soll bevor das nächste Bild eingeblendet wird.

Unseren Film können wir jetzt schon testen. Dazu einfach das Play Symbol anklicken und die Animation anschauen.

Und alles ok? Fein,dann speichern wir das Symbol jetzt noch ab. Wichtig, ist hierbei nicht in “Speichern unter…” sondern in “Für Web und Geräte speichern” zu klicken. Ansonsten würde das Gif nicht fähig zur Animation sein.

Der aufkommende Dialog gibt uns nochmal die Gelegenheit verschiedene Optionen anzuklicken oder die Größe zu verändern. In diesem Fall bestätigen wir allerdings nur mit Return und speichern unter einem sinnigen Namen ab.

Fertig!!! Das Bild kann jetzt auf Internetseiten veröffentlicht werden.

Und hier das Endergebnis, der springende Pfeil: