Papier ist als Informationsträger immer noch gebräuchlich, so dass eine Simulation im Webdesign für etwas Vertrautheit und auch Wärme sorgen kann. Dezent eingesetzt, können Buchhintergründe oder ein Blätterstapel als Grundlage für die nostalgische Gestaltung von Inhalten oder Menüführung dienen.

Zwei Seiten: 1. Hintergründe

Der Hintergrund wird über »Bearbeiten ↔ Fläche füllen« mit der Farbe #665544 (RGB 102, 85, 68) gefüllt. Darüber entsteht die Grundlage für die Inhalte auf einer eigenen Ebene, die man über Umschalt+Strg+N erzeugt hat. Mit dem Auswahlrechteck wird die Fläche erst selektiert und dann mit der Farbe #ddddcc (RGB 221, 221, 204) gefüllt.

Man hebt die Auswahl auf und aktiviert den »Ebenenstil ↔ Schlagschatten« mit Abstand: 2 Pixel und Größe: 10 Pixel. Eine Kontur mit Größe: 1 Pixel und der Farbe: #aaaa99 (RGB 170, 170, 153) hebt die Fläche weiter vom Hintergrund ab. Mit der gleichen Technik entsteht auch der Hintergrund für das Menü, hier jedoch in der Farbe #ffeedd (RGB 255, 238, 221). Eine weitere Fläche für die Inhalte sorgt für etwas Abwechslung.

2. Zusammenhalt

Eine Kopie dieser Komposition wird über »Bearbeiten ↔ Transformieren« gedreht und unter dem Original positioniert. Man könnte dazu die erste Ebene aktivieren, so dass diese blau hinterlegt ist und dann mit gedrückter Shift-Taste die unterste Ebene anklicken. Die Ebenen wurden ausgewählt und können nun etwa über »Ebene ↔ Auf eine Ebene reduzieren« zusammengefügt werden. Die Kopie entsteht schnell über Strg+J.

Die einzelnen Ringe sorgen für einen "Zusammenhalt" der Blätter. Zunächst werden zwei Löcher eingezeichnet. Mit der Auswahlellipse und gedrückter Shift-Taste zieht man dazu den ersten Kreis auf und füllt diesen auf einer eigenen Ebene mit schwarzer Farbe. Es folgt der zweite Kreis. Für den Ring bedarf es etwas künstlerischen Geschicks beim Zeichnen oder es wird einfach ein entsprechendes Element aus einem Bild freigestellt, was auch hier so gemacht wurde.

3. Inhalte

Das Menü besteht aus einzelnen Kästchen, die auf einer eigenen Ebene mit dem Auswahlrechteck selektiert und mit der Farbe #bbaa99 (RGB 187, 170, 153) gefüllt werden. Nicht zusammenhängende Auswahlen können übrigens mit gedrückter Shift-Taste erzeugt werden. Mit dem Text-Werkzeug schreibt man die einzelnen Menüpunkte sowie als „Deko“-Elemente einige größere Buchstaben. Weitere Inhalte folgen.

So ist etwa eine Liste entstanden, die im Hintergrund ein helles Grau einsetzt, um die Inhalte besser zu trennen. Dazu können auch feine Linien eingesetzt werden, die man auf einer eigenen Ebene mit dem Buntstift, der kleinsten Werkzeuggröße und gedrückter Shift-Taste von Hand einzeichnen kann.

Buchgrundlage: 1. Form

Die Hintergrundebene wird mit der Farbe #554e4e (RGB 85, 78, 78) gefüllt, dann auf einer neuen Ebene eine hellgraue Fläche mit dem Rechteck-Werkzeug aufgezogen. In der Optionsleiste wurde dazu »Pixel füllen« aktiviert. Mit gedrückter Strg-Taste klickt man auf die Ebenenminiatur, um den Inhalt der Ebene zu selektieren.

Die Vordergrundfarbe wird auf #aa9988 (RGB 170, 153, 136) eingestellt, dann »Bearbeiten ↔ Kontur füllen« mit den Werten Breite: 4 Pixel und Position: Innen eingesetzt. Alternativ könnte auch der »Ebenenstil ↔ Kontur« verwendet werden.

2. Inhaltsflächen

Auf eigenen Ebenen, die man sehr schnell über den Button »Neue Ebene erstellen« in der Ebenenpalette erzeugen kann, entstehen weitere Flächen. Auf der linken Seite zwei weiße Kästchen, auf der rechten Seite ein größerer Kasten. Dieser wird mit einem Verlauf ausgestattet, so dass die Seite etwas räumlicher wirkt.

Die Vordergrundfarbe wurde dazu auf #dddddd (RGB 221, 221, 221) gestellt, die Hintergrundfarbe auf Weiß. Man könnte nun den »Ebenenstil ↔ Verlaufsüberlagerung aktivieren« und den Verlauf auf Vordergrund-Hintergrund einstellen. Den Winkel setzt man auf 0 Grad, Skalieren auf 110%.

3. Umgeknickte Ecke

Auf einer weiteren Ebene wird mit dem Polygon-Lasso ein Dreieck ausgewählt, dessen Form als umgeknickte Seite dienen soll. Gefüllt wird die Auswahl mit einem Verlauf von #e7e7e7 (RGB 231, 231, 231) nach #cacaca (RGB 202, 202, 202). Das nun „gegenüberliegende Dreieck“, welches die nächste Seite bildet, wird etwas dunkler eingefärbt. Ein Schlagschatten sorgt noch für einen leichten 3D-Effekt. Die Inhalte können nun eingefügt werden.

Grunge-Grundlage: 1. Abgerissene Blätter

Der Hintergrund wird mit der Farbe #334444 (RGB 51, 68, 68) gefüllt, dann die Form der großen Seite auf einer eigenen Ebene mit dem Auswahlrecht selektiert. Die Auswahl füllt man mit der Farbe #ffeecc (RGB 255, 238, 204). Diese wird aufgehoben und der »Ebenenstil ↔ Schlagschatten« mit der Deckkraft: 20%, Abstand: 5 Pixel und Größe: 5 Pixel aktiviert.

Auf gleiche Weise entsteht die kleinere Seite für das Menü. Allerdings werden hier nachträglich Ecken „herausgerissen“. Dazu wählt man einfach mit dem Polygon-Lasso Bereiche aus und löscht diese mit der Entfernen-Taste. Über den Blättern werden Texturen positioniert und diese mit »Ebene ↔ Schnittmaske erstellen« an die Form der Seiten angepasst. Solche Texturen findet man zum Beispiel in unserem Beitrag 100 wunderschöne kostenlose Texturen.

2. Weitere Seiten

Die Ebenen der rechten Seite werden ausgewählt, kopiert und auf eine Ebene reduziert. Dazu wählt man zunächst die Ebenen mit der Form an, dann mit gedrückter Strg-Taste die Ebene mit der Textur. Diese beiden Ebenen zieht man in der Palette auf den Button »Neue Ebene erstellen« Im Menü klickt man auf »Ebene ↔ Auf eine Ebene reduzieren«. Diese Kopie soll hinter dem Original eine weitere Seite simulieren. Weitere Kopien sorgen dann für einen kleinen Papierstapel.

3. Inhalte

Die Inhalte werden eingefügt. Um diese abzugrenzen, wurden hier gestrichelte Linien eingesetzt. Für diese erstellt man eine eigene Ebene und zeichnet mit dem Buntstift-Werkzeug und der kleinsten Werkzeugspitze eine drei Pixel Breite Linie ein, lässt zwei Pixel Platz und zeichnet eine weitere drei Pixel Breite Linie. Diese Ebene kann man öfters kopieren, positionieren und die gesamte Linie dann auf eine Ebene reduzieren. (tm)

Verwandte Artikel

• Weihnachtsbaum aus dem Pixelwald (1)
• Weihnachten mit Photoshop: Zuckerstange (0)
• Weihnachten mit Photoshop: Weihnachtskugel (1)
• Weihnachten mit Photoshop: Stechpalme (0)
• Weihnachten mit Photoshop: Lichterkette (0)
• Weihnachten mit Photoshop: Kerze (0)
• Webdesign mit Photoshop (0)