von Dirk Metzmacher

Ornamente sind abstrakte Formen und florale Elemente wie Blumen- oder Fantasiemuster, die nicht nur Kirchen und Stoffe schmücken, sondern vermehrt die Gestaltung von Webseiten aufwerten. Zahlreiche ornamentale Variationen erzeugen wir mit Photoshop.

Hintergrund und Grundlage
Für das erste Beispiel werden einige Werkzeugspitzen und Texturen benötigt. Passende Oberflächen findet man etwa auf TextureKing, The Photoshop Roadmap oder www.bittbox.com. Schöne Pinselvorgaben auf Brusheezy oder im Artikel 100 awesome high resolution photoshop brushes. Bevor diese Add-ons allerdings zum Einsatz kommen, wird die Hintergrundebene über »Bearbeiten ↔ Fläche füllen« mit der Farbe #220f00 (RGB 34, 15, 0) gefüllt, dann auf einer neuen Ebene, die über »Ebene ↔ Neu ↔ Ebene« oder schneller über Umschalt+Strg+N erstellt wurde, mit einem sehr großen und weichen Pinsel und #553300 (RGB 85, 51, 0) als Vordergrundfarbe in einer Ecke etwas gemalt, um einen leichten Verlauf zu erzeugen.

Über diesem Hintergrund wird eine Textur auf einer eigenen Ebene abgelegt, in der Ebenenpalette die Füllmethode auf »Ineinanderkopieren« umgestellt und über die Ebenendeckkraft das Erscheinungsbild gesteuert. Die Grundlage für die Info-Box.entsteht mit dem Abgerundeten-Rechteck-Werkzeug, welches in den Optionen auf »Formebenen«, auf die Farbe #ffeeaa (RGB 255, 238, 170) und auf einem Radius von etwa 5 Pixel eingestellt wurde.

Grundlage: Info-Box

Rahmen und Texturen
Für den Rahmen kopiert man die Grundlage über »Ebene ↔ Neu ↔ Ebene durch Kopie« oder Strg+J und verkleinert die Fläche über »Bearbeiten ↔ Transformieren« oder Strg+T. Der »Ebenenstil ↔ Kontur« mit Größe 1 Pixel, Position: Innen und schwarzer Farbe sorgt nun für den Rahmen. Tipp: Wer nur den Ebenenstil, nicht aber den Ebeneninhalt sichtbar präsentieren möchte, der setzt die »Fläche« in der Ebenenpalette auf 0%. Nachdem die beiden obersten Ebenen mit einem Klick bei gedrückter Strg-Taste auf den Ebenennamen ausgewählt und über Strg+E zusammengefügt wurden, positioniert man eine passende Textur darüber. Diese wird über die  »Ebene ↔ Schnittmaske erstellen« an die Form angepasst. Hier wurde eine auf alt getrimmte Papieroberfläche verwendet.

Texturen sorgen unkompliziert für realistische Oberflächen

Schmutz und Licht
Jetzt werden schmutzige Grunge-Pinsel benötigt, die von einer der oben genannten Quellen herunter geladen werden können. Eine Werkzeugspitze kann man schnell in der Auswahl der Pinselvorgaben laden und dort abrufbereit halten. Man findet diesen Punkt in den Optionen des Pinsel- oder Buntstift-Werkzeugs. Dort sieht man oben weiter rechts einen kleinen, schwarzen Pfeil. Wird der angeklickt, öffnet sich eine Liste, über die verschiedene Aktionen in Bezug auf die Pinselvorgaben durchgeführt werden können. Über »Pinsel laden…« kann der aktuellen Auswahl eine oder mehrere Pinselvorgaben hinzugefügt werden. »Pinsel ersetzen« dagegen tauscht die aktuelle Auswahl gegen ein anderes Set aus.

Auf verschiedenen Ebenen wurde hier der Schmutz eingezeichnet. Mal stand die Füllmethode auf »Ineinanderkopieren«, mal auf »Multiplizieren«, so dass der Schmutz wie mit dem Untergrund verbunden wirkt. Eine weitere Grundlage wird wieder mit dem Abgerundeten-Rechteck-Werkzeug erstellt, darüber ein Bild positioniert und per Schnittmaske an die Form angepasst. Wer die Lichtstimmung beeinflussen möchte, der erstellt eine weitere Ebene, ändert die Füllmethode auf »Ineinanderkopieren« ab und malt mit Schwarz und Weiß Schatten und Licht über die Texturen. Die Ebenendeckkraft regelt hierbei die Stärke der neuen Lichtstimmung.

Grundlage im Grungestil

Florale Elemente
Die passenden Werkzeugspitzen vorausgesetzt, muss man nur noch auf einer weiteren Ebene, die unter den Ebenen der Info-Box liegen sollte, die floralen Elemente einfügen. Hier wurde die Farbe #ddcc77 (RGB 221, 204, 119) verwendet. Soll noch etwas »Feenstaub« um die Ornamente schweben, erstellt man eine Ebene und zeichnet darauf mit dem Pinsel-Werkzeug ein paar Flecken ein, die sich dank der Füllmethode »Sprenkeln« und einer sehr niedrigen Ebenendeckkraft in feine Punkte verwandeln. Der Text und die Linien sollten möglichst per XHTML und CSS umgesetzt werden.

Ergebnis mit Pflanzenmuster

2. Schattenriss-Ornamente

Hintergrund und Menüleiste
Nachdem der Hintergrund mit #668822 (RGB 102, 136, 34) gefüllt wurde, sorgt man mit Texturen und Grunge-Brushes dafür, dass die Oberfläche nicht ganz so glatt und sauber wirkt. Auf einer neuen Ebene wurden hier mit der Farbe #ccee44 (RGB 204, 238, 68), dem Pinsel-Werkzeug und einer weichen Werkzeugspitze einige Highlights eingezeichnet, die man mit dem »Gaußschen Weichzeichner« abschwächen kann. Auf einer weiteren Ebene wählt man mit dem Auswahlrechteck-Werkzeug einen Bereich aus und füllt die Selektion mit Schwarz. Nach einem Klick auf »Ebene ↔ Ebenenmaske ↔ Alles einblenden« kann mit Hilfe der Grunge-Pinsel die Grundlage für das Menü bearbeitet werden. Ein »Schlagschatten« hebt diese Fläche etwas vom Hintergrund ab.

Vorbereitet für die floralen Elemente

Schwarze Ornamente
Auf mehreren Ebenen habe ich im Anschluß mit den passenden Pinselvorgaben und schwarzer Farbe die floralen Elemente eingezeichnet, die als Schattenriß oder Silhouette über dem Hintergrund liegen. Bei einzelnen Ebenen wurde die Deckkraft minimiert und die Füllmethode auf »Ineinanderkopieren« umgestellt. Am Rand soll eine alte Postkarte das Menü abschließen. Die Grundform wählt man mit dem Polygon-Lasso aus, füllt die Selektion auf einer neuen Ebene mit Weiß und sorgt noch für etwas künstlichen Schmutz.

Pflanzen wachsen in das Bild hinein

Postkarte und Text
Die große Überschrift war schnell geschrieben, doch nicht gut lesbar, weshalb etwas Licht darüber den Schriftzug hervorheben sollte. Auf einer Ebene, deren Füllmethode von »Normal« auf »Ineinanderkopieren« umgestellt wurde, zeichnet man dazu mit weißer Farbe und einer Werkzeugspitze im »Ornamenten-Stil« ein Muster ein, das durch die Deckkraft abgeschwächt werden kann. Um die Postkarte auch wie eine solche wirken zu lassen, legt man einen Stempelabdruck und eine Briefmarke als Ebene über der Grundlage ab und passt die Form per Schnittmaske an. Auch hier sollte der kleinere Text vom Menü per XHTML und CSS umgesetzt werden.

Zahlreiche Elemente sorgen für ein stimmungsvolles Ergebnis

3. Schwarz-Weiß-Kontrast

Ornamente aus dem Hintergrund
Eine schöne Alternative zu den Ornamenten, die für sich stehen, könnten florale Elemente bieten, die aus dem Hintergrund in ein Foto hineinragen. Dazu wird über dem Bild eine neue Ebene erstellt, auf der in der Farbe des Hintergrunds die Zeichnungen gemalt werden. Damit der Text gut lesbar bleibt, reduziert man die Ebenendeckkraft stellenweise auf etwa 20% bis 30%. So wirkt der Hintergrund ruhig und doch nicht langweilig.

Harter Kontrast dank schwarz-weißen Bildelementen

4. Regenbogen-Ornamente

Grundlage
Die Grundlage in diesem Beispiel besteht aus einem guten dutzend Ebenen, auf denen einzelne Elemente abgelegt und so positionert wurden, dass etwa 50% des Dokuments bedeckt sind. Ist man mit der Aufteilung zufrieden, reduziert man die Ebenen mit den Ornamenten auf eine Ebene. Dazu wird die oberste Ebene aktiviert, die Shift-Taste gedrückt gehalten und auf den Ebenennamen der untersten Ebene mit einem Blumenelement geklickt. »Ebene ↔ Auf eine Ebene reduzieren« oder Strg+E lässt die Ebenen zu einer einzigen verschmelzen.

Formen für den Regenbogenverlauf

Regenbogenverlauf
Über der Ebene, die für die Form zuständig ist, erstellt man eine Ebene für die Farben. Hier wurde die Fläche mit einem Regenbogenverlauf gefüllt. Ein Klick auf »Ebene ↔ Schnittmaske erstellen« oder das Klicken mit gedrückter Alt-Taste auf die Kante zwischen den beiden Ebenen reicht aus, um die Farben nur über den Formen sichtbar werden zu lassen.

Farbenfrohe Variante

Wer mag, kann auf einer weiteren Ebene mit dem Auswahlrechteck einen Bereich auswählen, mit einem dunklen Grau füllen und die Ebenendeckkraft etwas minimieren. Auch das Umstellen der Füllmethode auf »Multiplizieren« könnte den Effekt unterstützen, dass das Element halbdurchsichtig wirkt und so zum idealen Hintergrund für eine große Überschrift wird. (tm)

Erstveröffentlichung 03.03.2008

Verwandte Artikel

• Zielgruppengerechte Farbwahl (0) €
• X-Text (0)
• Wer braucht Dreamweaver CS4? (28)
• Weihnachtskarte im Retro-Stil (3)
• Weihnachtsbaum aus dem Pixelwald (1)
• Weihnachten mit Photoshop: Zuckerstange (0)
• Weihnachten mit Photoshop: Weihnachtskugel (1)