22.10.2004, 10:00
Die Entstehungsgeschichte eines herbstlichen Werbebanners für Webhilfe.info oder wie erstelle ich einen Werbebanner?
Fangen wir also an. Zuerst öffnen wir in Photoshop eine Neue Datei. Für diesen Banner habe ich 468px x 60px gewählt. Dies ist das normalerweise Übliche Format in Bannertauschprogrammen oder ähnlichem.
Es spielt keine Rolle ob ihr den Hintergrund in den Voreinstellungen auf Transparent setzt oder eine Hintergrundfarbe wählt. Dies wird am Ende nicht mehr Sichtbar sein
Gut, wir haben jetzt die Einstellungen festgelegt. Fangen wir also an. Ich habe für diesen Banner mir zuerst ein herbstliches Bild im Internet gesucht. Ihr könnt dort kreativ sein und euch einfach ein beliebiges suchen.
Um dieses Bild zu bearbeiten müsst ihr eine Neue Datei in der entsprechende Größe öffnen. Normalerweise sollte Photoshop dies schon als Werte vorgeben, wenn ihr das Bild in der Zwischenablage habt.
Aus diesem Bild( was nicht 468x60px sein muss) habe ich anschließend mit dem Auswahlrechteck Werkzeug (M) - Art: Feste Größe - Breite: 468px Höhe: 60px einen Hintergrund ausgeschnitten. Ihr könnt hier die Auswahl auch erst einmal ein wenig über eurem Bild hin und her bewegen, bis ihr einen schönen Ausschnitt habt. Dieses Ausschneiden erfolgt folgender Maßen. Ihr habt den Ausschnitt mit dem Auswahlwerkzeug ausgesucht, dann klickt ihr innerhalb dieser Auswahl mit der Rechtenmaustaste. Im Menü wählt ihr nun den Punkt: Ebene durch Kopie aus. Es wird eine neue Ebene erstellt, in dem nur euer zuvor gewählter Ausschnitt ist.
Diese Ebene zieht ihr nun in die im ersten Schritt erstellte Datei. Hierzu müsst ihr einfach im Ebenenmanager die Ebene anklicken und mit gedrücktem linken Mausklick auf die Arbeitsfläche der ersten Datei ziehen.
Hier müsst ihr diese nun zentrieren. Nun habt ihr einen passenden Hintergrund für euren Werbebanner. Ich habe hier nun einen Effekt angewendet, der das Bild noch ein wenig deutlicher Strahlen lässt. Dafür geht ihr wie folgt vor: Die Hintergrund - Ebene dubliziert ihr. Wechselt wieder auf die HIntergrundebene und stellt nun folgenden Filtereffekt ein: Filter -> Gaußscher Weichzeichner -> Radius 4,0Pixel.
Wechselt nun wieder zurück auf die obere Ebene. Dieser müsst ihr nun den Effekt : Überlagern zuweisen ( Diese Einstellung ist im Ebenenmanager oben Links zu finden)
Nun sollte euer Bild einen weicheren und strahlenderen Ausdruck haben.
Jetzt kommen wir zu dem horizontal verlaufenden Balken. Für diesen müsst ihr zuerst eine neue kleine Datei erstellen. Breite 3px Höhe 3px Transparenz ist hier wichtig!
So in dieser müsst ihr nun mit dem Buntstift-Werkzeug(B) wie im Bild diese Pixel setzen. Anschließend geht ihr auf Bearbeiten -> Muster definieren. Gebt eurem Muster den Namen : 45° Linien.
Wechselt nun zurück zu eurer 468px x 60px Datei. Hier nehmt ihr das Auswahlwerkzeug mit den folgenden Einstellungen: Art: Feste Größe Breite: 466px Höhe: 10px
Erstellt durch klicken die Auswahl, ihr müsst diese nun noch einen Pixel vom Linken rand abrücken. Dazu einfach mit der Pfeiltaste nach Rechts einmal drücken. So nun müsst Ihr einen Neue Ebene erstellt. Ebene -> Neu -> Neue Ebene (Strg+Umschalt+N.
Füllt diese Auswahl nun mit dem Füllwerkzeug(G) mit #FFFFFF. Nun fügt ihr der Ebene noch ein paar Effekte hinzu. Dazu geht ihr mit einem Doppelklick auf die Ebene, oder über das 'f' Symbol im Ebenenmanager und definiert einen Ebenenstil.
Wählt zuerst eine 1px starke Kontur aus. Farbe ist auch hire #FFFFFF
Als nächstes fügt ihr dieser Ebene eine Musterüberlagerung zu. Unter Muster wählt ihr nun das Eben erstellte 45°Linien aus. Alle weiteren Werte könnt ihr unverändert lassen.
Verringert nun die Deckkraft der Ebene auf ~66%.
So, nun erstellen wir einen 1px starken Rahmen für den Banner. Dazu erstellt ihr erneut eine Neue Ebene. Benennt diese der einfach heit halber Rahmen. Nehmt nun das Buntstiftwerkzeug und zieht mit #4C4C4C einen Rahmen um die Gesamte Ebene. Anschließend könnt ihr für einen leichten 3D Effekt eine #F0F0F0 Linie oben und links neben bzw. unterhalb der #4C4C4C - Linie ziehen.
So nun ist der Banner eigentlich so weit fertig. Ihr könnt jetzt einfach einen Schfriftzug hinzufügen.
[Das ist hier erst einmal nur der Text, ich werde noch den Worksho dahingehend erweitern, als das Bilder als Erklärung noch anbei stehen. Wenn ihr bis dahin Fragen, Fehler oder Anregungen habt dann stellt die bitte. Dann entwickle ich den Workshop dahingehend noch weiter. zusätzlich ist der Banner den ich erstellt habe auch animiert. Dazu werde ich in den nächsten Tagen dann eine Forsetzung verfassen. bis dahin viel Spaß^^]
Fangen wir also an. Zuerst öffnen wir in Photoshop eine Neue Datei. Für diesen Banner habe ich 468px x 60px gewählt. Dies ist das normalerweise Übliche Format in Bannertauschprogrammen oder ähnlichem.
Es spielt keine Rolle ob ihr den Hintergrund in den Voreinstellungen auf Transparent setzt oder eine Hintergrundfarbe wählt. Dies wird am Ende nicht mehr Sichtbar sein
Gut, wir haben jetzt die Einstellungen festgelegt. Fangen wir also an. Ich habe für diesen Banner mir zuerst ein herbstliches Bild im Internet gesucht. Ihr könnt dort kreativ sein und euch einfach ein beliebiges suchen.
Um dieses Bild zu bearbeiten müsst ihr eine Neue Datei in der entsprechende Größe öffnen. Normalerweise sollte Photoshop dies schon als Werte vorgeben, wenn ihr das Bild in der Zwischenablage habt.
Aus diesem Bild( was nicht 468x60px sein muss) habe ich anschließend mit dem Auswahlrechteck Werkzeug (M) - Art: Feste Größe - Breite: 468px Höhe: 60px einen Hintergrund ausgeschnitten. Ihr könnt hier die Auswahl auch erst einmal ein wenig über eurem Bild hin und her bewegen, bis ihr einen schönen Ausschnitt habt. Dieses Ausschneiden erfolgt folgender Maßen. Ihr habt den Ausschnitt mit dem Auswahlwerkzeug ausgesucht, dann klickt ihr innerhalb dieser Auswahl mit der Rechtenmaustaste. Im Menü wählt ihr nun den Punkt: Ebene durch Kopie aus. Es wird eine neue Ebene erstellt, in dem nur euer zuvor gewählter Ausschnitt ist.
Diese Ebene zieht ihr nun in die im ersten Schritt erstellte Datei. Hierzu müsst ihr einfach im Ebenenmanager die Ebene anklicken und mit gedrücktem linken Mausklick auf die Arbeitsfläche der ersten Datei ziehen.
Hier müsst ihr diese nun zentrieren. Nun habt ihr einen passenden Hintergrund für euren Werbebanner. Ich habe hier nun einen Effekt angewendet, der das Bild noch ein wenig deutlicher Strahlen lässt. Dafür geht ihr wie folgt vor: Die Hintergrund - Ebene dubliziert ihr. Wechselt wieder auf die HIntergrundebene und stellt nun folgenden Filtereffekt ein: Filter -> Gaußscher Weichzeichner -> Radius 4,0Pixel.
Wechselt nun wieder zurück auf die obere Ebene. Dieser müsst ihr nun den Effekt : Überlagern zuweisen ( Diese Einstellung ist im Ebenenmanager oben Links zu finden)
Nun sollte euer Bild einen weicheren und strahlenderen Ausdruck haben.
Jetzt kommen wir zu dem horizontal verlaufenden Balken. Für diesen müsst ihr zuerst eine neue kleine Datei erstellen. Breite 3px Höhe 3px Transparenz ist hier wichtig!
So in dieser müsst ihr nun mit dem Buntstift-Werkzeug(B) wie im Bild diese Pixel setzen. Anschließend geht ihr auf Bearbeiten -> Muster definieren. Gebt eurem Muster den Namen : 45° Linien.
Wechselt nun zurück zu eurer 468px x 60px Datei. Hier nehmt ihr das Auswahlwerkzeug mit den folgenden Einstellungen: Art: Feste Größe Breite: 466px Höhe: 10px
Erstellt durch klicken die Auswahl, ihr müsst diese nun noch einen Pixel vom Linken rand abrücken. Dazu einfach mit der Pfeiltaste nach Rechts einmal drücken. So nun müsst Ihr einen Neue Ebene erstellt. Ebene -> Neu -> Neue Ebene (Strg+Umschalt+N.
Füllt diese Auswahl nun mit dem Füllwerkzeug(G) mit #FFFFFF. Nun fügt ihr der Ebene noch ein paar Effekte hinzu. Dazu geht ihr mit einem Doppelklick auf die Ebene, oder über das 'f' Symbol im Ebenenmanager und definiert einen Ebenenstil.
Wählt zuerst eine 1px starke Kontur aus. Farbe ist auch hire #FFFFFF
Als nächstes fügt ihr dieser Ebene eine Musterüberlagerung zu. Unter Muster wählt ihr nun das Eben erstellte 45°Linien aus. Alle weiteren Werte könnt ihr unverändert lassen.
Verringert nun die Deckkraft der Ebene auf ~66%.
So, nun erstellen wir einen 1px starken Rahmen für den Banner. Dazu erstellt ihr erneut eine Neue Ebene. Benennt diese der einfach heit halber Rahmen. Nehmt nun das Buntstiftwerkzeug und zieht mit #4C4C4C einen Rahmen um die Gesamte Ebene. Anschließend könnt ihr für einen leichten 3D Effekt eine #F0F0F0 Linie oben und links neben bzw. unterhalb der #4C4C4C - Linie ziehen.
So nun ist der Banner eigentlich so weit fertig. Ihr könnt jetzt einfach einen Schfriftzug hinzufügen.
[Das ist hier erst einmal nur der Text, ich werde noch den Worksho dahingehend erweitern, als das Bilder als Erklärung noch anbei stehen. Wenn ihr bis dahin Fragen, Fehler oder Anregungen habt dann stellt die bitte. Dann entwickle ich den Workshop dahingehend noch weiter. zusätzlich ist der Banner den ich erstellt habe auch animiert. Dazu werde ich in den nächsten Tagen dann eine Forsetzung verfassen. bis dahin viel Spaß^^]
/ 
