Vektorisierte Icons mit Photoshop erstellen
Ein Tutorial zu finden, das beschreibt, wie spezielle Icons zu erstellen sind, ist nicht schwer. Anders sieht es aus, wenn man das Icon vollständig mit Vektoren erstellen möchte, so dass es beliebig skalierbar ist. Natürlich gibt es dafür spezielle Tools, wie Illustrator, Freehand oder auch Corel Draw, aber auch Photoshop unterstützt Vektoren.
Ich zeige diese Technik anhand eines RSS Icons auf, da dieses einfach aufgebaut ist und sich der Umgang mit Vektoren gut erklären lässt.
Ich verwende Photoshop CS2 in englisch bei diesem Tutorial. Viele Erläuterungen sind mit Bildern dargestellt, so dass sie auch ohne Englischkenntnisse auf die deutsche Version übertragen werden können. Weiterhin ist Photoshop CS3 und CS4 ohne Einschränkung nutzbar.
1. Grundform erstellen
Zuerst erstellen wir eine neue Datei in 64×64 Pixeln und wählen das Rounded Rectangle Tool (U) in der Palette aus.
Hiermit erstellen wir ein Quadrat (Shift-Taste) mit einem Eckradius von 16px. Die Hintergrundfarbe spielt dabei keine Rolle.
2. Ebenen-Styles zuweisen
Diesem weisen wir nun per Doppelklick auf das Layer einen Style zu. Hierbei zeige ich beispielhaft das klassische Design in orange. Es werden Einstellungen in den Kategorien: Stroke, Gradient Overlay und Inner Glow gesetzt.
2.1 Stroke
Folgende Einstellungen müssen verändert werden. Alle anderen Einstellungen können unverändert bleiben.
- Size: 2px
- Position: Inside
- Fill Type: Gradient
- Farbwert untere Farbe: #cc621c
- Farbwert obere Farbe: #cc5e14
2.2 Gradient Overlay:
Hier werden folgende Einstellungen geändert:
- Angle: 125 Grad
- Gradient wie folgt:
- Linker Farbwert: #dc5e2c | Location: 0%
- Mittlerer Farbwert: #fc9e3c | Location: 50%
- Rechter Farbwert: #e47234 | Location: 100%
2.3 Inner Glow:
Hier werden folgende Einstellungen gesetzt:
- Blend Mode: normal
- Opacity: 100%
- Farbwert: #f49a54
- Technique: Precise
- Choke: 100%
- Size: 3px
Der bisherige Zwischenstand sollte wie folgt aussehen:
3. Arbeiten mit Shapes
Jetzt folgt der wesentliche Teil des Tutorials – die Erstellung des Iconinhalts mittels Shapes. Zuerst positionieren wir einen weißen Kreis in die linke untere Hälfte des Icons. Hierzu wählen wir das Ellipse Tool (U) in der Toolbar. Einen Kreis erhält man durch gleichzeitiges Drücken der Shift-Taste beim Aufziehen des Shapes. Der Kreis sollte einen Durchmesser von 13px haben. Danach wird eine vertikale Hilfslinie zur linken äußeren Kante des Kreises gezogen und eine horizontale Hilfslinie zur unteren Kante des Kreises. Diese vereinfachen die korrekte Erstellung der nachfolgenden Bögen.
Jetzt folgt die Erstellung der Bögen. Es wird abermals das Ellipse Tool (U) ausgewählt. Jetzt setzen wir den Mauszeiger in den Schnittpunkt der Hilfslinien und ziehen einen weißen Kreis auf mit gehaltener Shift- und Alt-Taste mit einem Radius von 60px. Durch gleichzeitiges Drücken der Alt-Taste wird der Kreis vom Mittelpunkt ausgehend aufgezogen.
Nun selektieren wir die Vector Mask im Layer des neu erstellten Kreises und wählen in der oberen Toolbar des Werkzeugs Ellipse Tool (U) die Funktion Substract from shape area (-).
Jetzt ziehen wir abermals ausgehend vom Schnittpunkt der Hilfslinien einen zweiten Kreis auf. Die Fläche dieses Kreises wird von der Fläche des ersten Kreises abgezogen. Der zweite Kreis solllte einen Radius von 40px haben. So haben wir einen weißen Ring in einem Layer erstellt. Die linke und untere Hälfte des Rings werden mit der gleichen Technik links und unterhalb der Hilfslininen abgeschnitten. Hierzu benutzen wir das Retangle Tool (U) und wählen abermals Substract from shape area aus.
Der Zwischenstand sollte demnach folgender Maßen aussehen:
Als nächstes duplizieren die Ebene mit dem erstellten Bogen (STRG + J).
Jetzt wird der zweite Bogen transformiert (STRG + T). Wichtig ist, dass die Vektor-Maske im Ebenenfenster nicht ausgewählt ist, sondern die Vorschau, da sonst die entsprechenden Funktionen in der oberen Toolbar ausgegraut sind. Beim Transformieren halten wir abermals die Tasten Shift und Alt gleichzeitig gedrückt. Der zweite Bogen sollte einen Durchmesser von 88px haben.
Wie jetzt zu sehen ist, hat der zweite Bogen eine größere Stärke als der Erste. Um dieses anzupassen muss das Path selection tool (A) in der Toolbar ausgewählt werden. Hiermit selektieren wir den inneren Kreis. Diesen Kreis transformieren (STRG+T) wir nun bei gleichzeitigem Drücken der Shift- und Alt-taste auf einen Radius von 70px.
Somit ist das RSS-Icon basierend auf auschließlich Vektoren fertig.
4. Icon transformieren
Das Icon kann nun problemlos in jede beliebige Größe skaliert werden. Hierzu kann der Image Size (STRG+Alt+i) Dialog verwendet werden. Das Icon sieht von 16×16 bis 128×128 Pixeln folgendermaßen aus.
Veröffentlicht am Samstag, 22. August 2009 in der Kategorie Photoshop.
« Der Weg zum eigenen WordPress Theme VRML und X3D »
