Flotte Banner mit Photoshop
Banner-Trends

DeveloperIT-ProjekteSoftware

Ein Banner soll Aufmerksamkeit heischen und Klicks auf sich ziehen. Da bleibt wenig Raum für gestalterische Freiheit. Glücklicherweise ist alles eine Frage der Ideen.

Neue Wege

Flotte Banner mit Photoshop

Aus Sicht der Gestaltung sind Werbebanner eine schwierige Aufgabe: relativ wenig Platz, noch weniger Dateigröße und genervte Nutzer als Zielpublikum. Um aus diesem Teufelskreis auszubrechen, muss sich der Webdesigner immer wieder Neues überlegen.

Der vorliegende Artikel soll mit Tipps und Tricks dabei helfen. Gleichzeitig zeigt der Workshop einige Fähigkeiten der neuen CS-2-Grafiksuite von Adobe. Vor allem der Austausch zwischen Photoshop und Illustrator und die neue Animationspalette in Photoshop sollen zum Einsatz kommen.


Idee & Strategie

Flotte Banner mit Photoshop

Im Beispielbanner soll eine kostenlose Tankmöglichkeit angeteasert werden. Zugegeben, dank der hohen Benzinpreise allein sollte dies eine hohe Klickrate auf das Banner bescheren. Das zeigt auch schon die erste Regel für Banner: Die Botschaft sollte einfach sein ? Sie erhalten nur kurze Zeit die Aufmerksamkeit des Nutzers. Wichtig ist außerdem eine optische oder textliche Handlungsaufforderung. Beides erhöht die Klickrate. Eine Ausnahme sind natürlich auf das Image abzielende Banner.

Für das kostenlose Tankangebot ist die Klickrate das Wichtigste. Deswegen soll ein Auto mit anfangs leerem Tank als Basis dienen, das ins Bild fährt und neben dem ein passender Text erscheint. Zum Schluss steht die Klickaufforderung. Natürlich benötigen Sie für ein so simples Banner kein Storyboard, wichtig ist aber, die Grundidee und den Ablauf vor Augen zu haben. Soll aus dem Ganzen eine vollständige Kampagne werden, ist natürlich mehr Planung erforderlich.

Beim Format für Ihre Banner machen üblicherweise die Portale, auf denen Sie werben, Vorgaben. Am weitesten verbreitet ist das Standardmaß 468 x 60 Pixel. Sie finden dieses und andere Standardmaße in den Vorgaben von Image Ready ? leider aber nicht in denen von Photoshop. Sollten Sie eine ganze Kampagne entwickeln, sind auf jeden Fall verschiedene Formate anzuraten. Im größeren Stil sind dann natürlich leicht abgewandelte Banner rund um ein Leitmotiv sinnvoll.


Los geht?s

Flotte Banner mit Photoshop

Ausnahmsweise soll die Hauptarbeit in Photoshop statt in Image Ready erledigt werden. In der Version CS2 ist dies möglich geworden, da die Animationspalette auch in Photoshop integriert ist. Außerdem bieten die Adobe Smart Objects die Möglichkeit, eine Vektorgrafik einfach in Photoshop einzufügen.

Erstellen Sie zuerst eine neue Datei mit den Maßen 468 x 60 Pixel. Zum Auto passt dieses Bannerformat hervorragend, da genug horizontale Fläche zum Fahren vorhanden ist. Als Hintergrundfarbe definieren Sie ein helles Braun (Hexadezimal: #DCD19B). Oft wird empfohlen, eher helle Farben und wenig Schwarz oder Weiß für Banner zu verwenden. Dies hängt allerdings auch sehr stark vom Produkt und von der Umgebung ab, in der ein Banner geschaltet wird. Für eine perfekte Kampagne sollten verschiedene Versionen für verschiedene Ziel-Websites entwickelt werden.

Basis des Banners ist die Illustration eines Autos, die mit Adobe Illustrator erstellt wurde (Automobile.ai auf der Heft-CD im Bereich Listings). In Photoshop gelangt sie über die Zwischenablage. Das Besondere ist, dass sie als Smart Object eingefügt wird. Der große Vorteil: Nach einer Größenveränderung oder Ähnlichem wird das Smart Object neu gerendert und verliert keine Qualität.

Im vorliegenden Beispiel ist die Linie des Tanks noch zu dünn. Klicken Sie einfach doppelt auf das Thumbnail des Smart Objects, um die Datei in Illustrator zu öffnen. Diese Datei ist übrigens nicht das Original, sondern in der PSD eingebettet. Entfernen Sie in Illustrator die Strichelung der Linie und erhöhen Sie die Dicke auf 2 Punkt. Anschließend speichern Sie und wechseln zurück in Photoshop: Dort kommt noch eine Kontur per Ebeneneffekt hinzu.

Leider funktioniert der Austausch über Smart Objects nicht mit Image Ready. Zwar bleibt das Smart Object erhalten, es lässt sich aber nicht aus Image Ready heraus in Illustrator bearbeiten. Und völlig in der Sackgasse landen Sie, wenn Sie das Smart Object in Image Ready anklicken, da es dann seine Eigenschaften verliert. Als sinnvolles Gegenmittel können Sie Version Cue einsetzen, um eine Zwischenversion des Bildes zu speichern, bevor Sie in Image Ready wechseln und sich damit für Smart Objects auf gefährliches Terrain begeben.

Abgesehen davon sind die Smart Objects in der Praxis ausgesprochen nützlich, da klare Illustrationen für Banner oft sehr gut wirken. Und nicht jedes Mal neu hineinkopieren zu müssen ist natürlich ausgesprochen praktisch.


Grundlagen

Flotte Banner mit Photoshop

Wenn Sie bereits einen genauen Plan im Kopf haben, wie die Animation in Ihrem Banner aussehen soll, können Sie die Einzelteile vorab erstellen und erst am Schluss zur Animations-Palette greifen. Dies ist erfahrungsgemäß meist der schnellste Weg.

Als Erstes erstellen Sie die Textebenen, die die Geschichte des Banners festlegen. Drei Stück bilden die Basis des vorliegenden Banners: Tank leer? Ist die Einstiegsfrage, Gratis tanken der Leitgedanke und Hier klicken die anschließende Aufforderung. Diese drei sollen nacheinander erscheinen. Gerade eine klare Handlungsaufforderung bringt einem Banner eine verbesserte Klickrate. Natürlich kann es auch ein wenig subtiler sein als Hier klicken und ebenso nett über eine Schaltfläche optisch dargestellt werden, wichtig ist aber, die psychologische Hemmschwelle des Nutzers zu überwinden. Und ebenso entscheidend ist, dass der Link auf dem Banner dann auch zu dem Inhalt führt, den Sie versprechen. Nichts ist schlimmer als ein gutes Banner, das dann den Nutzer auf einer ausufernden Firmen-Website stranden lässt, statt ihn zum Ziel der Kampagne zu führen.

Als Schrift für den Text kommt die Radiostars mit 38 Punkt zum Einsatz. Sie finden sie auch als kostenlosen Truetype-Font unter www.larabiefonts.com. Sie können selbstverständlich eine beliebige andere Schrift verwenden. Auf der Heft-CD finden Sie die Ebenen mit der Schrift unter Banner_1.psd.

Der Tank selbst soll sich langsam füllen. Benzin erscheint als gelbe Fläche mit grünen Streifen. Letztere sollen den Umsonst-Gedanken ein wenig aufnehmen. Erstellen Sie zuerst eine neue Ebene, markieren Sie mit dem Zauberstab den Tank des Autos und füllen Sie diesen Bereich auf der neuen Ebene mit Gelb (Hexadezimal: #FFEC00). Ergänzen Sie anschließend die grünen Streifen (Hexadezimal: #20C200). Hierfür kommt eine Füllebene mit Vektormaske zum Einsatz. Duplizieren Sie diese Ebene, verschieben Sie die grünen Streifen nach oben und blenden Sie diese Ebene aus ? dies ist die Basis für einen Wechsel der Streifen, der ein Blinken simuliert. Erstellen Sie eine weitere Ebene und füllen Sie die Auswahl des Tanks mit Weiß. Eine Ebenenmaske dient später dazu, langsam die darunter liegende Tankfüllung einzublenden.

Wenn die Dateigröße des Banners auch ein wenig höher sein darf, können Sie das Auto zusätzlich fahren lassen. Duplizieren Sie dazu die Ebene mit dem Auto und versehen Sie das Duplikat mit Bewegungsunschärfe (Filter, Weichzeichnungsfilter, Bewegungsunschärfe mit dem Wert 70 für Distanz).


Animation als Eyecatcher

Flotte Banner mit Photoshop

So sehr Blinki-blink und Bunti-bunt auf einer Website auch stören können, für Banner sind Animationen ausgesprochen wichtig, denn sie fesseln Aufmerksamkeit. Öffnen Sie in Photoshop die Animationen-Palette im Menü Fenster. Die grundlegende Struktur ist schnell aufgebaut: Frame 1 zeigt aktuell nur das Auto, Frame 2 das Auto und den ersten Text, Frame 3 das Auto und den zweiten Text und so weiter. Sie erstellen am besten zuerst in der Animationen-Palette die neuen Frames und blend
en dann über die Ebenen-Palette die einzelnen Ebenen aus und ein.

Wenn Sie die Ebenen der Animation ausrichten möchten, finden Sie in der Ebenen-Palette die entsprechenden Schaltflächen, wenn die Animationen-Palette eingeblendet ist. Hier hat Photoshop das Prinzip aus Image Ready übernommen.


Feinarbeit

Flotte Banner mit Photoshop

Als Nächstes animieren Sie den Tank: In Frame 3 (beim Text Gratis tanken) schieben Sie die Ebene mit der weißen Fläche über dem Tankinhalt leicht nach oben, so dass die gelb-grüne Fläche hervorlugt. Duplizieren Sie anschließend Frame 3 und schieben Sie im Duplikat diese Ebene ganz nach oben, so dass der gesamte Tank gefüllt ist.

Damit die Füllung animiert wird, markieren Sie beide Frames zusammen und fügen mit dem Befehl Dazwischen einfügen vier neue Frames ein. In den Frames 4, 6 und 8 blenden Sie die eine Ebene mit den grünen Streifen aus und die bisher ausgeblendete ein. So wechselt sich die Position der Streifen jedes Mal ab.

In Frame 9 passen Sie die Tankanzeige an, duplizieren den Frame und wechseln die grünen Streifen im Duplikat. Wollen Sie die Animation noch etwas länger gestalten, können Sie die Kombination der Frames 9 und 10 noch ein paar Mal duplizieren.


Perfektes Timing

Flotte Banner mit Photoshop

Nun geht es ans Timing der Animation: Die ersten beiden Frames mit dem Text sollten länger eingeblendet sein (Verzögerung 1 bis 2 Sekunden). Die Frames mit der Tankanimation sind jeweils 0,2 Sekunden sichtbar. Wie viel Durchläufe Sie Ihrer Animation gönnen (Einstellung links unten in der Animationen-Palette) hängt von der Animation ab. Prinzipiell gilt die Empfehlung, eine Animation nicht mehr als fünf bis zehn Mal zu durchlaufen, auf keinen Fall aber unbegrenzt. Wenn ein Nutzer nämlich nicht gleich am Anfang daraufgeklickt hat, wird er es auch nicht tun, wenn er sich einen Kaffee geholt hat.

Die Optimierung von Bannern ist prinzipiell eine unangenehme Geschichte. Das vorliegende Beispiel bleibt bei 64 Farben als PNG-8 oder GIF ungefähr 12 KByte groß, das entspricht der von vielen Websites vorgegebenen Standardgröße. In diesem Beispiel fällt die Entscheidung gegen ein Dithering, da dieses die Dateigröße erhöht. Vorsicht, dies kann bei manchen Bildern oder Illustrationen zu Problemen führen. Dumm ist auch, wenn Ihre Banner-Geschichte mehr Platz erfordert hat und Sie nachträglich optimieren müssen. Hier ist es auf jeden Fall empfehlenswert, zwischen den einzelnen Arbeitsschritten schon die Dateigröße zu überprüfen und zu optimieren. So lässt sich beispielsweise schon frühzeitig prüfen, ob ein Dithering rein aus Gründen der Dateigröße möglich ist.


Volle Fahrt voraus!

Flotte Banner mit Photoshop

Wie versprochen kann das Auto auch noch fahren, falls die Websites, auf denen Sie werben, mehr als zwölf KByte große Banner zulassen. Bedenken Sie aber immer, dass ein Banner nicht zu groß werden darf, damit es der Kunde beim Laden der Site auch wirklich sieht. Fügen Sie für das fahrende Auto noch drei Frames am Anfang der Animation ein. Verschieben Sie die Ebene mit dem bewegungsunscharfen Auto. Im vierten Frame blenden Sie nicht nur das bewegungsunscharfe, sondern darunter auch das normale Auto ein. So entsteht der Eindruck, es würde bremsen.

Wollen Sie nachträglich einen Ebeneneffekt verändern, zum Beispiel um zur Schrift noch eine Kontur einzublenden, verwenden Sie dazu die Schaltflächen in der Ebenen-Palette, die die Änderungen auf alle Frames der Animation anwenden. Um einen Stil auf alle Frames anzuwenden, verwenden Sie Ebenenstil vereinheitlichen. Vorsicht: Wenn Frame 1 propagieren ausgewählt ist, wendet Photoshop die Änderungen des ersten Frames auf andere Frames an.

Das fertige Beispiel finden Sie wie gewohnt auf der Heft-CD im Bereich Listings unter dem Namen banner_4.psd. banner_4a.psd enthält noch einige Variationen.

Alle Dateien und Listings zum Workshop finden Sie auch unter listings.internet-pro.de.