Ob Blog, Magazin oder Portfolio: Kreative präsentieren ihre Werke im Netz und da soll schon das Design der Website zeigen, was Sache ist. Bei der Gestaltung ist allerdings die Regel, dass der Hintergrund zwar interessant wirken soll, jedoch nicht mit dem Portfolio des Künstlers, den Texten und Bildern der Homepage, konkurrieren darf. Es gibt also einiges zu beachten, was wir in diesem Beitrag veranschaulichen möchten.

Informationen

Schwierigkeitsgrad: 3 von 6
Bildmaterial: Eigenes, Stockmaterial
Werkzeuge im Einsatz: Auswahlrechteck, Pinsel, Masken, Zeichenstift, Color Lookup

Du lernst:

  • Erweiterung eines Hintergrunds
  • Himmel dramatisch umsetzen
  • Farben gezielt verändern
  • Freistellen

Background-Tipp #1: Hintergrund erweitern

Eine Komposition in Photoshop beginnt oft mit einem einfachen Hintergrundbild. Oftmals passt der nicht so ganz zur Größe des Dokumentes, das gefüllt werden soll, und so ist der erste Bearbeitungsschritt die Erweiterung des Fotos. Gehe dazu im Menü auf Bearbeiten > Inhaltsbasiert skalieren und ziehe die Fläche größer auf. Soll nur ein Teil des Fotos vergrößert werden, so wählen diesen zuvor mit dem Auswahlrechteck-Werkzeug aus.

So habe ich hier etwa den Himmel nach oben hin erweitert. Das Tastenkürzel Strg+D hebt dann die Auswahl auf. Auf einer neuen Ebene, schnell erstellt über Umschalt+Strg+N, habe ich nach Strg+A zur Auswahl des kompletten Dokumentes, über Bearbeiten > Kontur füllen einen Rahmen erzeugt. Breite und Farbe kannst du dabei frei wählen. Die Position sollte aber zwingen auf Innen stehen.

Info: Inhaltsbasiert skalieren bietet sich immer dann an, wenn ein Bildobjekt natürliche Strukturen zeigt, wie etwa Wolken, Gras oder Sand. Photoshop erweitert oder verkleinert dann fast magisch, was natürlich auch seine Grenzen hat. Ganz abzuraten ist diese Funktion bei sichtbaren Mustern.

Die Basis leicht vergrößert

Background-Tipp #2: Dramatischer Himmel

Um den Himmel weitaus dramatischer zu gestalten, habe ich gleich drei verschiedene Himmelsstrukturen darüber gelegt (jedoch unterhalb der Ebene mit dem Rahmen), jeweils auf eigenen Ebenen. Um diese miteinander zu verrechnen bieten sich Füllmethoden wie etwa Ineinanderkopieren, Weiches Licht oder (Negativ) multiplizieren an, die im Ebenenbedienfeld über den Mischmodus (Füllmethode) schnell definiert werden können. Sind die Farben zu stark, so reduziere diese über Bild > Korrekturen > Farbton/Sättigung und dem Sättigungsregler.

Himmel dramatischer gestaltet

Background-Tipp #3: Farben gezielt definieren

Möchtest du die Farben im Bild gezielt und punktgenau verändern, so erzeuge eine neue Ebene und stelle für diese die Füllmethode von Normal auf Farbe um. Wähle dann die gewünschte Farbe als Vordergrundfarbe und male mit dem Pinsel und einer großen Werkzeugspitze über die gewünschte Stellen. So habe ich hier etwa den Himmel blauer umgesetzt, dass Meer dagegen etwas bräunlicher. Photoshop ist natürlich egal, was koloriert wird und so könntest du auch Augen oder Haare umfärben oder aus einer roten eine blaue Tomate machen.

Farben gezielt beeinflusssen

Background-Tipp #4: Bäume als Rahmen

In diesem Beispiel möchte ich auf beiden Seiten Bäume als eine Art Rahmen einfügen. Dazu ist etwas Freistellungsarbeit nötig. Gehe im Hauptmenü auf Ebene > Ebenenmaske > Alle einblenden. Aktiviere das Buntstift-Werkzeug, stelle die Vordergrundfarbe auf Schwarz ein und male mit einer recht großen Werkzeugspitze über die Bereiche, die transparent werden sollen.

Bäume grob freigestellt

Tipp: Innerhalb einer Maske bedeutet die Farbe Weiß eine Sichtbarkeit von 100%, die Farbe Schwarz eine Sichtbarkeit der Pixel von 0%.

Die Feinheiten möchte ich mit dem Zeichenstift freistellen, der so einige Vorteile im Vergleich zum Polygon-Lasso bietet. So schließt sich der Pfad nicht durch zu schnelles Klicken. Auch kannst du Zwischendurch ein anderes Werkzeug einsetzen. Wird der Zeichenstift dann wieder aktiviert, kann die Arbeit fortgesetzt werden.

Zuvor stellst du aber in der Optionsleiste den Werkzeugmodus auf Pfad, aktivierst über das Zahnrad Gummiband und daneben Autom. hinzuf./löschen. So vorbereitet geht es nun an die Details.

Bäume feiner freigestellt und positioniert

Mit dem Zoom-Werkzeug rufst du einen Abschnitt am Übergang des Hintergrundes zum Bildelement groß auf. Aktiviere den Zeichenstift und gehe Punkt für Punkt an der Kante entlang. An großen Kurven kannst du auch eine längere Strecke auswählen und die Kurve durch Anklicken, Halten und Bewegen der Maus nachzeichnen. Schließe den Pfad immer wieder nach außen hin und drücke Strg+Eingabetaste für eine Selektion. Bei schwarzer Hintergrundfarbe drückst du dann die Entfernentaste. Strg+D hebt die Auswahl auf.

Tipp: Nach einer Kurve möchte Photoshop gerne eine weitere Kurve aufziehen. Soll aber eine gerade Linie folgen, so muss der zuletzt gesetzte Punkt bei gedrückter Alt-Taste angeklickt und damit neutralisiert werden.

Background-Tipp #5: Landschaft einfügen

Nach der Bearbeitung wurden die Bäume links und rechts als eine Art rahmen positioniert. Mit gleicher Freistellungstechnik habe ich für die linke und rechte Seite noch zwei Landschaftsbereiche ausgeschnitten und so eingefügt, dass diese Ebenen hinter der Ebene mit den Bäumen liegen. Um im Ebenenbedienfeld die Reihenfolge zu verändern reicht es aus, die Ebene anzuklicken, die Maustaste zu halten und die Ebene nach oben oder unten zu bewegen. (übrigens: das schöne UFO war in der genutzten Aufnahme schon vorhanden)

Landschaftsstücke eingefügt

Background-Tipp #6: Steine mit Schatten

Es folgen einige Steine, die dank der Größe und der gestapelten Anordnung recht surreal wirken. Ein gewünschter Effekt, der nur noch die Einarbeitung eines Schattens verlangt, der logischer Weise durch die Bäume verursacht wird. Dazu habe ich eine neue Ebene über den Steinen erzeugt und darauf mit dem Pinsel, schwarzer Farbe und einer weichen Werkzeugspitze den Schatten einfach von Hand eingezeichnet.

Steine als Blickfang an der Seite

Background-Tipp #7: Farbstimmung

Der einfachste Weg hin zu einem coolen Farblook führt über das Menü und Ebene > Neue Einstellungsebene > Color Lookup. Hier habe ich DropBlues.RDL und FallColors.look eingesetzt. In der Maske kannst du leicht mit dem Pinsel und schwarzer Farbe bestimmen, wo der Effekt nicht ansetzen soll. Der Himmel erscheint mir nun zu farblos, weshalb ich eine der Himmelstexturen noch einmal eingefügt habe, um diesen wieder zu stärken.

Alternative: Ältere Versionen von Photoshop kennen kein Color Lookup. Da empfehle ich die Korrektur > Fotofilter.

Farblook umgesetzt

Background-Tipp #8: Platzhalter

Um zu sehen, wie der Hintergrund mit der aktuellen Website zusammen spielt, habe ich auf einer weiteren Ebene mit dem Auswahlrecht-Werkzeug einen Bereich ausgewählt, der dem Content-Bereich der Website entspricht. Die Selektion wurde mit weißer Farbe gefüllt, etwa über Umschalt+F5. Da der Hintergrund in einem Weblog eingesetzt werden soll, das sich mit Photoshop beschäftigt, wurde hier noch ein Screenshot der Toolleiste als Blickfang hinzugefügt. So ist das Thema gleich gesetzt.

Ergebnis: Hintergrundbild für ein Weblog

Die gedeckten Farben und eher schwachen Kontraste sorgen hier dafür, dass der Background für eine besondere Stimmung sorgt, statt prominent den eigentlichen Inhalten die Show zu stehlen. Genau das war unser Ziel. Natürlich soll dieses Bild nur inspirieren und die gelernten Techniken dazu anreizen, ein ganz eigenes Werk zu kreieren.