Leuchteffekt über Schriften (animiert)

by -Granate. - 14.05.2006

Schritt 1:

Wie immer: entweder ihr habt nen Banner oder ka was auch immer wo eure Schrift drauf is, die dann später von diesem schönen Lichteffekt geschmückt werden soll.
ACHTUNG: Der Effekt sieht nur auf dunklen Schriften gut aus, auf hellen Schriften bringt das fast nix.

Also so siehts bei mir aus:

Photoshop Tutorials


Schritt 2:

Neue Ebene, ihr denkt jetzt sicher: Häh ich bin doch nich blöd, ich weiß doch wie man ne neue Ebene erstellt. ABER: Es gibt viele verschiedene Möglichkeiten und die Anfänger sollten ruhig mal alle kennen:

Möglichkeit 1:
In der oberen Leiste -> Ebene -> Neu -> Ebene ...

Möglichkeit 2: (mein Favorit, da die "überflüssigen" Optionen entfallen)
Klickt auf das kleine Symbol in euerem "Ebenenfenster" (unten rechts).

Möglichkeit 3:
Tastenkombination: STRG + SHIFT + N


Schritt 3:

Wählt das "Verlaufswerkzeug" aus euerer Werkzeugleiste:
Photoshop Tutorials
(falls es nicht zu sehen ist, sondern der Farbtopf an der Stelle ist, klickt mit der rechten Maustaste darauf und ihr könnt es auswählen)


Schritt 4:

Ruft die Verlaufsoptionen durch einen klick auf das Symbol auf:

Photoshop Tutorials

Der Einfachheit halber habe ich euch den nötigen Verlauf bereits erstellt, ihr könnt ihn am Ende des Threads downloaden und müsst ihn dann bei den Verlaufsoptionen nur noch "laden".
Erfahrerene User können sich den Verlauf gerne selbst erstellen, er sollte links und rechts transparent sein und in der Mitte einen weißen Streifen.


Schritt 5:

Ihr zieht euren Verlauf!
Probiert euch ruhig aus, wenn etwas schief gegangen ist einfach mit STRG+Z rückgängig machen und neu probieren.
Euer Verlauf muss nicht wie bei mir sein, er kann auch schräg oder sonst wie sein, probiert euch aus!
Bei mir sah es so aus:

Photoshop Tutorials


Schritt 6:

Nun sieht man den Verlauf allerdings auf dem ganzen Bild/Banner und er soll ja bei uns nur auf der Schrift sein ...
Das erreichen wir durch eine sogenannte "Clipping Mask" (bitte entschuldigt das Englisch, aber ich hab keinen Schimmer wie das Ding auf Deutsch heißt).
Drückt dazu einfach STRG + ALT + G und eure Verlaufsebene sollte im Banner verschwinden.
Im Ebenenfenster sollte es folgendermaßen aussehen:

Photoshop Tutorials

Wenn ihr jetzt diese Ebene von links nach rechts zieht seht ihr wie schön der Lichteffekt nur auf der Schrift zu sehen ist!


Schritt 7:

Zieht euer Bild von Photoshop nach ImageReady indem ihr auf untersten Button in eurer Werkzeugleiste klickt.

Hier benötigt ihr folgende Fenster die ihr in der oberen Leiste unter "Fenster" aktivieren könnt: Animation und Optimierung

In eurem Animationsfenster dupliziert ihr jetzt das Bild:

Photoshop Tutorials

In diesem "neuen" Frame zieht ihr euren Verlauf jetzt von links nach rechts über die Schrift bis er nicht mehr zu sehen ist.
Dannach klickt ihr neben dem "Duplizieren-Button" auf "Bilder dazwischen einfügen".
Hier könnt ihr ein wenig mit den Settings spielen, bis euch euer Ergebnis gefällt.
Ich habe folgende Einstellungen gewählt:

Photoshop Tutorials

Wenn ihr jetzt auf die "Play" Taste in eurem Animations Fenster klickt seht ihr schon wie euer Effekt geworden ist.
Nun könnt ihr euer Banner speichern.
Überprüft aber zunächst eure Optimierungssettings, da ansonsten gegebenfalls die Animation fehlt, wenn ihr nicht als .gif optimiert.



Nun ist eure Lichtanimation fertig.

Viel Spaß damit.

MfG Granate