Paper Icons – Photoshop Tutorial

Icon Tutorial Header

Im Internet gibt es eine Vielzahl an verschiedenen Iconsets für diverse Zwecke, doch warum die Icons nicht einfach selber machen? In diesem Tutorial will ich euch zeigen wie ihr relativ simpel selbst ein Icon im “Papier” Style erstellen könnt.

Voraussetzungen:

  • Grundkentnisse in Photoshop (Toolbox, Ebenen, Text)
  • etwas Zeit

Lernziele:

  • Verwenden der Blending Options
  • Verwenden desShape-Tools

Öffnet nun als erstes Photoshop und erstellt ein neues Bild, die Grösse ist eigentlich egal jedoch empfehle ich euch nicht unter 128×128 zu gehen. Färbt nun den Hintergrund in irgend einer dunklen Farbe  ein, dies ist eigentlich nur nötig, damit wir unser Icon besser sehen…

Erstellt nun als erstes auf einer neuen Ebene  folgende Form:

1

Am besten macht ihr das, indem ihr zuerst ein grosses Rechteck erstellt und dann das kleinere rauslöscht.
So wählt nun das Shape-Tool aus (U) und wählt dort “Custom Shape” aus.

3
Wählt dann als Form das Dreieck aus und zeichnet ein nicht zu grosses Dreieck damit. Nun drückt ihr einmal [Ctrl + T]. Damit gelangt ihr in den “Frei-Transformieren” Modus. Dreht und vergrössert das Dreieck nun, so dass es in etwa aussieht wie auf dem Bild:

2
Nun haben wir mal die Grundformen erstellt. Geht nun wieder auf die Ebene mit dem Rechteck, rechtsklickt auf die Ebene und wählt dann “Blending Options” aus.

Stellt nun alles wie folgt ein:

  • Drop Shadow (Schlagschatten): Distance: 0, Spread: 0, Size: 5
  • Gradient Overlay: #e5e5e5 zu #ffffff, Angle: 72
  • Stroke: Size: 1, Color: #868686

Nun sollte das ganze etwa so aussehen:

4
Nun geht noch auf die Eben mit dem Dreieck und wiederholt den Schritt von vorher, geht also wieder in die Blending Options und stellt dort alles wie oben ein.

5
Nun sieht das ganze schon sehr nach einem Papier aus. Was noch fehlt ist der Inhalt auf dem Papier. Um den kümmern wir uns jetzt. Je nach dem für was ihr euer Icon verwenden wollt könnt ihr hier verschiedenes einfügen, in diesem Beispiel möchte ich ein Icon für eine Textdatei haben, darum soll das Icon auch nur ein simples “T” in der Mitte haben.

Wählt nun das Text-Tool aus und schreibt ein “T” in die Mitte. Geht nun wieder in die Blending Options des Textes und stellt folgendes ein:

  • Drop Shadow: Distance: 0; Spread: 0, Size: 5 (oder kleiner je nach dem wie gross euer “T” ist)

Nun sollte euer Icon etwa so aussehen:

6

Und das wär’s auch schon. Spielt ein bisschen mit den Eigenschaften rum, denn wie so oft gilt: “Probieren geht über Studieren!”

Vielen Dank fürs Lesen und wie immer, Kritik, Anregungen oder Fragen einfach in die Comments.

Michi

VN:F [1.0.8_357]
Rating: 4.8/5 (5 votes cast)

No Response to Paper Icons – Photoshop Tutorial

Still quiet here.