Animation in PS

[maxin77]

Wie kann ich eine Animation fürs WEB erstellen die einem Schriftzug oder Logo einen Glanzeffekt verleiht, ist das in photoshop überhaupt möglich?

[Zer0]

Servus,
dein Vorhaben ist in Photoshop möglich. Da ich jetzt nicht deine Version kenne, sagt dir vielleicht der Begriff ImageReady etwas, wird mit Photoshop mitgeliefert und ist in späteren Version sogar mit Photoshop vereint.

Im Falle, dass du Cs3 hast, schau mal unter: Fenster > Animation
Dort öffnet sich dann am unteren Bildschirmrand eine Palette, welche für's Animieren gedacht ist.
Ich habe dir mal ein Basic-Tutorial angehangen. Dort werden dir die Grundlagen nahe gebracht. Später musst du dann nur eben anstelle der Bewegung deinen Glow animieren

Gruß,
Zero

[Stefan]

Hab das Tutorial vor gefühlten 20 Jahre geschrieben, man könnte einiges Verbessern, aber immerhin ^^

Anleitung:

1. Öffne Photoshop. Erstelle ein neues,leeres Bild. Hintergrund muss transparent sein. Bildgröße variiert, je nach Bild, ist aber theorethisch egal. In meinem Beispiel nahm' ich 200x200.

2. Wähle das Verlaufswerkzeug (G). Als Vordergrundfarbe Weiß. In dem Balken unter der Menüleiste wählst du den reflektierenden Verlauf.


3. Mit dem Abstand, den du beim Klicken und Loslassen verwendest, bestimmst du die Dicke deines Verlaufes. In unsrem Fall sollte er relativ gering sein.

4. Anschließend wählst du das Verschieben Werkzeug (V) und ziehst deinen Verlauf zurecht. Er sollte möglichst dunn sein, etwa so:



5. Danach speicherst du die Datei als *.PSD ab.

6. Nun startest du das externe Programm ImageReady, was bei der Photoshop Installation mitinstalliert wurde. Im Grunde kannst du damit deine Grafiken slicen und komplexe Grafiken und Animationen erstellen.

7. Öffne die vorher abgespeicherte PSD Datei.

8. Wähle das Auswahl Werkzeug (M) und drücke STRG + A, damit du den ganzen Bereich selektiert hast. Danach drückst du STRG + C um die Auswahl zu kopieren.

9. Öffne das Bild, dass den Glanz erhalten soll. In meinem Fall das TP Logo

10. Drücke STR + V. Nun sollte dein Glanz-Verlauf im Ebenenmenü erscheinen. Wenn nicht, wiederhole Schritt 8 nochmal.

11. Nun musst du die "Spreu vom Weizen trennen". Du musst den Bereich, der vom Glanz überdeckt werden soll ausschneiden. Hierzu wählst du den Zauberstab (W) aus.

12. In meinem Fall klicke ich auf den schwarzen Rand, damit er ausgewählt wird. Und nochmal, mit gedrückter Shift Taste, um den schwarzen Bereich im "P" auszuwählen.

13. Anschließend drücke ich STRG + C und danach STRG + V. Nun erhalte ich den schwarzen Rand als neue Ebene.

14. Nun wiederhole ich Schritt 12, allerdings drücke ich, nachdem ich den Bereich ausgewählt habe, die Entfernen Taste, um den schwarzen Bereich zu löschen.

15. Nun musst du die Ebenen wie folgt anordnen: Der schwarze Rand ganz oben, danach der "Glanzverlauf" und danach wieder der normale Text, der mit dem Glanz überdeckt werden soll.



16. Nun beginnst du damit, deine eigentliche Animation zu erstellen. Du wählst jetzt das Verschieben Werkzeug (V) und die "Glanzeffekt Ebene" aus. Nun schiebst du sie dahin, wo deine Animation beginnen soll. In meinem Fall links vor dem TP Logo.

17. Dann beachtest du im Animationsmenü (meist ganz unten) und klickst auf das Symbol links vom Mülleimer, das mit "Dupliziert aktuellen Frame" gekennzeichnet ist. Danach solltest du zwei Bilder in der Leiste haben. Davon den zweiten Auswählen.



18. Jetzt wählst du wieder das Verschiebenwerkzeug (V) und verschiebst die "Glanzeffekt Ebene" zu dem Ort, wo der Glanz "enden" soll. Also in meinem Fall ganz nach rechts.

19. Nun solltest du in der Animationsleiste zwei Bilder haben: Eine, wo der Glanz ganz links ist und ein Bild, wo der Glanz ganz rechts ist. Wenn die Reihenfolge umgekehrt ist, klickst du auf das rechte Bild und ziehst es ganz nach links.



20. Nun wählst du das erste Einzelbild im Animationsmenü aus und klickst auf das Symbol "Dazwischen einfügen". Dies findest du ebenfalls im Animationsmenü



21. Im Einstellungen im folgenden Menü wählst du so wie im Screenshot. Die Anzahl der "Hinzuzufügenden Frames" ist variabel. Je nach Größe des Bildes, Länge der Animation und erstrebte Dateigröße sollten andere Werte eingeben werden. Ich habe mal "10" genommen. Das sollte in meinem Beispiel reichen.



22. Du kannst deine Animation im Animationsmenü mal abspielen. Wenn's passt und du die Animation speichern willst, gehst du auf Datei -> Optimierte Version speichern unter und speicherst ab.

Das war's eigentlich. Falls du noch Fragen oder Probleme hast, kannste dich gerne nochmal melden

Gruß Stefan

[maxin77]

Yo, vielen dank für den Tip! Ich hab nur ein Problem ich arbeite in CS3 und habe somit kein IR. Aber ich denke man kann das auch in CS3 nach dieser Vorlage umsetzten ich versuch es mal, oder gibt es auch eine CS3 Anleitung?

[Zer0]

Für die Situation hilft dir mein Tipp, diese "Animations"-Palette aufzurufen!

Das kleine Tutorial von Stefan wird auch mit Cs3 oder Cs2 arbeiten.. Die Operationen bleiben die selben, nur sind manche Schalter wo anders unterordnet.

[Philip Fuchslocher]

In CS3 (wenn ich mich nicht täusche) wurde die Animationspalette bereits auf die Zeitleiste umgetrimmt. Die Funktionsweise unterscheidet sich somit gewaltig zu den Vorgängerversionen und arbeitet stattdessen wie z.B. in Premiere bzw. AfterEffects.

[maxin77]

Vielen Dank für die Tipps! Es funktioniert! Übrigens die Animationspalette in CS3 entspricht der in "Image Ready". Jetzt werde ich mich noch mit der "Zeitleiste" beschäftigen mal gucken was diese zu bieten hat.