Share
Animierte GIF-Dateien waren der Witz in der Design-Community. Das liegt daran, dass animierte Gifs dafür bekannt sind, dass sie ein bisschen kitschig und berüchtigt sind, weil sie eine Seite überladen haben. Bei richtiger Anwendung kann die Animation jedoch für einen ansonsten übersehenen Bereich einer Seite interessant sein. Heute zeigen wir Ihnen, wie Sie mit Photoshop ein animiertes GIF in Photoshop CS5 erstellen. Lass uns anfangen!
Erstellen Sie ein neues Dokument mit 250 x 250 Pixeln und setzen Sie die Auflösung auf 70 px, wobei die Hintergrundfarbe auf # f2f2f2 eingestellt ist.
Platzieren Sie ein Logo in der oberen Mitte der Leinwand.
Schreiben Sie eine Tagline unter dem Logo.
Zeichnen Sie ein Rechteck und setzen Sie die Farbe auf # 90909.
Öffnen Sie das Dialogfeld für die Ebenenstile und aktivieren Sie das Kontrollkästchen Schatten. Reduzieren Sie den Abstand und die Größe auf 2px.
Fügen Sie jetzt eine Verlaufsüberlagerung hinzu und stellen Sie den Mischmodus auf Multiplizieren mit einer Deckkraft von 28% ein..
Fügen Sie einen Strich hinzu und reduzieren Sie die Größe auf 1 px. Setzen Sie die Farbe auf # a31b1b.
Fügen Sie einige Aufzählungspunkte hinzu. In unserem Fall haben wir den Text hinzugefügt: Tutorials, Artikel, Tipps, Freebies, Basix, Videos, Premuim, wie gezeigt.
. Rastern Sie die Textebenen und erstellen Sie eine Schnittmaske.
Platzieren Sie jetzt ein auffälliges Bild. In unserem Fall haben wir das Premium-Programm-Symbol für Psdtuts verwendet, können jedoch das verwenden, was Ihrem Zweck entspricht.
Zeichnen Sie einen weiteren unterstützenden Text wie unter dem in Schritt 6 platzierten Bild.
Erstellen Sie eine ovale Box und setzen Sie die Farbe auf #fdfcfc.
Öffnen Sie den Ebenenstil-Dialog bix und wenden Sie einen Schlagschatten an. Reduzieren Sie den Abstand und die Größe auf 1 px.
Überprüfen Sie Inner Glow und lassen Sie es so wie es ist.
Hinzufügen einer Verlaufsüberlagerung mit einer Deckkraft von 6%.
Nachdem wir alle Ebenen erstellt haben, können wir jetzt mit der Animation beginnen. Öffnen Sie zunächst das Animationsbedienfeld (Fenster> Animation). Ich werde das Timeline-Animationsbedienfeld verwenden (und nicht die Frame-Animation). Hinweis: Diese Funktion ist nur in Photoshop Extended verfügbar. Setzen Sie nun alle Ihre Ebenen auf sichtbar, reduzieren Sie jedoch deren Deckkraft auf 0%..
In der Abbildung unten finden Sie Anweisungen zum Einfügen von Keyframes und zum Erhöhen der Deckkraft.
Ihre Timeline sollte dem folgenden Beispiel ähneln.
Wir haben jetzt unsere Animation fertiggestellt. Drücken Sie Play, um das Ergebnis zu sehen. Fühlen Sie sich frei, um es wo nötig zu optimieren. Um das Banner zu speichern, wählen Sie Datei> Für Web und Geräte speichern. Verwenden Sie dann die Einstellungen aus dem folgenden Bild und klicken Sie auf Speichern.
Das ist es! Du bist fertig!
Accentsconagua