So erstellen Sie ein animiertes Webbanner in Photoshop
Das Erstellen von Web-Bannern ist nicht der glamouröseste Job der Welt, aber es ist etwas, das jeder Designer irgendwann in seiner Karriere tun muss, wahrscheinlich um ein Vielfaches. Obwohl es beim Erstellen von Web-Bannern keine festen Regeln gibt, muss der Typ natürlich groß und die Nachricht druckvoll sein.
Da wir dies auch animieren, würde ich nicht mehr als drei Folien oder animierte Elemente vorschlagen, da die Leute es einfach nicht sehen werden. Blinkende Elemente können auch dazu beitragen, die Aufmerksamkeit des Betrachters auf sich zu ziehen.
In den nächsten Schritten werde ich zeigen, wie Sie ein einfaches animiertes Webbanner einrichten und erstellen, das nach dem Mastering in Zukunft problemlos für neue Jobs verwendet werden kann.
01. Richten Sie Ihr Dokument ein
Starten Sie Photoshop, navigieren Sie zu Datei> Neu und wählen Sie im Dropdown-Menü Voreinstellung die Option Web aus. Wählen Sie in der Dropdown-Liste 'Größe' die Bestenliste aus. Wenn Ihre Abmessungen variieren, wählen Sie 'Benutzerdefiniert' und geben Sie die Pixelabmessungen manuell ein.
Wenn Sie im Dokumentmenü an Dokumentgrenzen ausrichten ausgewählt haben, ziehen Sie die Hilfslinien, um an allen Grenzen des Dokuments zu fangen.
02. Grafische Elemente hinzufügen
Platzieren Sie nun unsere wesentlichen Gestaltungselemente. Im obigen Beispiel habe ich das quadratische T3-Logo eingefügt. Beim Erstellen konnten die Hilfslinien die Größe ändern und es leicht an den Dokumentgrenzen einrasten lassen. Fügen Sie eine Pfeilgrafik ein, die wir später verwenden werden, und legen Sie mit dem Textwerkzeug Ihre Nachricht für die erste Folie fest. Fügen Sie alle benötigten Bilder ein und stellen Sie dann sicher, dass Sie alle Ebenen entsprechend benennen.
03. Erstellen der sekundären Folien
Duplizieren Sie nun einfach Ihre Textebene, deaktivieren Sie die darunter liegende Textebene und geben Sie in der nächsten Phase der Nachricht ein, in diesem Fall 'JETZT IM VERKAUF'. Wenn Sie zufrieden sind, dass alle Elemente vorhanden sind, führen Sie so viele Ebenen wie möglich zusammen. Da der Hintergrund, das Logo und das Titelbild statisch bleiben, können wir dies nach unten zusammenführen und so vier Ebenen erhalten, den Hintergrund, die Textebenen und die Pfeilebene.
04. Erstellen Sie die Rahmenanimation
Klicken Sie nun einfach auf die Registerkarte Timeline am unteren Rand des Fensters oder navigieren Sie zu Fenster> Timeline. Klicken Sie auf den kleinen Pfeil in der Mitte des Fensters, wählen Sie 'Rahmenanimation erstellen' und klicken Sie dann auf die Schaltfläche. Deaktivieren Sie nun alle Ebenen außer der Hintergrundebene und der ersten Nachrichtenebene. Wenden Sie eine Verzögerung von einer Sekunde auf das Bild aus dem Dropdown-Menü des kleinen Animationsrahmens an. Klicken Sie nun einfach auf die Schaltfläche 'Ausgewählte Frames duplizieren' in der Timeline, schalten Sie jedoch die erste Nachricht aus und die zweite Nachricht ein. Wiederholen Sie diesen Vorgang für alle Ebenen und schließen Sie mit der Pfeilebene ab.
05. Lassen Sie den Pfeil blinken und passen Sie die Timings an
Um den Pfeil zum Blinken zu bringen, klicken Sie einfach in der Timeline auf „Ausgewählte Bilder duplizieren“ und schalten Sie den Pfeil aus. Stellen Sie die Zeit auf 0,5 Sekunden ein und wiederholen Sie den Vorgang, indem Sie den Pfeil im Ebenenbedienfeld ein- und ausschalten, sodass er so aussieht, als würde er blinken. Schließlich möchten Sie möglicherweise einige der Timings anpassen, bis Sie vollständig zufrieden sind. Menschen haben sehr kurze Aufmerksamkeitsspannen, daher macht es keinen Sinn, mit der Bildrate langsam zu sein, aber sie müssen sie trotzdem lesen können.
06. Für Web und Geräte speichern
Navigieren Sie abschließend zu „Für Web speichern“ und wählen Sie GIF aus dem Dropdown-Menü. Sie können hier auch die Qualität leicht reduzieren, um die Dateigröße zu verringern. Wenn Sie zufrieden sind, speichern Sie das GIF und ziehen Sie es einfach in einen Webbrowser, um es zu testen.
