Im Web ist eine gern verwendete Grafik das Post-it. Zahllose Websites greifen auf diese Grafik zurück um Inhalte visuell ansprechender zu gestalten. Denn eine Post-it-Grafik kann dezent eingesetzt Inhalte sehr ansprechend transportieren. In diesem Photoshop Tutorial zeige ich dir in drei einfachen Schritten, wie du eine Post-it-Vektor-Grafik in Photoshop selbst erstellst.
1. Grundform erstellen
Über die obere Menüleiste den ersten Menüpunkt Datei öffnen und über den Menüunterpunkt Neu… ein neues Dokument mit Breite 600px und Höhe 600px öffnen.
Erstelle eine Neue Gruppe .
1. Neue Ebene erstellen.
2. Über die linke Werkzeugleiste das „Rechteck-Werkzeug“ wählen.
Mit gedrückter Shift-Taste ein Quadrat aufziehen.
Doppelklick auf Ebene Form 1 um den Ebenenstil-Dialog zu öffnen und Werte für Verlaufsüberlagerung aus der folglichen Grafik übernehmen. Danach die Einstellungen mit den OK-Button bestätigen.
Den Menüpunkt Bearbeiten öffnen und über Pfad transformieren das Verkrümmen-Werkzeug aktivieren.
Ankerpunkt unten rechts fassen und leicht nach innen krümmen. Mit Enter-Taste bestätigen.
2. Schatten erstellen
Ebene Form 1 mit Tastenkombination Strg und J kopieren.
Ebene Form 1 umbennen in Schatten. Ebene Schatten mit Tastenkombination Strg und T in Transformations-Modus setzen.
- Das Icon Seitenverhältnis erhalten klicken.
- Höhe oder Breite auf 90% einstellen.
Mit Enter-Taste bestätigen.
1. Ebeneneffekte deaktivieren. Dazu auf das Icon Sichtbarkeit aller Ebeneneffekte aktivieren/deaktivieren klicken.
2.Doppeklick auf die Ebenenminiatur von Ebene Schatten. 3. Farbwert #000000 (schwarz) einstellen und mit OK bestätigen. Darauf achten, dass Ebene Schatten aktiviert ist (blau markiert).
Den Menüpunkt Bearbeiten öffnen und über Pfad transformieren das Verkrümmen-Werkzeug aktivieren.
Den rechten unteren Ankerpunkt soweit herausziehen, bis die gewünschte Schatten-Position erreicht ist.
Ebene Schatten mit rechtem Mausklick (PC) klicken und In Smart-Objekt konvertieren wählen.
Menüpunkt Filter öffnen und über Weichzeichnungsfilter den Filter Gaußscher Weichzeichner wählen.
Radius 9 Pixel wählen und mit Ok bestätigen.
Deckkraft von Ebene Schatten auf etwa 45% einstellen.
3. Klebestreifen erstellen
Ebene Form 1 Kopie mit Tastenkombination Strg und J kopieren.
Ebene Form 1 Kopie 2 umbennen in Klebestreifen.
Ebene Klebestreifen markieren und über die linke Werkezeugleiste das Ankerpunkt-hinzufügen-Werkzeug wählen.
Mit Strg und R Lineale einblenden und eine horizontale Hilfslinie aufziehen. Mit Ankerpunkt-hinzufügen-Werkzeug an den linken und rechten Schnittpunkten neuen Ankerpunkt hinzufügen.
Über die Werkezeugleiste Ankerpunkt-löschen-Werkzeug wählen.
Die unteren Ankerpunkte entfernen.
Über die Werkezeugleiste Punkt-umwandeln-Werkzeug wählen.
Die Ankerpunkte in Punkte umwandeln. Dazu die Ankperpunkte auf den Schnittpunkten anklicken.
1. Ebeneneffekte von Ebene Klebestreifen deaktivieren. Dazu auf das Icon Sichtbarkeit aller Ebeneneffekte aktivieren/deaktivieren klicken.
2. Doppeklick auf die Ebenenminiatur. 3. Farbwert #000000 (schwarz) einstellen und mit OK bestätigen.
Deckkraft von Ebene Klebestreifen auf 2% einstellen.
Post-it beschriften
Über die Werkzeugleiste Horizontales Text-Werkzeug (T) wählen und gewünschten Text in das Textfeld einfügen.
Post-it natürlich positionieren
1. Gruppe 1 markieren und mit Strg und T das Transformations-Werkzeug aktivieren. 2. Gruppe 1 in gewünschte Position drehen und mit Enter-Taste bestätigen.
Ergebnis
Hinweis: die Post-it-Vektor-Grafik lässt sich beliebig skalieren. Die Ebene Schatten wurde mit 9 Px weichgezeichnet und bleibt auch beim skalieren auf 9 Pixel. Beim skalieren der Grafik empfielt es sich über Ebene Schatten den Gaußschen Weichzeichner in seinem Pixelradius zu bearbeiten.
Ich hoffe dieses Photoshop-Tutorial hilft dir dabei deine eigene Post-it Vektorgrafik zu erstellen. Bei Fragen oder Anregeungen zum Thema Vektorgrafiken erstellen in Photoshop, schreibe einfach ein Kommentar.
Vielen Dank für das sehr gut erklärte Tutorial, Du hast mir damit sehr weitergeholfen.
Danke
Hallo,
tolles Tutorial, endlich mal verständlich auch für Laien erklärt.
Vielen Dank!
Vielen Dank! Super Anleitung!