Anzeige
Tutorialbeschreibung

Einfachen animierten Werbebanner erstellen

Einfachen animierten Werbebanner erstellen

Hier kannst du erfahren, wie du einen Werbebanner erstellst, um mit diesem auf anderen Homepages mit zu werben.
Es wird dir alles Schritt für Schritt erklärt. Solltest du Adobe Photoshop CS2 (oder früher) verwenden, musst du den Teil des Animieren von einem anderen Programm übernehmen lassen.


Vorwort:
Wir haben bereits Tutorials, die sich mit der Erstellung von animierten Bannern befassen. Allerdings sind diese Anleitungen unter ImageReady entstanden, das bis zur Version CS2 ein Bestandteil von Photoshop war. Mit Einführung von CS3 wurde dieser Teil komplett in Photoshop integriert. Für die CS3-Neueinsteiger haben wir uns daher entschlossen, eine aktuelle Version zur Bannergestaltung in den Tutorialbestand mit aufzunehmen. Die Anleitungen unter ImageReady können dennoch als sinnvolle Ergänzung dienen.
Pepexx 

*************************

Wenn du deine Website für neue User bewerben möchtest, bist du hier richtig.
Solltest du ältere Verisonen vor Photoshop CS3 verwenden, findest Du unter der Rubrik "ImageReady" entsprechende Hinweise für die Erstelleung eines Banners. Andernfalls kannst du diese auch mit anderen GIF-Animationsprogrammen vornehmen (z.B. ULEAD GIF ANIMATOR, Bestandteil von PhotoImpact).

Im Beispiel vom Tutorial wird ein Banner für PSD-Tutorials.de erstellt.

Bannergrößen
Banner gibt es natürlich in verschiedenen Größen. Einige der gängigsten Standardgrößen im Net sind einmal hier aufgeführt, um dir einen kleinen Überblick zu verschaffen:
  • Full Banner 468px * 60px
  • Half Banner 234px * 72px
  • Button 120px * (90px oder 60px)
  • Micro Button 88px * 31px
In diesem Tutorial behandeln wir jedoch die eigentlich gängigste Bannergröße, den Full Banner (auch Fullsize Banner genannten) mit einer Abmessung von 468px * 60px.

1. Anfang
Öffne Photoshop und erstelle eine Neue Datei mit einer Größe von 468px * 60px (sprich eine Breite von 468px und eine Höhe von 60px).

Nun musst du (möglichst) Formen und Farben von der entsprechenden Seite in auf eine kleine Fläche verteilen.
Am besten stellst du dies an, indem du einen sog. Screenshot (auf die Taste "Druck", auf deiner Tastatur klicken) der Seite erstellst. Dann wechelst du wieder zu deinem Banner und fügst den Screenshot ein (Strg + V).

Bilder


Wie du hier siehst, werden die Farben Hell-Dunkel Blau / Weiß / Grau verwendet.
Hier wäre es z.B. von Vorteil, den Verlaufseffekt zu übernehmen, für die Hintergrundebene. Du verschiebst die Screenshotebene etwas nach rechts und klickst dann zweimal auf die Hintergrund Ebene, um diese bearbeiten zu können. Danach öffne die Fülloptionen der Hintergrundebene und wechsle zum Farbverlauf. Dort klickst du auf den standardmäßigen Schwarzweißverlauf um diesen zu ändern.

Bilder


Nun erstellst du nach Gefallen einen schönen Verlauseffekt wie im Screenshot.
Wenn dir dies gefällt, kannst du auf OK klicken. (Nun kannst du nach belieben weitere Effekte, wie z.B. einen Schatten nach innen auswählen).
Desweiteren kannst du nun den Text und (nach Belieben) das Logo übernehmen / hinzufügen. Um die Schrift zu übernehmen, musst du natürlich nach einer passenden Schriftart und einem passenden Fülleffekt suchen. Für das Logo solltest du den Zauberstab verwenden, doch ist dies für unser Beispiel nicht unbedingt geeignet. Normalerweie holt man sich die Formen für den Banner aus der PSD des Designs.

Bilder


Nun folgen die geschwungenen Balken aus dem Logo. Diese werden einfach mit dem Zeichenstift in etwa nachempfunden. Denen auch wieder Effekte geben um alles ein wenig der Website anzupassen.

Bilder


Jetzt, wo der Rohbanner eigentlich fertig ist, kommen wir zu den Besonderheiten. Wir erstellen ein paar Texte in der Schriftart des Logos (natürlich mit anderen Effekten), wie z.B. "Entdecke eine neue Welt..", "..eine Welt mit vielen Möglichkeiten..", "..komm zu PSD-Tutorials.de!".
Nur die Hintergrundebene und die Balken werden nun auf sichtbar gestellt und die Deckkraft deines ersten Textes auf 0%, um ihn auszublenden. Aktiviere dann das Animationsfenster (Fenster -> Animation).
Dort wählst du bei deinem ersten Text das Feld (im Animationsfenster) Deckkraft an (das Zeitsymbol). Dann erscheint eine gelbe Raute, verschiebe diese zu etwa 1,5Sek in der Zeitleiste.

Bilder


Nun bewege das blaue "Pizzaachtel-Symbol" in der Zeitleiste ein wenig weiter als die gelbe Raute unterhalb des Symbols (Je näher am ersten Keyframe, desto weniger KB hat die Datei später. Aber der Effekt wird dadurch schneller zu Ende sein). Danach setzte die Deckkraft des Textes wieder auf 100%. Jetzt hast du die erste Animation erstellt. Nun setzte das blaue Symbol etwas nach deinen Effekt und setzte die Deckkraft des Textes kurz auf 99% und dann wieder auf 100% um eine neue Raute zu erstellen. Jetzt das blaue Symbol der Zeitleiste wieder etwas weiter und die Deckkraft wieder auf 0% stellen.
Jetzt das ganze versetzt nach diesem auf- und abtauch Effekt des ersten Textes, mit den anderen Texten (und dem Logo) wiederholen. Aber natürlich nacheinander in der Zeitleiste.

Danach könnte es so in etwa aussehen:

Bilder


Jetzt die einzelnen Keyframes verschieben, wie es einem gefällt (und wie es von der Größe der Datei sinnvoll ist). Wenn die Animation gefällt, kann man diese unter "Datei -> Für Web und Geräte speichern" noch einmal anschauen / optimieren / speichern.

In diesem Fenster wählst du bei Vorgabe einfach GIF 128 DITHERING aus.

Wähle bei Optionen der Schleifenwiedergabe "Unbegrenzt" aus. Und schraube vielleicht die Anzahl der Farben ein wenig runter (wenn es dann noch gut aussieht).
Achte darauf, dass deine Datei niemals zu groß wird. Denn ein Banner soll ja schnell geladen werden.

Wenn der Banner OK ist, einfach auf Speichern klicken.

Bilder


Das Endprodukt kann dann, je nach Aufwand und Intensität so ausfallen:

Bilder


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kiasa
  • 02.03.2016 - 18:13

Super! Vielen herzlichen Dank für das Tutorial! :)

Portrait von binekbine
  • 25.04.2014 - 14:16

Super vielen Dank für dieses Tutorial

Portrait von ABlank
  • 19.11.2013 - 10:16

Vielen Dank, gut umsetzbar!

Portrait von euphorbia83
  • 31.05.2013 - 15:45

Mein CS4 hat kein Fenster "Animation", damit steht und faellt nun alles... was kann ich denn sonst tun, um ein Banner zu erstellen?

Portrait von euphorbia83
  • 31.05.2013 - 15:01

Hallo, mein indesign CS4 hat das Fenster "Animation" nicht, hab ich da was falsch verstanden?

Portrait von Kessy_h
  • 13.09.2012 - 11:35

Tolles Tutorial, aber gibt es sowas auch schon für CS5?

Portrait von Momo_1987
  • 02.07.2011 - 18:33

genau das was ich gesucht habe...danke

Portrait von JarJarART
  • 17.06.2011 - 16:44

Vielen Dank! Genau das hatte ich gesucht! Super beschrieben und leicht anzuwenden.

Portrait von romanowski
  • 28.02.2011 - 17:43

... und wie bekommen ich die URL in den Banner?

Portrait von cloudkraft
  • 27.01.2011 - 14:40

ist echt super danke

Portrait von EgoPlayer951
Portrait von AnyWinks
  • 05.01.2011 - 10:34

super, einfach, klappt - danke!

Portrait von multitechnik
  • 28.12.2010 - 22:16

sehr gut und übersichtlich beschrieben, vielen dank !

Portrait von erdal0621
  • 07.12.2010 - 20:58

Super Danke schön. So was habe ich gesucht und gefunden.
Danke noch mal.

Portrait von koernchen
  • 06.12.2010 - 13:50

Sehr schön. Ganz einfach.

Portrait von schoeni18
  • 02.12.2010 - 19:37

endlich mal was brauchbares ..

Portrait von LenaHode
  • 26.11.2010 - 10:08

Super! auch für Anfänger

Portrait von smoopie
  • 26.10.2010 - 04:00

n1 super tut kann ich super brauchen

Portrait von No_Nice
  • 10.10.2010 - 16:55

super erklärung...sollte kein probl. sein das umzusetzen...

Portrait von Leuchty
  • 01.10.2010 - 14:26

Absolut super für den Anfänger erklärt! Danke für den Lehrstoff :)

x
×
×