Bau dir Deine Icons selbst.

Als Interface Designer wird man oft vor die Aufgabe gestellt ein emotionale Komponente in die Bedienoberfläche einzubringen. Dies kann z.B. ein feines und detailreiches Symbolsystem sein. Aber wie baut man das?


Nun zuerst musst Du dir überlegen was das zentrale Thema der Software ist. Das kann bei einem Emailprogramm der elektronische Brief, bei einem Praxisverwaltungsprogramm der Patient oder bei einem eLearningsystem der Lerninhalt sein.
Aus dem zentralen Thema entwickelst Du auf Papier eine kleine Ansammlung von Symbolen die dieses Thema behandeln. Das könnten zum Beispiel Symbole für Postkasten, Brief, Patient, Patientenakte, Wartezimmer, Lernaufgabe oder Prüfung sein. Dieser Schritt dient dazu eine Formsprache für das jeweilige Thema zu finden.

Hast Du nun genügend Ideen gesammelt, kannst Du zum handwerklichen Teil übergehen. Damit alle Symbole gleich aussehen, muss als nächstes ein Raster her. Damit legst Du fest, welche Perspektive die Symbole haben sollen und wie sie ausgerichtet sind.

Hast Du auch diesen Schritt erledigt, kann es an die Umsetzung spezieller Symbole gehen. Dazu legst Du dir eine Liste mit allen Symbolen an, die für die Software gebraucht werden. Die wird meist ziemlich lang. Alle Symbole dieser Liste werden dann auf Papier gezeichnet. Es macht Sinn erst alle Symbole zu zeichnen, damit man schon früh erkennen kann, ob die Symbole sich auch ausreichend unterscheiden.

Nun baust Du jedes Symbol in einem Vektorprogramm z.B. Freehand. Dabei ist darauf zu achten, daß es nicht zuviele dünne und eng aneinanderliegende Linien gibt. Die machen das Symbol später matschig. Am Besten ist es, wenn die Konturlinie etwas stärker ist als die restlichen Linien.

Für Windowsicons legst Du dir in einem Bildbearbeitungsprogramm deiner Wahl z.B. Photoshop vier Dateien in den Standardgrößen 16×16, 24×24, 32×32 und 48×48 an. Jetzt kann das Symbol in jede dieser Dateien über “Copy & Paste” eingefügt werden. In den meisten Fällen musst Du dann noch das Symbol in 16×16 per Hand “zurechtpixeln”.

Um Symbole mit Schatten zu machen, legst Du die Dateien in den Größen 14×14, 22×22, 30×30 und 46×46 an. Nachdem das Symbol eingefügt ist, vergrößerst Du die Arbeitsfläche um 2 Pixel nach rechts und nach unten. Nun fügst Du die Effektebene (im Photoshop) “Schlagschatten” mit 135° Winkel und 2px Abstand ein.

Nun kannst Du das Symbol noch im Photoshop oder PNG-Format in einen Iconbuilder einladen und als ICON-File abspeichern.
Fertig.

In der Regel kann man so rechnen, daß ein gutes Icon bei iterativem Design 2-3 Stunden braucht.

War dieser Artikel hilfreich für Dich?

Scroll to Top