Photoshop: Web Graphics – Smooth Interface Shapes

Photoshop » Web Graphics » Smooth Interface Shapes


Smooth Interface Shapes Step 1

Step 1

Neue Datei über [STRG] + [N] mit beliebigem Hintergrund erstellen.

Zwei neue Ebenen erstellen (die Ebenen in "shape1" (die untere) und "shape2" (die obere) umbenennen).

Mit den Hilfslinien kann man sich nun einen Raster erstellen den man zum späteren Ausrichten der Formen verwenden kann.

Smooth Interface Shapes Step 2

Step 2

Mit dem Zeichenstift-Werkzeug (P) nun anhand der Hilfslinien verschiedene Punkte setzen um eine geschlossene Form zu erhalten.

Anmerkung: Ich habe in den folgenden Schritten die Hilfslinien ausgeblendet, damit die Schritte besser zu sehen sind und nicht durch die Linien verdeckt werden.

Smooth Interface Shapes Step 3

Step 3

Mit dem Punkt-umwandeln-Werkzeug nun die einzelnen Punkte anklicken und nach rechts bzw. links verschieben (bei mir jeweils um 25 Pixel) damit die Kanten wie auf dem Screenshot abgebildet, abgerundet werden.

Smooth Interface Shapes Step 4

Step 4

Danach in der Ebenenübersicht rechtsklick auf die Ebene "shape1" und Ebene rastern auswählen.

Smooth Interface Shapes Step 5

Step 5

Wie in Schritt 3 verfahren wir nun auch mit der darüberliegenden Ebene "shape2".

Smooth Interface Shapes Step 6

Step 6

Nun die Ebene "shape2" wie die Ebene "shape1" in Schritt 4 rastern.

Smooth Interface Shapes Step 7

Step 7

Jetzt folgen einige Ebeneneffekt, welche auf die Ebene "shape1" angewendet werden:

Bei Abgeflachte Kante und Relief zusätzlich noch die Unteroption "Kontur" aktivieren und dort den Regler "Bereich" auf 50% einstellen.

Smooth Interface Shapes Step 8

Step 8

So schaut das ganze zum Schluss aus. Damit man sich aber etwas besser vorstellen kann, wie das ganze in der Praxis zum Einsatz kommen könnte, habe ich hier ein Anwendungsbeispiel in Form eines Seitentemplates.


Photoshop » Web Graphics » Smooth Interface Shapes

Validate XHTML Validate CSS