So erstellen Sie ein animiertes Web-Banner in Photoshop

Sep 11, 2025
wie man

Die Erstellung von Webfahnen ist nicht der glamouröseste der Arbeitsplätze der Welt, aber es ist etwas, was jeder Designer irgendwann in ihrer Karriere tun muss, wahrscheinlich viele Male. Obwohl es keine harten und schnellen Regeln gibt, wenn es um die Erstellung von Webfahnen geht, ist es selbstverständlich, dass der Typ groß und der Botschaftsmeldung sein muss.

Wie wir das auch animieren, würde ich nicht mehr als drei Folien oder animierte Elemente vorschlagen, da die Leute es einfach nicht sehen werden. Blinkelemente können auch dazu beitragen, die Aufmerksamkeit des Betrachters aufmerksam zu machen.

Make this animated banner for a website below…

Machen Sie dieses animierte Banner für eine Website unten ...

In den nächsten Schritten werde ich demonstrieren, wie Sie ein einfaches animiertes Web-Banner einrichten und erstellen, das einst eine Brise sein wird, um in der Zukunft auf jeden neuen Job zu gelten.

01. Richten Sie Ihr Dokument ein

Launch Photoshop, navigieren Sie zu Datei & GT; Neu und wählen Sie das Web aus dem Dropdown-Menü "Preset". Aus der Dropdown-Auswahl der Größe, oder wenn Ihre Abmessungen variieren, wählen Sie Custom, und geben Sie die Pixelabmessungen manuell ein.

Wenn Sie auf Dokumentgrenzen aus dem Menü Ansicht ausgewählt werden, ziehen Sie die Anleitungen, um an alle Grenzen des Dokuments zu speichern.

02. Hinzufügen von Grafikelementen

Nun, um unsere wesentlichen Designelemente zu platzieren. In dem obigen Beispiel, das ich in das T3-Square-Logo eingefügt habe und die Guides erstellt hatte, konnten sie es wiedergrauen und es leicht an die Dokumentengrenzen einrasten. Fügen Sie in eine Pfeilgrafik ein, die später verwendet werden, und verwenden Sie das Typ-Tool, das Ihre Nachricht für die erste Folie einstellen. Fügen Sie in beliebige Bilder ein, die Sie benötigen, und stellen Sie dann sicher, dass Sie alle Ihre Layer angemessen nennen.

03. Erstellen der sekundären Folien

Jetzt kopieren Sie einfach Ihre Typenschicht, schalten Sie die darunter liegende Typenschicht aus und geben Sie die nächste Stufe der Nachricht in diesem Fall in diesem Fall "on Sale Now" ein. Sobald Sie froh sind, dass Sie alle Elemente an Ort und Stelle haben, verschmelzen Sie so viele der Layer wie möglich. Als Hintergrund bleiben das Logo und das Cover-Image statisch, wir können dies zusammenführen, um uns mit vier Schichten, dem Hintergrund, den Typschichten und der Pfeilschicht zu verlassen.

04. Erstellen Sie die Rahmenanimation

Klicken Sie nun einfach auf die Registerkarte Timeline am unteren Rand des Fensters oder navigieren Sie zu Window & GT; Zeitleiste. Klicken Sie auf den kleinen Pfeil in der Mitte des Fensters und wählen Sie "Frame Animation erstellen" und klicken Sie auf die Schaltfläche. Schalten Sie nun alle Ebenen abgesehen von der Hintergrundebene und der ersten Nachrichtenschicht aus. Wenden Sie eine zweite Verzögerung auf den Rahmen aus dem Dropdown-Menü auf dem kleinen Animationsrahmen an. Klicken Sie nun einfach auf die Schaltfläche "Duplicate ausgewählte Frames" in der Timeline drücken, schalten Sie jedoch die erste Nachricht aus und schalten Sie die zweite Nachricht ein. Wiederholen Sie diesen Vorgang für alle Layer, die mit der Pfeilschicht fertiggestellt werden.

  • Die 10 größten olympischen Spiele-Logos aller Zeiten

05. Machen Sie den Pfeil-Flash und passen Sie die Timings an

Um den Pfeil-Flash zu erstellen, klicken Sie einfach auf "Duplicate ausgewählte Frames" von der Timeline und drehen Sie den Pfeil aus. Passen Sie die Zeit auf 0,5 Sekunden ein und wiederholen Sie den Prozess, um den Pfeil ein- und auszuschalten und in der Ebenenfenster ein- und auszuschalten, sodass er angezeigt wird, als ob er blinkt. Schließlich möchten Sie möglicherweise einige der Timings anpassen, bis Sie völlig glücklich sind. Die Menschen haben sehr kurze Aufmerksamkeitsspannen, so dass es keinen Sinn gibt, mit der Bildrate langsam zu sein, aber sie müssen es immer noch lesen können.

06. Sparen Sie für Web und Geräte

Navigieren Sie schließlich zum "Web speichern" und wählen Sie GIF aus dem Dropdown-Menü. Sie können die Qualität auch leicht reduzieren, um die Dateigröße herunterzulassen. Sobald Sie zufrieden sind, speichern Sie das GIF heraus und ziehen Sie es einfach in einen Webbrowser, um es zu testen.

wie man - Die beliebtesten Artikel

Schritt-für-Schritt: WIE MIMIL-MALE IN COREL MALER

wie man Sep 11, 2025

Es fühlt sich nur an wie gestern, als ich mit Highschool-Freunden in Fantasy-Welten voller Ritter, Zauberer, Barbars und Schätze in Dungeons versteckt war. Als Jugendliche waren die am meis..

Die Regeln der responsiven Web-Typografie

wie man Sep 11, 2025

Responsive Web-Typografie ist hart - Sie müssen sowohl Designkippen als auch technisches Know-how haben. Aber jedoch knifflig, es könnte sein, es ist falsch, es ist nicht eine Option, da Ty..

4 Wesentliche Bilderoptimierungs-Tipps

wie man Sep 11, 2025

Einige glückliche Entwickler und dieser Autor hatte die Möglichkeit, das neue Bildoptimierungs-E-Book von Osmani zu technisch z..

5 Tipps zur Verbesserung Ihrer VR-Kreationen

wie man Sep 11, 2025

Vertex-Workshop-Führer. Glen Southern. teilt seine Top-Tipps, um Ihnen dabei zu helfen, ..

Wie man digital in ZbrushCore digital skulpt

wie man Sep 11, 2025

ZbrushCore ($ 149.95 für eine einzige Benutzerlizenz) ist eine vereinfachte Version von Zbrush das di..

Entdecken Sie unter Ausländer, und wie Sie es am besten benutzen

wie man Sep 11, 2025

Unterpause ist A. A. Maltechnik. In der Renaissance beliebt, in der Sie ein monochrome tonale Rendering einer Arbe..

So erstellen Sie ein stilisiertes 3D-Zeichen für Spiele

wie man Sep 11, 2025

Dies 3D Art. Das Tutorial konzentriert sich auf die Schaffung eines halbstilisierten Avatars in Iclone-Charakter-E..

So erstellen Sie eine Winterumgebung

wie man Sep 11, 2025

Bevor ich anfange an einem persönlichen Bild zu arbeiten, denke ich in der Regel an, was ich in der fertigen Arbeit sehen möcht..

Kategorien