In diesem Tutorial zeige ich euch, wie ihr in Photoshop ganz einfach in 12 Schritten einen modernen und coolen Banner für eure Homepage zum Werben o.ä. erstellt. Ich gehe hierbei wieder auf Abwedler und Nachbelichter ein und erkläre euch, wie man mit nur zwei Füllmethoden (Normal und Ineinanderkopieren) super arbeiten, und gute Effekte erstellen kann.
Alle Dateien, die Ihr zum Nachbauen benötigt, sind unter dem Vorschaubild als .zip Datei angehängt. Sollten ihr dazu noch Fragen haben, könnt ihr uns einfach über unser Kontaktformular oder in der Kommentarfunktion anschreiben. Viel spaß!
Tutorial Dateien als .zip Datei herunterladen (250kb)
Wir erstellen uns ein neues Dokument (STRG+N) und Farben dies mit einer Farbe. In
meinem Tutorial habe ich ein mittleres Blau gewählt (#0543c1). Danach ziehen wir
uns das Logo, welches später auf den Banner soll in Layout.
Als Nächstes erstellen wir uns eine eigene Form bzw. eine Runde ecke mit dem Pfadwerkzeug, welche später als kleines Designelement dienen soll.
Danach setzen wir Verläufe auf unseren blauen Hintergrund und setzen diese auf „Ineinanderkopieren“. Wichtig hierbei. Alle Verläufe haben einen kleinen Abstand zu unserer orangefarbenen Ecke. Somit sieht die Fläche mit dem Logo plastischer aus. Alle Verläufe sind in weiß (#FFFFFF). Den letzten (3ten) Verlauf schneide ich so aus, das eine etwa 1px – 2px große Kante entsteht, und setze diese auf den Modus „Normal“.
Jetzt setzen wir uns das Logo (welches sich schon im Layout befindet) in der doppelten Größe als Hintergrund. Damit ein Kontrast entsteht, invertiere ich das Logo und setze es auf „Ineinanderkopieren“. Ich dupliziere mir dieses Logo, welches sich im Hintergrund von unserem kleinen Logo befindet nochmals und invertiere es zurück in den Ursprung (weiß). Der Modus
„Ineinanderkopieren“ bleibt hier bestehen.
Kommen wir nun zu unserer orangefarbenen runden Ecke. Diese verpassen wir auch einen Verlauf von unten nach schräg oben, in der Farbe Schwarz, und setzen diese auf „Ineinanderkopieren“. Zuletzt noch ein kleiner Verlauf von oben nach unten in der Farbe weiß. Auch hier wieder im Modus „Ineinanderkopieren“.
Beginnen wir nun damit, einen Brush in den Hintergrund zu legen. Der Brush oder auch die Pinselspitze genannt. Ich habe einen Standart Pinsel von Photoshop CS3 genommen. Mit der F5 Taste gelangt zur Erweiterten Einstellung von Pinseln. Hier fügen wir eine Streuung hinzu.
Wir positionieren den Brush jetzt etwas, das er nicht zu sehr ins Logo ragt.
Danach verpassen wir den Brush jetzt einen Schein nach außen und setzen auch hier die Füllmethode auf „Ineinanderkopieren“.
Jetzt setzen wir den Brush mit einen Filter so, dass er verzerrt wird. Dies geht über
Filter -> Weichzeichnungsfilter -> Bewegungsunschärfe.
Im nächsten Schritt kommt unser intuitive Part. Wir werden jetzt mit dem Abwedler und Nachbelichter den Hintergrund so bearbeiten, dass er nicht mehr so leer und langweilig wirkt. Soll heißen, das wir ihn an einigen Stellen heller oder dunkler machen. Der Bereich für Abwedler und Nachbelichter steht auf „Mitteltöne“. Dies könnt ihr unterhalb der Menüleiste von Photoshop einstellen, wenn Ihr den Abwedler oder Nachbelichter ausgewählt habt.
Das Gleiche machen wir auch mit der orangefarbenen Ebene. Hier nicht übertreiben, sondern einen dezenten Kontrast zur blauen Fläche Gewehrleisten.
Im letzten Schritt werden wir das Logo noch etwas positionieren und noch ein paar Verläufe einbauen, die den Gesamteindruck verbessern. Dazu geht Ihr einfach wie in Schritt 2 beschrieben mit den Pfadwerkzeug ans Werk. Wenn ihr das gemacht habt. Erstellt ihr jeh nach belieben noch eine Border (Rahmen) um das Bild. Ich bevorzuge dort sehr gerne eine weiße, und eine schwarze Border (weiß 2px nach innen, schwarz 1px nach innen) und setzen die auf? Genau – „Ineinanderkopieren“. Solltet ihr das alles gemacht haben, sollte euer Banner nun in etwa wie meiner aussehen.