Web-Banner erstellen

In diesem Tutorial werden Sie ein Web-Banner mit Adobe Photoshop erstellen. Dabei lernen Sie grundlegende Photoshop-Techniken kennen, z. B. die Arbeit mit Formen und Ebenenstilen sowie das Exportieren eines Designs.

Mit der bereitgestellten Vorlage und den hier gezeigten Funktionen können Sie ein Banner für Ihren Blog oder YouTube-Kanal, eine E-Mail, eine Anzeige o. Ä. erstellen.

Ich beginne das Projekt mit der bereitgestellten Vorlage.Ich wähle „Datei“ > „Öffnen“ (File > Open) und navigiere zur Datei. Ich wähle sie aus und klicke auf „Öffnen“ (Open).

Im Bedienfeld „Ebenen“ (Layers) wurde eine neue Formebene mit dem eben gezeichneten Kreis erstellt.

Als Nächstes ändere ich die Farbe der Form, damit sie mehr wie ein Ei aussieht. Im Bedienfeld „Eigenschaften“ (Properties), das sich bei der Erstellung der Form geöffnet hat, klicke ich auf das Farbfeld und wähle eine Flächenfarbe für den Kreis aus.

Mit dem Verschieben-Werkzeug ziehe ich den Kreis in die Mitte des Designs. Magentafarbene Hilfslinien zeigen an, wenn die Mitte erreicht ist.

Als Nächstes füge ich mithilfe eines Ebenenstils einen Effekt zum Kreis hinzu, um ihn mehr wie ein Spiegelei aussehen zu lassen. Über Ebenenstile lassen sich Objekte mit kreativen Effekten aufpeppen, z. B. Schatten, Konturen oder Glanz.

Um einen Ebenenstil anzuwenden, muss die Ebene ausgewählt sein. Ich wähle „Ebene“ > „Ebenenstil“ > „Schatten nach innen“ (Layer > Layer Style > Inner Shadow). Im Dialogfeld kann ich alle möglichen Einstellungen für den Effekt vornehmen. Ich kann auch andere beliebte Effekte wie „Schein nach außen“ (Outer Glow) oder „Schlagschatten“ (Drop Shadow) ausprobieren.

Wenn ich mit dem Ergebnis zufrieden bin, klicke ich auf „OK“. Der Effekt „Schatten nach innen“ wird auf die Form angewendet. Er ist außerdem im Ebenen-Bedienfeld unter der Formebene aufgeführt, sodass ich ihn ein- oder ausblenden, bearbeiten und sogar löschen kann. Ich zeichne jetzt das Eigelb. Dazu brauche ich einen weiteren Kreis. Da ich schon einen Kreis mit dem richtigen Effekt habe, kann ich ihn einfach duplizieren und anpassen. Die Formebene muss im Ebenen-Bedienfeld ausgewählt sein. Ich wähle „Ebene“ > „Ebene duplizieren“ (Layer > Duplicate Layer). Ich nenne die Ebene „Yolk“ (Eigelb) und klicke auf „OK“.Ich öffne das Bedienfeld „Eigenschaften“ (Properties), indem ich auf dieses Symbol klicke. Ich klicke auf das Farbfeld und wähle einen Gelbton, mit dem ich den Kreis fülle. Dann klicke ich auf die Registerkarte „Eigenschaften“, um das Bedienfeld zu schließen.

Das Eigelb muss kleiner sein, also ändere ich die Größe. In Photoshop können Sie mit dem Befehl „Transformieren“ die Inhalte einer ausgewählten Ebene skalieren, ohne das restliche Bild zu verändern. Während die Ebene „Yolk“ und das Verschieben-Werkzeug noch ausgewählt sind, wähle ich „Bearbeiten“ > „Frei transformieren“ (Edit > Free Transform). Ich halte die Umschalttaste gedrückt, um den Kreis zu behalten, und verkleinere die Form, indem ich an einer Ecke ziehe. Ich klicke in den Transformationsrahmen und halte die Maustaste gedrückt. Dabei achte ich darauf, nicht auf das Symbol in der Mitte des Rahmens zu klicken. Dann ziehe ich den Kreis hierhin. Ich klicke auf das Häkchen in der Optionsleiste, um die Bearbeitung abzuschließen. Ich kann das Banner jetzt speichern.

Ich wähle „Datei“ > „Speichern unter“ (File > Save As). Ich stelle sicher, dass das Photoshop-Format ausgewählt und „Ebenen“ (Layers) aktiviert sind. So erhalte ich eine Datei mit Ebenen, die ich nachträglich noch bearbeiten kann. Dann klicke ich auf „Speichern“ bzw. „Sichern“ (Save).

Ich kann das Bild auch in einem Format exportieren, das sich für die Veröffentlichung auf einer Website eignet, z. B. JPEG, PNG oder auch SVG. Ich wähle „Datei“ > „Exportieren“ > „Exportieren als“ (File > Export > Export As). Im Dialogfeld „Exportieren als“ (Export As) kann ich das Dateiformat wählen, in diesem Fall „JPG“. Ich klicke auf „Alle exportieren“ (Export All) und wähle den Speicherort.

Ich könnte auch nur bestimmte Teile des Banners exportieren, z. B. nur das Ei. Zuerst muss ich die Ebenen der Eiform gruppieren, damit sie als ein Objekt behandelt werden. Im Ebenen-Bedienfeld klicke ich auf die oberste Formebene. Dann klicke ich mit gedrückter Umschalttaste auf die letzte Formebene. Ich wähle „Ebene > Ebenen gruppieren“ (Layer > Group Layers). Ich mache einen Rechtsklick auf die Ebenengruppe und wähle „Exportieren als“ (Export as). Ich kann das Bild auch in einem Format exportieren, das sich für die Veröffentlichung auf einer Website eignet, z. B. JPEG, PNG oder auch SVG. Nur die Eiform wird exportiert – ohne den restlichen Banner-Inhalt.

Weitere Informationen zum Export von Dateien aus Photoshop finden Sie in anderen Photoshop-Tutorials auf der Adobe-Website.

Mit der bereitgestellten Vorlage und Ihren neuen Kenntnissen können Sie nun eigene Banner für Blogs, E-Mails, Ihren YouTube-Kanal, Anzeigen und vieles mehr erstellen. Je mehr Sie mit Photoshop arbeiten, desto mehr Spaß macht das Programm.