Kuratierte Linksammlung für Webdesigner und -entwickler.
Vektorgrafik in Photoshop

Photoshop-Tutorial: Post-it Vektorgrafik erstellen

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.

Anzeige

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.

vektorgrafik-erstellen-post-it

Erstelle eine Neue Gruppe .

vektorgrafik-erstellen-post-it

1. Neue Ebene erstellen.

vektorgrafik-erstellen-post-it

2. Über die linke Werkzeugleiste das „Rechteck-Werkzeug“ wählen.

vektorgrafik-erstellen-post-it

Mit gedrückter Shift-Taste ein Quadrat aufziehen.
vektorgrafik-erstellen-post-it

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.

vektorgrafik-erstellen-post-it

Den Menüpunkt Bearbeiten öffnen und über Pfad transformieren das Verkrümmen-Werkzeug aktivieren.

vektorgrafik-erstellen-post-it

Ankerpunkt unten rechts fassen und leicht nach innen krümmen. Mit Enter-Taste bestätigen.
vektorgrafik-erstellen-post-it

2. Schatten erstellen

Ebene Form 1 mit Tastenkombination Strg und J kopieren.

vektorgrafik-erstellen-post-it

Ebene Form 1 umbennen in Schatten. Ebene Schatten mit Tastenkombination Strg und T in Transformations-Modus setzen.

vektorgrafik-erstellen-post-it

  1. Das Icon Seitenverhältnis erhalten klicken.
  2. Höhe oder Breite auf 90% einstellen.

Mit Enter-Taste bestätigen.

vektorgrafik-erstellen-post-it

1. Ebeneneffekte deaktivieren. Dazu auf das Icon Sichtbarkeit aller Ebeneneffekte aktivieren/deaktivieren klicken.

vektorgrafik-erstellen-post-it

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).

vektorgrafik-erstellen-post-it

Den Menüpunkt Bearbeiten öffnen und über Pfad transformieren das Verkrümmen-Werkzeug aktivieren.

vektorgrafik-erstellen-post-it

Den rechten unteren Ankerpunkt soweit herausziehen, bis die gewünschte Schatten-Position erreicht ist.
vektorgrafik-erstellen-post-it

Ebene Schatten mit rechtem Mausklick (PC) klicken und In Smart-Objekt konvertieren wählen.

vektorgrafik-erstellen-post-it

Menüpunkt Filter öffnen und über Weichzeichnungsfilter den Filter Gaußscher Weichzeichner wählen.

vektorgrafik-erstellen-post-it

Radius 9 Pixel wählen und mit Ok bestätigen.

vektorgrafik-erstellen-post-it

Deckkraft von Ebene Schatten auf etwa 45% einstellen.

vektorgrafik-erstellen-post-it

3. Klebestreifen erstellen

Ebene Form 1 Kopie mit Tastenkombination Strg und J kopieren.

vektorgrafik-erstellen-post-it

Ebene Form 1 Kopie 2 umbennen in Klebestreifen.

vektorgrafik-erstellen-post-it

Ebene Klebestreifen markieren und über die linke Werkezeugleiste das Ankerpunkt-hinzufügen-Werkzeug wählen.

vektorgrafik-erstellen-post-it

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.
vektorgrafik-erstellen-post-it

Über die Werkezeugleiste Ankerpunkt-löschen-Werkzeug wählen.
vektorgrafik-erstellen-post-it

Die unteren Ankerpunkte entfernen.

vektorgrafik-erstellen-post-it

Über die Werkezeugleiste Punkt-umwandeln-Werkzeug wählen.

vektorgrafik-erstellen-post-it

Die Ankerpunkte in Punkte umwandeln. Dazu die Ankperpunkte auf den Schnittpunkten anklicken.
vektorgrafik-erstellen-post-it

1. Ebeneneffekte von Ebene Klebestreifen deaktivieren. Dazu auf das Icon Sichtbarkeit aller Ebeneneffekte aktivieren/deaktivieren klicken.

vektorgrafik-erstellen-post-it

2. Doppeklick auf die Ebenenminiatur. 3. Farbwert #000000 (schwarz) einstellen und mit OK bestätigen.

vektorgrafik-erstellen-post-it

Deckkraft von Ebene Klebestreifen auf 2% einstellen.

vektorgrafik-post-it-25

Post-it beschriften

Über die Werkzeugleiste Horizontales Text-Werkzeug (T) wählen und gewünschten Text in das Textfeld einfügen.

vektorgrafik-erstellen-post-it

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.

vektorgrafik-erstellen-post-it

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.

vektorgrafik-erstellen-post-it

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.

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

3 Antworten auf "Photoshop-Tutorial: Post-it Vektorgrafik erstellen"

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige