Icons im Vista-Look
von Jan Metzmacher
Icons als visuelle Schnittstelle sind nicht mehr wegzudenken. Auch auf Internetseiten sind die kleinen Grafiken ein wichtiger Bestandteil. Schön anzusehen ist das neue »Look & Feel« der neuen Windows Vista-Icons. Deren Grundlage kann in zahlreichen Varianten umgestaltet werden.
Blaue Variante
1. Grundlage
Erstellen Sie zunächst über »Datei ↔ Neu« ein Dokument mit einer Größe von 256×256 Pixel. Icons sind zumeist quadratisch und haben Standardgrößen von 32×32 Pixel, 48×48 Pixel, 64×64 Pixel oder auch 256×256 Pixel (dieses Format wird allerdings erst seit Windows Vista von Microsoft akzeptiert).
2. Ein Kreis
Mit dem Ellipse-Werkzeugs zeichnen Sie einen Kreis, der eine Größe von 225×225 Pixel haben sollte. Dazu geben Sie in den Optionen des Werkzeugs unter »Feste Größe« die entsprechende Anzahl ein. Achten Sie darauf, dass dort auch das Symbol »Formebenen« aktiviert ist. Benennen Sie die automatisch erstelle Ebene in »Kreis« um. Dazu reicht ein Doppelklick auf den Ebenennamen und die Eingabe über die Tastatur aus. Dank der Umbenennung können wir die Ebenen später schnell zuordnen.
Alternativ könnten Sie auch einen Kreis mit dem Auswahlellipse-Werkzeug erstellen. Um unkompliziert einen Kreis zu erstellen, halten Sie beim Aufziehen die Shift-Taste gedrückt. Übrigens ist die Farbe dieser Grundlage nicht relevant, da im Anschluß ein Verlauf die Fläche überdeckt.
Grundform des Icons
3. Reflexion und Verlauf
Stellen Sie die Vordergrundfarbe auf #2288bb (RGB 34, 136, 187) und die Hintergrundfarbe auf #0055bb (RGB 0, 85, 136) ein. Der »Ebenenstil ↔ Verlaufsüberlagerung« sorgt nun für eine farbige Fläche.
Erstellen Sie eine neue Ebene und benennen Sie diese in »Reflexion« um. Klicken Sie mit gedrückter Strg-Taste die Miniatur der Ebene »Kreis« an. Der Ebeneninhalt wurde hierdurch ausgewählt. Mit der Auswahlellipse und gedrücker Alt-Taste subtrahieren Sie ein Stück der Selektion so, dass eine halbmondförmige Auswahl entsteht. Füllen Sie diese auf der Ebene »Reflexion« mit weißer Farbe über »Bearbeiten ↔ Fläche füllen« und stellen Sie die Deckkraft je nach Geschmack auf etwa 5 bis 15% um.
Blauer Verlauf und Reflexion
4. Rahmen und Schatten
Erstellen Sie mit dem Ellipse-Werkzeugs einen Kreis in der Farbe #b6b6b6 (RGB 182, 182, 182), der eine Größe von 235×235 Pixel haben sollte, was Sie wieder unter »Feste Größe« eingeben können. Die automatisch erstellte Ebene benennen Sie in »Rahmen« um. Rastern Sie die Ebene über »Ebene ↔ Rastern ↔ Form« und klicken Sie mit gedrückter Strg-Taste auf die Ebene »Kreis«. und betätigen Sie die Entfernen-Taste. Ein »Schlagschatten«, der auf die Ebene »Kreis« angewendet wird, hebt das Icon etwas vom Hintergrund ab.
Grauer Rahmen und Schlagschatten
5. Rahmen mit Stil
Nun werden dem Rahmen einige Ebenenstile zugeordnet. Aktivieren Sie zunächst den »Ebenenstil ↔ Schlagschatten« mit Deckkraft 7%, Abstand: 5 und Größe: 5, dann »Schein nach innen« mit der Farbe #ffffbb (RGB 255, 255, 187). »Abgeflachte Kante und Relief« sorgt mit Tiefe: 5%, Größe: 5 Pixel und Weichzeichnen: 5 Pixel für einen leichten 3D-Effekt.
Bei der »Verlaufsüberlagerung« werden drei Farben verwendet: #b3b3b3 (RGB 179, 179, 179), Weiß und #b3b3b3 (RGB 179, 179, 179). Der Winkel steht hierbei auf 30 Grad. Eine »Kontur« mit Größe: 1 Pixel, Position: Außen und der Farbe #b6b6b6 (RGB 182, 182, 182) grenzt den Rahmen noch etwas ab. Haben Sie alle Ebenenstile hinzugefügt, sollte Ihr Ergebnis wie folgt aussehen.
Dreidimensionaler Rahmen
6. Beschriften
Das Grundgerüst des Icons ist nun fertig. Nun kommt der Inhalt dazu. Um wie in diesem Beispiel ein »x« hinzuzufügen, schreiben Sie mit dem Text-Werkzeug ein Plus-Symbol. Hier wurde die Schriftart Aria mit einer Größe von 300pt eingesetzt. Drücken Sie Strg und T, um »Frei transformieren« zu aktivieren und lassen sie das Zeichen um 45 Grad rotieren. Beachten Sie, dass die Ebene unter der Ebene »Reflexion« stehen sollte. Die Text-Ebene wird nun mit einigen Ebenenstilen aufgepeppt.
Ein »Schlagschatten« mit Deckkraft 50%, Abstand: 3 Pixel und Größe: 5 Pixel hebt das Symbol vom Untergrund ab. »Abgeflachte Kante und Relief« sorgt mit Tiefe: 5%, Größe: 5 Pixel und Weichzeichnen: 5 Pixel sorgt auch hier für einen leichten 3D-Effekt. Bei der Verlaufsüberlagerung werden die folgenden Farben im Wechsel genutzt: Weiß, #b6b6b6 (RGB 182, 182, 182) und #Weiß. Noch eine »Kontur« mit Größe: 1 Pixel, Position: Außen und weißer Farbe, und die Schrift passt zur Icon-Grundlage.
Gedrehtes Plus-Zeichen
Beispieldatei in Photoshop öffnen:
webdesign4-1.psd
(Dateigröße: 151 KB)
Zweifarbige Variante
1. Änderungen umsetzen
Um nun die Icon-Grundlage schnell zu variieren, könnten Sie etwa die »Verlaufsüberlagerung« der kreisförmigen Grundform aufrufen und den blauen Verlauf auf eine zweifarbige Version abändern. Auch das Zeichen ist schnell geändert. So könnten Sie das X auch durch ein Brief-Symbol ersetzten oder wie hier ein Ausrufezeichen schreiben. Verschiedenste Zeichen und Farben ergeben trotzdem eine Icon-Serie im gleichen Stil.
Grundlage schnell variieren
Beispieldatei in Photoshop öffnen:
webdesign4-2.psd
(Dateigröße: 151 KB)
