startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 22.11.24, Adresse: http://www.grammiweb.de/anleitungen/ka_banner.shtml)

 

Bannerdesign

Das meistgenutzte Werbemittel im Internet ist der Werbebanner, dessen Vertreter sich auf beinahe jeder Homepage finden lassen. In dieser Kurzanleitung behandeln wir das Erstellen eines animierten Banners, also einer Grafik, die sich aus mehreren, hintereinander abgespielten Einzelbildern zusammensetzt und so eine Art Film abspielt.

In dieser Kurzanleitung gehen wir auf grundsätzliche Fragen der Grafikbearbeitung nur nebenbei ein. Sollten wider Erwarten Probleme bei der Umsetzung des Beispiels in Ihrem Grafikprogramm auftreten, schauen Sie bitte in der Hilfefunktion nach oder mailen Sie uns einfach.

Was Sie benötigen

Zur Erstellung eines animierten Werbebanners benötigen Sie:

• Grafikprogramm
  In diesem Workshop wird das Grafikprogramm "Photo Impact 4.2" der Firma Ulead verwendet. Sie können auch jedes andere Programm nutzen, die hier gezeigten Funktionen werden von den meisten Produkten so oder in ähnlicher Form angeboten.
• Konvertierungstool
  Unterstützt das Grafikprogramm das ".GIF"-Format nicht, benötigen Sie noch ein Tool zur Konvertierung in dieses Format. Wir verwenden im Regelfall das Programm "Ulead Smart Saver", andere sind hier natürlich ebenfalls möglich.
• GIF-Animationsprogramm
  Die endgültige Animation wird mittels des Freeware-Programms "Ulead GIF-Animator" erzeugt, ließe sich aber auch mit ähnlichen Programmen verwirklichen.

Vorbereitungen

Vor Beginn der Erstellung sollte erst einmal geplant werden, wie der Banner werben soll. Viele Tipps und Möglichkeiten können Sie im Grammiweb-Magazin unter "Banners that work" finden.

Beispielfall

Für die Webdesign-Agentur "Webbastelgroup" soll ein Halfsizebanner der Größe 234x60 Pixel neue Kunden dazu animieren, sich eine Internetpräsenz erstellen zu lassen. Dem Kunden soll mitgeteilt werden, dass sich im Internet Geld verdienen lässt und dass die "Webbastelgroup" bereits über Erfahrungen auf diesem Gebiet verfügt.

Grundkonzept: Die Bannergröße

Für unseren Beispielfall entscheiden wir uns für einen Werbebanner in Halfsizegröße, also 234x60 Pixel. Als Hintergrundfarbe wird Weiß gewählt, da sich weiße Werbebanner leichter in das Gesamtbild einer Homepage integrieren und somit nicht unangenehm "hervorstechen". Außerdem wirkt Weiß Umfragen zufolge vertrauenserweckender und freundlicher.

Wählen Sie also in der Menüzeile des "Photo Impact" den Punkt "Datei", in dem daraufhin erscheinenden Untermenü den Eintrag "Neu". Im nun eingeblendeten Fenster wählen Sie bitte "Benutzerdefiniert" und die Werte "234" für die Breite und "60" für die Höhe. Als Maßeinheit wird "Pixel" gewählt. Nach Betätigen des "Ok"-Buttons wird nun ein neues Fenster im Arbeitsbereich des Programms angezeigt.

Grundkonzept: Der Bannerrahmen

Dieses neue Fenster wird nun eingerahmt, um dem Betrachter gegenüber eindeutig herauszustellen, dass eine Grafik seine Aufmerksamkeit verlangt.

Färben Sie nun den Hintergrund des Fensters Schwarz ein. Anschließend wird ein Rechteck der Größe 232x58 Pixel erstellt. Wählen Sie hierzu das Auswahlwerkzeug und erzeugen Sie ein Rechteck mit eben diesen Maßen. Wandeln Sie das neu erstellte Rechteck mittels des Kontextmenüs (zu Erreichen mittels der rechten Maustaste) in ein Objekt um und platzieren Sie es mit jeweils einem Pixel Abstand zum Fensterrand auf dem Hintergrund (im Kontextmenü unter "Eigenschaften" Position Links und Oben jeweils "1"). Färben Sie den Hintergrund des Rechtecks Weiß.

Wenn Sie nun mit der rechten Maustaste auf die Grafik klicken und im Kontextmenü den Eintrag "Alles einbinden" wählen, haben Sie das Grundgerüst für den Werbebanner vorbereitet.

Der Bannerhintergrund

Für unser Beispiel wird dem Banner nun noch ein Hintergrund gegeben, damit hier zusätzliche Informationen dargestellt werden können. Die Wörter eCommerce, Webmarketing, eTrade, Virtualstore, Datawarehouse und Onlineshop werden in dezentem Grau in den Hintergrund gestellt und ebenfalls eingebunden, damit diese bei den nachfolgenden Sequenzen immer am gleichen Ort zu finden sind.

Nach Speichern der Grundgrafik unter dem Dateinamen "1" im ".BMP"-Format geht´s dann zur Erstellung der einzelnen Sequenzen.

Erstellen der einzelnen Sequenzen

Auf dem im vorherigen Schritt erstellten Grundgerüst bauen nun die einzelnen Sequenzen für den endgültigen Werbebanner auf. In unserem Beispiel soll beim Betrachter erst einmal Interesse geweckt werden - und womit läßt sich Interesse wecken? Natürlich mit der Möglichkeit, Geld zu verdienen.

Beschriften Sie einfach das Grundgerüst "1" mit den von Ihnen gewünschten Inhalten und speichern sie die so entstehenden Bilder unter den Dateinamen "2", "3" etc... im gleichen Verzeichnis.

Die letzte Grafik weist dann auf den Inhalt der Werbebotschaft hin, in unserem Beispiel also die Firma "Webbastelgroup", die auch schon Testsieger einer angesehenen Zeitschrift war.

Einzelsequenzen optimieren

Sind alle Einzelbilder erstellt und abgespeichert, sollten diese in das GIF-Format konvertiert und sobei auf die eingeschränkte GIF-Farbpalette hin optimiert werden.

Rufen Sie dazu den "Ulead Smart Saver" auf und laden Sie die Grafik "2" in den Speicher. Experimentieren Sie mit der Anzahl der Farben in der jeweiligen Grafik und speichern Sie sie, wenn sie das optimale Ergebnis ermittelt haben, im GIF-Format ab.

Fahren Sie mit den anderen Grafiken fort, bis alle Bilder als ".GIF"-Dateien vorliegen. Diesen Umweg über die Konvertierung empfehlen wir, da es zwar auch mit dem GIF-Animator möglich ist, vorhandene ".BMP"-Dateien zu einem animierten GIF-Banner zusammenzusetzen, hierbei allerdings eine Optimierung recht umständlich ist und somit höhere Dateigrößen in Kauf zu nehmen wären.

Zusammenführen zu einer Animation

Die vorhandenen ".GIF"-Grafiken laden Sie nun mittels des "Animation Wizards", des Animationsassistenten, in den GIF-Animator. Hier können Sie bereits die Reihenfolge der Grafikanzeige bestimmen, verschieben Sie also die Einträge, bis sie in der richtigen Folge aufgeführt werden.

Im nächsten Fenster werden Sie gefragt, ob die Animation mit Dithering oder ohne optimiert werden soll. Dithering empfiehlt sich bei grafikintensiven Vorlagen, wird aber bei textintensiven Vorlagen meist nicht benötigt. Wählen Sie also "Don´t dither".

Als Nächstes kann nun die Anzeigedauer jedes Einzelbildes angegeben werden. Wählen Sie vorläufig erst einmal 500 Millisekunden. Die letzte Grafik soll natürlich länger angezeigt werden, das wird aber nachträglich eingestellt.

Der "GIF-Film" ist nun beinahe vollendet. Klicken Sie in der Auswahlliste links den letzten Eintrag "5.gif" an und wählen Sie eine Anzeigedauer von 1000 Millisekunden, speichern Sie ab, und schon ist es geschafft. Sie haben nun einen Werbebanner erstellt, mit dem Sie zum Beispiel im Grammiweb kostengünstig werben können.

Der endgültige Werbebanner sieht nun wie folgt aus:

Noch eine Anmerkung: Durch die manuelle Konvertierung ins GIF-Format hat unser Werbebanner nun eine Größe von 11 Kilobyte. Das Endprodukt ohne Konvertierung, also das Auswählen von BMP-Grafiken für den Banner, ergab eine Größe von 16 Kilobyte.

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]