Photoshop: Web Graphics – Smooth Interface Shapes
 |
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. |
 |
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. |
 |
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. |
 |
Step 4 Danach in der Ebenenübersicht rechtsklick auf die Ebene "shape1" und Ebene rastern auswählen. |
 |
Step 5 Wie in Schritt 3 verfahren wir nun auch mit der darüberliegenden Ebene "shape2". |
 |
Step 6 Nun die Ebene "shape2" wie die Ebene "shape1" in Schritt 4 rastern. |
 |
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. |
 |
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. |
