Formschöne Shapes in Photoshop

von Fabian Ziegler | 2 | 17 Kommentare | 27151 Aufrufe

Anzeige Hier werben

Die hier erstellten Formen lassen sich besonders für die Aufpeppung von Webseitengrafiken & Vektorgrafiken und die dezente Unterstützung von digitalen Kunstwerken einsetzen. Nachbearbeitet können die gestalterisch sehr ansprechenden Figuren natürlich auch für sich alleine stehen.

Geschwungene Form mit Nachbearbeitung

Hinsichtlich dem atemberaubendem Ergebnis hält sich der Arbeitsaufwand für die Erstellung solchen Figuren in Grenzen, besonders, wenn man bedenkt das die Technik sehr vielseitig und variabel angewendet werden kann.

Datei anlegen

Legen Sie in Photoshop eine neue Datei der Größe 800x500 Pixel an. Füllen Sie die Hintergrundfarbe mit Schwarz. Erstellen Sie nun eine neue Ebene über die Ebenenpalette (Shortcut: Strg + Shift + N).

Pfad zeichnen

Mit Hilfe des Zeichenstiftwerkzeugs (Shortcut: p) erstellen wir nun schönen, gescwugenen Pfad in unserer Datei. Wichtig, achten Sie darauf, dass ihr Zeichenstiftwerkzeug auf "Pfade" und nicht auf "Formebene" eingestellt ist, wie im Screenshot unterhalb.

Erweiterte Einstellungen für das Zeichenstift-Werkzeug

Setzen Sie nun nach und nach die Ankerpunkte für Ihren Pfad, so dass dieser durchgehend abgerundet ist und keine Ecken entstehen. Meist ist so eine Erstellung auf den ersten Anlauf nicht möglich und der Pfad muss nach der Erstellung noch mit dem Direkt-Auswahl-Werkzeug (Shortcut: Strg + a) nachkorrigiert werden. Damit lässt sich jeder Ankerpunkt nach der Erstellung nochmals anpassen. Meine erstellt Form sieht dabei wie folgt aus:

Pfadform

Pinsel einstellen

Ziel ist es diesen Pfad nun mit einer dünnen Pinselgröße nachzuzeichnen unter Berücksichtung des simulierten Pinseldrucks. Rufen Sie Ihr Pinselwerkzeug auf (Shortcut: b) und stellen Sie die Größe des Pinsels auf 3 Pixel, sowie die Härte auf 80%.

Pinseleinstellungen

Nun wechseln Sie in die erweiterten Einstellungen des Pinselwerkzeugs, die sich in der Optionsleiste des Pinsel ganz rechts befinden (Shortcut: F5).

Werkzeugleiste des Pinsels

In diesem Bereichen müssen wir nun noch die Glättung für unseren Pinsel aktivieren, sowie unter dem Punkt "Formeigenschaften" bei der Steuerung im Popdown-Menu "Zeichenstift-Druck" auswählen.

erweiterte Einstellungen für den Pinsel

Pfadkontur füllen

Im folgenden Schritt werden wir unsere Pfadkontur füllen. Stellen Sie zuerst Ihre Vordergrundfarbe auf Weiß und rufen Sie dann das "Direkt-Auswahl-Werkzeug" auf (Shortcut: a). Stellen Sie sicher, dass Sie sich auf Ihrer neu erstellen Ebene befinden und nicht auf der Hintergrundebene. Klicken Sie damit Ihren Pfad an und wählen Sie dann nach Klick der rechten Maustaste im aufgehenden Menu "Pfadkontur füllen". Setzen Sie den Haken bei "Druck simulieren" und als Werkzeug im Popdown-Menu den "Pinsel". Bestätigen Sie mit "OK".

Pfadkontur füllen

Blenden Sie durch die Tastenkombination "Strg + H" nun Ihren gezeichneten Pfad aus oder löschen Sie den Pfad durch einen Rechtsklick mit dem Direkt-Auswahl-Werkzeug.

Photoshop Aktion erstellen

Über das Menu "Fenster -> Aktionen" rufen Sie nun die Aktionenpalette auf, falls diese noch nicht geöffnet ist (Shortcut: F9). Über das kleine Icon unten rechts in der Palette erstellen Sie eine neue Aktion

Neue Aktion erstellen

Bennen Sie Ihre Aktion "Shape" und klicken Sie "Aufzeichnen". Ab nun werden alle Ihre Schritte von Photoshop mitprotokolliert. Duplizieren Sie Ihre Ebene mit der gefüllte Kontur, in dem Sie die Ebene in der Ebenenpalette auf das kleine Icon zur Erstellung einer neuen Ebene ziehen. Schneller geht es jedoch mit "Strg + J" bei entsprechend angewählter Ebene.

Jetzt wird die duplizierte Ebene transformierte. Verschieben Sie zuerst diese Ebene mit der Pfeiltaste um drei Pixel nach oben (3-maliges Anschlagen der Pfeiltaste). Anschließend wird über "Bearbeiten -> Frei Transformieren", dass Werkzeug für Transformationen aufgerufen. In der oberen Werkzeugeleiste wird der Winkel für die Rotation händisch auf 0,40° gestellt. Bestätigen Sie Ihre Eingabe durch klicken des Häkchens ganzs rechts in der erweiterten Werkzeugleiste.

Werkzeugleiste der Transformation

Anschließend wird die Aufzeichnung unserer Aktion durch Drücken des "Aufzeichnung beenden" Buttons in der Aktionenpalette gestoppt, so dass weitere Schritte nicht mehr mitprotokolliert werden.

Stoppen der Aufzeichnung

Tipp - Verschieben des Ankerpunkts

Tipp: Oft erhält man bessere Ergebnisse, wenn man den Ankerpunkt der beim Aufruf des Transformieren-Werkzeugs in der Mitte liegt, vor der Transformation an einen anderen Punkt verschiebt, als dem Mittelpunkt.

Aktion aufrufen

Jetzt ist es an der Zeit unsere eigene erstellte Funktion aufzurufen. Dies erfolgt durch einfaches Klicken des "Play-Buttons" in der Aktionenpalette. Rufen Sie diese Aktion 20-30 Mal durch mehrfaches klicken des Play-Buttons auf. Unsere Figur wurde nun erstellt.

Ebenen zusammenführen

Markieren Sie nun mit gedrückter Shift-Taste in der Ebenenpalette alle Ihre Formebenen und drücken Sie die Tastenkombination Strg + E, dadurch werden sämtliche markierte Ebenen auf eine Ebene zusammengerechnet. Nach allen Schritten erhalten wie folgendes Ergebnis, welches sich durch einige kurze Handgriffe nochmals in Form bringen lassen.

Fertige Form

Form aufpeppen

Die fertige Form kann jetzt für unterschiedlichste Bereiche eingesetzt werden, sowie nochmals farblich und gestalterisch aufgebessert werden. Unterhalb sehen Sie eine Grafik die durch Nachbearbeitung mittels Hintergrundfarbe, Maskierung, Duplizieren und Ebenenmodi mit dieser Form erstellt wurde.

Ich würde mich freuen, wenn Sie Ihre eigenen Ergebnisse auch in den Kommentaren unterhalb präsentieren würden. Beispielsweise als Bild hier in der Galerie auf Webmasterpro.

Fertige Grafik

Über den Autor: Fabian Ziegler

Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
Profilseite betrachten

Webdesign, Tutorials und mehr - Webmasterpro.de

Tutorials

Ressourcen

Design Partner

Unsere Sponsoren