Anzeige
Tutorialbeschreibung

Animierter Glitzertext

Animierter Glitzertext

1. Neues Dokument

Wir fangen an, indem wir uns ein neues Dokument erstellen mit den Maßen 574 Px x 319 Px.

Bilder



 
Dann nehmen wir das Verlaufswerkzeug und füllen den Hintergrund mit den Farben #29108c bis #152869.

Bilder



 
Den Verlauf ziehen wir von links oben nach rechts unten auf.

Bilder



 

2. Text erstellen und mit Glitzereffekt versehen

Wir wählen eine Schriftart aus und schreiben den Text. Hier habe ich die "Franklin Gothic Heavy" verwendet in 235 Px Größe und in der Farbe #8e5ade.

Bilder



 
Wir duplizieren die Ebenen, indem wir 2x Strg+J drücken. Nun haben wir 3 identische Ebenen.

Bilder



 
Für den ersten Glitzereffekt fügen wir der ersten Ebene ein Rauschen hinzu unter Filter>Rauschfilter>Rauschen hinzufügen und wählen einen Wert von 20%. Auf die Frage, ob wir die Ebene rastern wollen, bestätigen wir mit OK.

Bilder



 
Das Gleiche machen wir bei der zweiten Ebene. Allerdings mit einer Stärke von 21%.

Bilder



 
Und noch einmal für die dritte Ebene und einem Wert von 22%. Nun haben wir ein unterschiedliches Rauschverhalten für jede der drei Ebenen.

Bilder



 

3. Glitzer erstellen

Dann erstellen wir über jeder Textebene eine leere Ebene, um darauf jeweils unterschiedliche Sternenmuster zu setzen.

Bilder



 
Sternenpinsel findet ihr auch unter PSD-Tutorials.de, und mit eurem ausgewählten Sternenpinsel setzt ihr auf der unteren Ebene viele Sterne. Variiert auch ein wenig in der Größe des Pinsels, dass die Sterne schön zufällig gesetzt sind.

Bilder



 
Das Gleiche macht ihr mit den restlichen beiden Stern-Ebenen, sodass man ein unterschiedliches Sternenmuster erhält.

Bilder



 

4. Glitzer animieren

Nun kommt der spannende Teil, und zwar werden wir jetzt unser erstelltes Glitzer animieren. Dazu gehen wir auf Fenster>Animation ...

Bilder



 
Wir klicken dann im darauf erscheinenden Fenster unten rechts auf das Symbol für die Frame-Ansicht...

Bilder



 
Danach klicken wir unten auf das kleine Abrissblock-Symbol 2x drauf, um zwei weitere Frames zu erstellen.

Bilder



 
Wir markieren dann den ersten Frame und blenden dafür die erste Textebene ein, passend mit der dazugehörigen Stern-Ebene.

Bilder



 
Danach klicken wir auf den zweiten Frame und blenden demnach das zweite Paar mit Text- und Stern-Ebene ein ...

Bilder



 
Und beim dritten Frame blenden wir die beiden letzten Ebenen ein.

Bilder



 
Danach markieren wir mit gedrückt gehaltener Shift-Taste alle drei Frames auf einmal, ...

Bilder



 
... klicken neben der Sekundenzahl auf das kleine Dreieck und stellen einen Wert von 0,2 Sekunden Abspieldauer pro Frame ein.

Bilder



 
Und damit die Animation nicht nur einmal abgespielt wird, sondern mehrmals am laufenden Band, stellen wir, wie unten gezeigt, unbegrenzt ein.

Bilder



 
Wenn wir dann den Playbutton betätigen, spielt sich unsere Animation ab.

Bilder



 

5. Animation speichern

Um unsere Animation zu speichern, gehen wir auf Datei>Für Web und Geräte speichern.

Bilder



 
Und brauchen im darauf erscheinenden Fenster nur GIF auszuwählen. Dann klicken wir auf Speichern und unsere Animation ist gespeichert.

Bilder



 
Nun kommt es meist oft vor, dass Animationen, die mit Bildbetrachtern geöffnet werden, nicht abgespielt werden. Es wird nur ein Frame angezeigt. Um die Animation jedoch begutachten zu können, reicht es, wenn man die Bilddatei einfach in ein Browserfenster per Drag&Drop hineinzieht. Dann wird sie auch abgespielt.

Ich hoffe, euch hat das Tutorial Spaß gemacht. Hier seht ihr nun unser Endergebnis:

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von lynn_lissi1993
Portrait von goldariel
  • 21.12.2013 - 01:45

liebe Jana, das ist das erste mal, dass ich sowas hinbekommen habe. alle anderen tutorils von anderen gehen irgendwie immer nicht, egal, wie oft ich es ausprobiere.. ich hab wirklich geschrien und im kreis gehüpft vor freude :-) danke

Portrait von Shelly_Maus
  • 04.09.2013 - 12:00

Das ist ein super EFFEKT :)
Die Beschreibung war super ..hat alles ohne Probleme geklappt :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.10.2012 - 15:47

Danke. Bei dieser ausführlichen Anleitung war das Erstellen kein Problem.

Portrait von Nora_V
  • 17.09.2012 - 10:04

Cooles Tutorial, hat super geklappt - Danke!! :-)

Portrait von putzili2609
  • 30.08.2012 - 14:37

Schönes Tutorial! Sehr einfach nachzuarbeiten, weil es detailliert erklärt ist und ein toller Effekt im Ergebnis. Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.06.2012 - 05:14

Jana, Wow genial mega Video. Und schön auch. Danke

Portrait von Aalem
  • 21.05.2012 - 14:28

Ein Tutorial wie ich es mir vorstelle - beispielhaft :)
Danke !

Portrait von biru
  • 21.04.2012 - 12:56

Ich habe auch versucht mit CS3, es hat auch funktioniert. Gut erklärt. Und ich wollte diese Animierter Glitzertext auf meinem Website sein, aber es funkelt nicht. Ich weiss es nicht warum es ging nicht? :(

Portrait von biru
  • 19.04.2012 - 19:18

Super, ich habe geschafft !!!
Good Job !!

Portrait von BlackBowdit
  • 24.03.2012 - 05:06

klasse tutorial, habs heute probiert und auch hinbekommen brauch nur noch mal irgendwann schönere sternenstempel, auch in verschiedenen formen. aber auf meinen ersten versuch bin ich schon ganz stolz wo ich mich doch erst gestern hier angemeldet hab und sofort was hinbekommen habe ...danke :)

Portrait von dickeisis2
  • 14.03.2012 - 09:28

dankeschön, hab schon lange nach was ähnlichem gesucht!

Portrait von Bajka36
  • 19.02.2012 - 12:53

Vielen lieben Dank! Meine Signatur ist animiert, bin glücklich und stolz auf mich! Video hat mir jedoch besser geholfen, ich finde es verständlicher als PDF. Trotzdem vieeelen Daaaank!!

Portrait von Drache_1976
  • 12.02.2012 - 19:14

Danke für dein Video!
Einfach Klasse! :-)

Portrait von Calisandra
  • 19.01.2012 - 15:10

danke fuer das tut

ich werds heute gleich mal ausprobieren

Portrait von salonike72
  • 10.11.2011 - 18:28

Hi Jana, super erklärt, habs versucht und auch hinbekommen. Ist genau richtig für unsere Web-Seite jetzt dann zur Weihnachtszeit. Dass "einfache" Gifs so einfach zum erstellen sind habe ich nicht gewusst. Nur leider ist die Aufnahme etwas zu leise für mein Notebook, kann es kaum verstehen und bin mit der Lautstärke am Anschlag.
Für alle die einmal versuchen wollen Gif's zu erstellen, ladet Euch das Video runter und seht es an, sehr zu empfehlen. Und ein dickes Lob an Dich Jana, Dank nochmals.

Portrait von Tanja_Lagemann
  • 16.10.2011 - 21:38

Danke. Super verständlich erklärt. Hat sofort auf Anhieb geklappt.
Tolles Tutorial

Portrait von Ivylainne
  • 04.09.2011 - 01:13

hat super geklappt. vielen dank!!!

Portrait von kfrosch
  • 01.09.2011 - 21:21

super süsser effekt! tolle beschreibung! vielen dank

Portrait von BeautyOfTheDark
  • 25.08.2011 - 22:20

Wow, klasse Effekt und so einfach selbst zu machen!! Danke für das tolle Tutorial!! :D

x
×
×