Photoshop

Animieren & Fade-Effekt (Photoshop Tutorial)

Tutorial erstellt von OptIk, letzte Änderung am 25.01.2007

Hallo liebe Communnity !!!

In dem folgenden Tutorial werde ich euch einen Überblick über das Animieren mit ImageReady geben.
ImageReady hat wesentlich mehr Funktionen als das Animieren, doch irgendwo muss man ja mal anfangen.

Der Einstieg


Als erstes benötigt man eine Datei, die animiert werden kann. Entweder erstellt man eine neue Datei in ImageReady (Datei > Neu.../File > New...) oder man importiert eine Datei aus Photoshop.
Die letztere Methode benutzen wir. Ich habe eine neue Datei (88*31) in Photoshop angelegt und eingefärbt.

Diese kann man nun über einen Button am Ende der Werkzeug-Palette (von Photoshop) in ImageReady importieren.



Für eine einfache Animation benötigt man 4 grundlegende Fenster:

1. Animationsfenster
2. Werkzeug-Palette
3. Ebenenmanager
4. Optionenleiste

Diese Fenster öffnet ihr, indem ihr auf Fenster/Window klickt und sie auswählt. Alle anderen Fenster können geschlossen werden.
Ein Haken muss am Ende bei Werzeug-Palette / Tools, Optionen / Options, Ebenen / Layers & Animation / Animation vorhanden sein.



Der Ebenenmanager, sowie die Werkzeug-Palette und die Optionenleiste sollten bereits aus Photoshop bekannt sein. Das einzige ungewohnte Fenster ist das Animationsfenster!!!



1. Frame
    Das ist der Überblick über den "ersten" Frame.
2. Wiederholungsoptionen
    Hier kann man die Anzahl der Wiederholungen der Animation einstellen.
3. Funktionstasten
    Dies Tasten funktionieren wie bei einem Mediaplay.
4. Frames einfügen
    Hier fügt man belibig viele Zwischenframes ein.
5. Frame dublizieren
    Hiermit dubliziert man den ausgewählten Frame.
6. Frame löschen
    Hiermit kann man den ausgewählten Frame löschen.
7. Zeitliche Verzögerung
    Mit dieser Funktion kann man die Abstände zwischen den einzelnen Frames einstellen.

Um unsere Arbeit später einfacher durchzuführen wählen wir bei der Optionenleiste die folgenden Punkte per Harken aus.



So, damit wären alle Vorbereitungen für eine gelungene Animation getroffen.

Die Animation - Der Fade-Effekt


Zuerst erstellen wir eine Datei in Photoshop oder ImageReady.

Ich habe ein kleines Banner (88*31) in Photoshop erstellt und dann wie oben erklärt in ImageReady importiert.



Zu den 4 Grundfenstern öffnet sich jetzt noch ein neues Fenster. Es enthält unsere Datei.
Meine Datei besteht aus 2 Ebenen. Hintergrund (Ebene_1) & Schrift (Ebene_2).
Wir wählen mit dem Bewegungs-Werkzeug/Move-Tool (V) oder im Ebenenmanager die Schrift (Ebene_2) aus.

Die nächsten Schritte finden alle im Animationsfenster statt.

Zuerst dublizieren wir den Aktuellen Frame zwei mal.



Nun wählen wir im Animationsfenster den zweiten Frame, sowie im Ebenenmanager die Schrift (Ebene_2) aus.



Jetzt müsst ihr die Schrift (Ebene_2) ausblenden.

Der Frame 2 bleibt ausgewählt und ihr klickt auf den Button zum Frame einfügen im Animationsfenster.
Hier fügt ihr 10 Frames ein.



Nun wählt ihr den letzten Frame aus und macht genau den selben Schritt.

Jetzt müssten sich 23 Frames (3 Grundframes + 20 hinzugefügte Frames) im Animationsfensterbefinden.
Das war es auch schon.
Man könnte noch die Geschwindigkeit der Animation ändern.
Dazu klickt man unter den einzelnen Frames auf die Zahlenwerte und ändert sie beliebig.



Auf den Steuerungstasten kann man die Animation dann im Animationsfenster teste.

Jetzt noch speichern (Datei > Optimierte Version Speichern/Save Optimized) und fertig ist die erste Animation.



Ich hoffe mein Tutorial hat euch gefallen und ich konnte euch weiterhelfen.

Mit freundlichen Grüßen

Tim Praviza

www.tim-praviza.de

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2008           top ▲