Erstellen einfacher Icons

Wie entstehen kleine Icons?

Inhalt:

Grundsätzliches
Das Motiv
Erstellung des Monitors
Letzter Schliff

In vielen Bereichen, gerade im Internet, sind kleine Icons hilfreich um Benutzern das Zurechtfinden auf einer Website zu erleichtern. Auch auf LizZards Web kommen zahlreiche kleine Bildchen zum Einsatz. Aus diesem Grund möchte ich hier kurz auf die Erstellung von Mini-Icons eingehen.

Anforderungen

Grundkenntnisse in der Bedienung von Photoshop
Grobe Kenntnis über die Bildschirmelemente von Photoshop

Grundsätzliches

Zuerst solltest Du dir Gedanken über die gewünschte Größe der Icons machen. Nach meiner Erfahrung sind gerade große Icons sehr schwer und aufwendig in der Erstellung. Als Beginn nehmen wir uns daher besser eine kleine Bildgröße vor. Erstelle also ein neues Dokument mit der Bildgröße 50x50 Pixel.

Erstelle nun mit Strg + Umschalt + N eine neue Ebene. Wähle Ansicht » Neue Ansicht um ein zweites Fenster unserer Arbeitsfläche zu öffnen. Zoome diese Ansicht auf etwa 1000%. Jetzt können wir fein arbeiten, ohne dabei das spätere Aussehen aus dem Blick zu verlieren.

Das Motiv

Als Motiv dachte ich mir für den Anfang einen Computer-Monitor aus. An diesem Beispiel lassen sich viele Facetten der Icon-Malerei gut erklären. Ein Referenzbild schadet niemals, und in diesem Fall musst du nichtmal eines suchen, da sich die beste Referenz direkt vor Dir befindet.

Erstellung des Monitors

Mit einer 1px-Pinselgröße und dem Buntstift kann es auch schon losgehen. Mit grauen Farben malst du die Konturen des Bildschirms auf die Ebene. Kontrollierende Blicke in die 100%-Zoom-Ansicht helfen die Proportionen abzuschätzen. Um Plastizität in die Sache zu bekommen ist es wichtig darauf zu achten, dass Bereiche die weiter hinten im Bild sind dunkler gezeichnet werden.

So sieht mein Bildschirm in der Rohform aus. Auf einer neuen Ebene zeichne ich nun die Details für die Frontbedienelemente auf, und füge noch einige Knöpfe hinzu. Wieder auf einer neuen Ebene zeichne ich nun den Fuß des Bildschirms.

Soweit fertig können wir uns jetzt an die Oberfläche des Bildschirms machen. Erstelle wieder eine neue Ebene, fülle die Fläche des Bildschirms mit Graublau. Wechsle in der Toolbar vom Auswahlrechteck zur Auswahlellipse und mache eine Kreisauswahl innerhalb des Bildschirmbereiches (siehe Bild). Erstelle eine neue Ebene und fülle die Auswahl mit einem dunkleren Blauton.

Halte Strg und klicke auf die Ebene mit dem graublauen Monitorbild. Es wird ein Auswahlrechteck erscheinen. Rechtsklick » Auswahl umkehren markiert nun den nicht benötigten Bereich. Entf löscht nun den überschüssigen Teil der Ellipsenform.

Wieder in der Ebene des Bildschirms wählst du Rechtsklick » Fülloptionen und entscheidest dich für „Schatten nach innen”. Übernimm meine Einstellungen.

Der Fuß des Bildschirms erhält nun auch noch einige Fülloptionen in Form eines „Schein nach innen”.

Letzter Schliff

Reduzieren aller Ebenen Als letztes Feature unseres Monitors habe ich mir eine Spiegelung am Boden überlegt. Blende die Hintergrundebene aus (mit dem kleinen Auge in der Ebenenübersicht) und reduziere alle Ebenen mit Strg + Umschalt + E.

Duplizieren der Ebene Blende die Hintergrundebene wieder ein, schiebe den Monitor an den oberen Rand des Bildes und dupliziere die Ebene per Rechtsklick » Ebene duplizieren in der Ebenenübersicht.

Spiegle die Ebene vertikal (Bearbeiten » Transfomieren » Vertikal Spiegeln) und schiebe sie entsprechend weit nach unten. Wähle nun das Auswahlrechteck-Werkzeug und setze die Weiche Kante auf 5 Pixel.

Erstelle nun eine Auswahl die so breit wie das ganze Bild ist. Bewege sie mit den Cursortasten an den unteren Rand des Bildes und drücke Entf bis die gewünschte Spiegelung erreicht ist. Senke in der Ebenenübersicht anschließend die Deckkraft auf etwa 25%.

Das Icon in verschiedenen Größen als Endergebnis Unser Icon lässt sich natürlich noch ein wenig herabskalieren, da es für viele Einsatzgebiete bereits zu groß ist. Ich hoffe ich konnte ein wenig meine Technik beim Erstellen von Icons näher bringen und wünsche viel Spaß beim eigenständigen Erstellen.

Dieses Tutorial wurde verfasst von Martin Reithmayer.
Das Tutorial ist am 10.09.2007 um 15:10 Uhr veröffentlicht worden und wurde bislang 2 mal kommentiert.
Tags: Icons