Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Haben Sie Interesse an Softwaretipps für Webmaster?
  •  
  • ja
  • nein
  •  


Linktipps

Anzeige

 

www.finanzcheck.de
» Startseite » Design und Grafik - Tutorials

Banner erstellen mit Photoshop

Tutorial zur Erstellung eines animierten Banners in der Größe 468x60 mit Photoshop 8.

Datei erstellen

Beschreibung:
Bei diesem Tutorial erfahren Sie wie man ganz einfach einen Full Size Banner erstellen kann. Es wird aber nur die Vorgehensweise der Erstellung des Banners mit Animation vermittelt. Für die Animation wird der Adobe Image Ready verwendet.

Schritt 1:
Erstellen Sie im Photosop eine neue Datei mit den Angaben wie Sie im Bild zu sehen sind.

Bühne

Schritt 2:
Färben Sie den Hintergrund Weiß. Wählen Sie das Auswahlwerkzeug aus und markieren einen Teilbereich welchen Sie dann orange färben. Um die gewünschten Texte immer gleich zu platzieren ziehe die Hilfslinien in die gewünschte Position. Benenne die erste Ebene als "Background Weiß" und die Zweite als "Background Orange".

Text erstellen

Schritt 3:
Nun können Sie einen Text erstellen und diesen mit ein paar Fülloptionen verändern, bis er Ihnen gefällt. Die Fülloptionen finden Sie mit einem Rechtsklick der Maus auf der aktiven Ebene unter "Fülloptionen...".

Grafiken einfügen

Schritt 4:

Fügen Sie nun zu den Texten einen Stern ein und benennen Sie die Ebene mit Stern1. Duplizieren Sie diese Ebene nun 4x und benennen Sie jeweils eine Ebene mit Stern2, Stern1_2 und Stern2_2. Zuerst wählen Sie die die Ebene Stern1 aus und, drücken "Strg+T" und verkleinern Sie den Stern um 20%. Wählen Sie nun die die Ebene Stern2 aus, transformieren Sie ihn um 90° und verkleinern Sie ihn um ca. 50%. Platzieren Sie den Stern nun links von DÖNG!DE.

Grafiken hervorheben

Schritt 5:
Um die Sterne nun etwas hervorzuheben, transformieren Sie die Ebene Stern2_2 gleich wie die Stern2, verkleinern Sie den Stern jedoch nicht und platzieren Sie ihn auf der linken Seite unter Stern2. Nun drücken Sie "Strg U" und stellen Sie die Farbe so ein, dass Sie mit der Hintergrundfarbe übereinstimmt. Wählen Sie nun Stern1_2 aus und drücken Sie ebenfalls "Strg+U" und geben Sie im Feld für "Lab-Helligkeit" +100 ein.

Menüleiste

Schritt 6:
Nun springen wir zu Adobe ImageReady indem wir den Button in der Werkzeugleiste betätigen.Im ImageReady sollten Sie nun das Animationsfenster sehen. Ist dieses Fenster nicht zu sehen, kann es unter "Fenster - Animation" eingeblendet werden. Das Animationsfenster von ImageReady arbeitet fast gleich wie das Ebenenfenster von Photoshop nur dass man hier einzelne Frames erstellen kann, in dem Ebenen ein- und ausgeblendet werden können. Diese Frames können dann nach einander abgespielt werden woraus sich dann eine Animation ergibt. Nun blenden Sie im Ebenenfenster alle Ebenen aus, außer DÖNG!DE und die beiden Background-Ebenen indem Sie auf die Augen im Ebenenfenster klicken. Markieren Sie die Ebene "DÖNG!DE" und schieben den Text mit gegrückter Shift-Taste so weit nach links, dass er nicht mehr zu sehen ist.

Animationsfenster

Schritt 7:
Übernehmen Sie die Einstellungen wie Sie im Bild angezeigt werden.

Ausgangsposition

Schritt 8:
Duplizieren Sie nun im Animationsfenster den ersten Frame, indem Sie die Ebene einfach auf das Duplizieren Icon (Duplizieren Icon) ziehen. Im Zweiten Frame setzen Sie den Text wiederum auf die Ausgangsposition zurück.

Dazwischen einfügen

Schritt 9:
Klicken Sie nun im Animationsfenster auf die Schaltfläche "Dazwischen einfügen..." und nehmen Sie die gleichen Einstellungen wie im Bild vor. Wie Sie nun sehen können, fügt diese Funktion selbstständig die fehlenden Frames ein. Es wird also für eine Animation immer nur das Anfangsbild und das Endbild benötig um eine Animation herzustellen.

Texte einblenden

Schritt 10: Um die weitern Texte einblenden zu lassen duplizieren Sie nun bitte den letzten Frame im Animationsfenster und machen den Text "Fun" sichtbar. Wiederholen Sie dies bitte ebenfalls mit den Texten "Erotik" und "Entertainment".

Grafik einblenden

Schritt 11:
Duplizieren Sie ein weiteres Mal den letzten Frame im Animationsfenster. Blenden Sie diesmal alle Sternen-Ebenen im Ebenenfenster ein und klicken Sie abermals auf den "Dazwischen einfügen..." Button. Stellen Sie diesmal unter "Hinzuzufügende Frames" nur 3 Frames ein.

Zeit einstellen

Schritt 12:
Damit der Banner nicht sofort wieder an den Anfang springt, können wir den letzten Frame wie folgt länger anzeigen lassen. Klicken Sie dafür im letzten Frame auf die 0 und stellen die gewünschte Zeit ein, wie lange eine Pause eingefügt werden soll, bis die Animation wieder von vorne beginnt.

HINWEIS: Um die Animation so einzustellen, dass der Banner nur einen Durchlauf hat und auf dem letzten Frame stehen bleibt, muss nur im Animationsfenster ganz links unten auf "Unbegrenzt" geklickt werden und auf "Einmal" umgestellt werden.

Doeng!DE - Fun, Erotik, Entertainment

Schritt 13:
Zu guter letzt müssen wir den Banner noch unter "Datei - Optimiert-Version speichern unter" unseren Banner als gif Datei auf der Festplatte abspeichern.

So, das war's. Ich hoffe das Tutorial konnte euch etwas weiterhelfen.

Mit dem WME Banner Creator könnt Ihr euch eure Banner auch direkt online erstellen!


Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!

Diese Artikel könnten Sie auch interessieren:
Videotutorial: Runder Rahmen (für Orbs usw. geeignet) mit Photoshop
Webdesign: Weniger ist mehr
Videotutorial: Objekte mit Photoshop umfärben
Webdesign: häufige Fehler
Webdesign: Userfreundliches Design


 
Anzeige