Anzeige
Tutorialbeschreibung

Icons erstellen - Teil 1: konzipieren und scribbeln

Icons erstellen - Teil 1: konzipieren und scribbeln

In diesem ersten Teil des Icon-Doubles erfahren Sie, worauf es bei der Gestaltung von Icons ankommt: Welche Voraussetzungen muss ein Icon im Alltag erfüllen und welche Fehler sollten Sie beim Konzipieren der Symbolik vermeiden? Anhand eines realen Projekts lernen Sie, eigene Ideen zu entwickeln und Scribbles für die spätere digitale Umsetzung anzulegen.

... übrigens findest du die komplette Serie hier: Photoshop-Workshop-DVD - Webdesign Vol. 2 - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Anforderungen an Icons

Der Einsatz von Icons auf Websites, innerhalb eines Betriebssystems, im Interface eines Handys oder auch auf einer interaktiven CD-ROM dient in der Regel einem Zweck: Orientierung schaffen, das Auge lenken und die Usability eines Interfaces erhöhen.

Die nachstehenden Abbildungen zeigen oben die Website von MacRabbit, einer Softwareschmiede für OS X. Die Icons in der Navigation ergänzen die Textbegriffe dezent und geben der Navigation optisch mehr Gewichtung. Am rechten Rand gliedert die Iconleiste die Kernfunktionen der Anwendung schön vom restlichen Inhalt aus.

Darunter finden sich zwei Screenshots des iOS, dem Betriebssystem des iPhone bzw. iPod Touch. Links besitzt jedes Icon eine eigene starke Charakteristik. Die Abbildung rechts zeigt vier Icons der „Scout-Apps“. Jedes behandelt ein anderes Thema, das alleine durch den entsprechenden Begriff gekennzeichnet ist. Das schnelle visuelle Erfassen wird aufgrund der geringen Unterschiede ausgebremst.

Screenshot MacRabbit.comBilder



 
Es ist wichtig, dass der Betrachter direkt erkennt, um was es sich hinter einem Icon handelt. Insbesondere dann, wenn es keinen ergänzenden Text gibt und das Icon eine tragende Funktion spielt. Hier lohnt in der Regel ein Test.

Ansicht Icondarstellungen iPhoneBilder


Zeigt das Icon Bekannten und Freunden und lasst sie interpretieren, was sie darin erkennen. Nicht selten ist die eigene Idee vollkommen schlüssig - nur eben nicht für andere. Genau zu diesem Phänomen habe ich den Blogeintrag „DJ-Gorillas und Boxenmörder“ am Beispiel eines meiner Icons geschrieben.

 
Ein Blick in die Systemsteuerungen von Windows bzw. OS X bietet hier einen guten Einblick in das Funktionieren der Symbolik. Nachstehend zwei Leisten: oben Icons aus Windows 7, unten aus OS X. Ich habe die Beschriftung bewusst entfernt. Betrachtet die Icons und versucht herauszufinden, um was es sich handelt. Die Auflösung findet ihr am Ende des Tutorials.

Ansicht Systemicons Windows und OS XBilder



Tipps zur Gestaltung

Nachdem die grundlegenden Anforderungen an Icons abgesteckt sind, geht es nun also darum, wie man es schafft, die Miniaturbildchen auch „artgerecht“ zu erstellen. Dazu die folgenden Tipps, die Anhand von (Negativ)-Beispielen belegt werden.

Icons sollen sich klar unterscheiden

Dieser Punkt betrifft in erster Linie Icons, die innerhalb eines Sets entstehen. Hier ist darauf zu achten, dass sich die einzelnen Symbole optisch klar voneinander abgrenzen und eine Verwechslung vermeidbar gemacht wird. Die beiden Icons „Terminal“ und „Konsole“ und „Aktivitätsanzeige“ unter OS X erfüllen diese Anforderungen aufgrund des schwarzen Hintergrunds und des grauen Rahmens in meinen Augen nicht optimal. Gerade bei den ersten beiden bin ich regelmäßig selbst verwirrt.

OS X Icons mit ähnlicher OptikBilder



 

Konformität innerhalb einer Serie

Werden mehrere Icons für eine Serie erstellt, so müssen deren optische Größe und der Zeichenstil zusammenpassen. Nebeneinander positioniert sollten sie klar als zusammengehörig erkannt werden. Das unten stehende der beiden gezeigten Iconsets zeigt deutlich, dass das dritte Icon sowohl in der Größe als auch optisch durch den fehlenden Weißanteil aus der Reihe tanzt.

Homogene IconserieBilder


Iconserie mit fehlender HomogenitätBilder



 

Details reduzieren

Je kleiner ein Icon dargestellt werden muss, desto weniger Details sollten darin enthalten sein, um klarere Formen und Kanten zu ermöglichen. Jedes winzige Detail läuft Gefahr, zu einem verschwommenen Pixelsumpf zu werden. Durch „übertriebenes“ Aufsteilen des Kontrasts lässt sich hier ein wenig entgegensteuern. Wird ein Icon als .ico (Windows) oder .icns Datei (Macintosh) gespeichert, also als Bundle mit mehreren Versionen darin, so ist es sinnvoll, die großen Varianten detailliert, die kleinen hingegen detailärmer zu gestalten. (Zum Bündeln von Icon-Dateien erfahrt ihr im zweiten Tutorial „Icons gestalten“ Näheres).

Das alternative Dreamweaver-Icon zeigt in der großen Variante viele Details und Lichteffekte. Diese bleiben vorerst erhalten, bevor das Spitzlicht am „W“ wegfällt, dafür die Kanten stärker betont werden. In der kleinsten Variante entfallen alle Effekte, die Buchstaben werden zugunsten des besseren Kontrasts weiß dargestellt und das Icon erhält eine schwarze Kontur nach außen und eine weiße Kontur nach innen, um auf jedem Hintergrund gut sichtbar zu sein.

Abstufung der Details mit sinkender DetailgrößeBilder



 

Unnötige Elemente entfernen

Das nachfolgende Beispiel zeigt eine Iconreihe für eine fiktive Anwendung, die sich mit der Verwaltung von Datenbanken beschäftigt. In der oberen Reihe ist allen das typische Datenbank-Symbol mit den drei Zylinderscheiben gemein, ergänzt durch jeweils ein kleineres Icon, das die Funktion, wie das Sperren, Bearbeiten, Löschen etc. beschreibt.

Unter dem Aspekt, dass sich die gesamte Anwendung jedoch mit Datenbanken beschäftigt, ist es unnötig, das in jedem Symbol nochmals zu visualisieren. Verwendet man hingegen nur die Icons für die jeweilige Funktion, steht hier mehr Platz zur Ausarbeitung von Details zur Verfügung. Auch in einer kleinen Darstellung machen die Icons aufgrund der reduzierten Anzahl an Elementen eine bessere Figur.

Gegenüberstellung einer Iconserie mit bzw. ohne überflüssige DetailsBilder



 

Nicht zu viel experimentieren

In erster Linie soll ein Icon die Usability steigern. Das erfolgt, wie bereits erwähnt, zu großen Teilen dadurch, dass der Besucher direkt erkennt, um was es sich handelt. Hier entsteht schnell die Diskrepanz zwischen dem kreativen Austoben und dem „Ausgelutschten“.

Auf der einen Seite will man sich möglichst originell und individuell präsentieren, auf der anderen Seite soll der Besucher es am Ende auch verstehen. Die zugegebenermaßen abgedroschene Symbolik des Häuschens für die Startseite einer Website hat sich derart etabliert, dass es kaum einen User geben wird, der dahinter nicht die Startseite vermuten würde. So auch auf der Website von taptaptap:

Footer-Leiste mit Home Button der Website taptaptap.comBilder


Einen spannenden Artikel zum Thema Icons und Metaphern findet ihr auf der Seite von Louie Mantia.


Keine Interface-Elemente des OS verwenden

Die Verwendung von Interfaceelementen der gängigen Betriebssysteme sollte vermieden werden. Dem Benutzer wird somit eine native Funktionalität vorgegaukelt, die nicht wirklich existiert.

Interfaceelemente unter Windows und OS XBilder



 

Keinen Text in Icons

Die Verwendung von Text in Icons sollte vermieden werden. Zum einen lässt sich Text in einer kleinen Darstellung nur noch als Pixelsumpf erkennen, zum anderen erfolgt somit eine lokale Beschränkung. Jemand, der die verwendete Sprache nicht spricht, wird „ausgeschlossen“. Sinnvoller ist es, den Text symbolisch durch ein wenig Gekritzel zu simulieren. Ist man sich der Zielgruppe und der Größe des Icons sicher, kann hier natürlich eine Ausnahme gemacht werden.

Demonstration der Nachteile von Schrift in IconsBilder



Internationale und kulturelle Unterschiede

Werden Icons international, z. B. in einer App oder auf einer Website eingesetzt, ist zu beachten, dass es hier zu Unterschieden in der vertrauten Symbolik kommen kann. Am Beispiel des Briefkastens erkennt man das deutlich. Der deutsche Briefkasten sieht komplett anders aus als das amerikanische Pendant. Auch in China wird man mit einem „deutschen Briefkasten“ nicht unbedingt sofort eben jenen assoziieren. Prüft daher im Vorfeld, ob eure angedachte Metapher grundsätzlich funktioniert oder ob es evtl. allgemeingültige Möglichkeiten gibt.

Scribbles verschiedener BriefkästentypenBilder


Einen abschließenden Linktipp noch an dieser Stelle: „Why Icons matter“ von Gedeon Maheux.


 

Ideenfindung

Nachdem das theoretische Wissen nun (hoffentlich) sitzt, geht es an den ersten praktischen Teil: die Ideenfindung. Je nachdem, was das Icon darstellen soll, kann es das ein recht nervtötender Prozess werden. Gerade abstrakte Begriffe können einen vor unglaubliche Probleme stellen. Ich erinnere mich da an einen Auftrag von rund 50 Icons mit einer Größe von 16x16 Pixel, bei denen solche Leckerbissen wie „Warenwirtschaftssysteme“ oder „Warenausgangskoordinationsmanagement“ dargestellt werden mussten …

In diesem Tutorial soll es allerdings konkreter und auch mit einem Praxisnutzen sein: Es geht um ein weiteres Icon für die Navigationsleiste von PSD-Tutorials.de mit dem Thema „News“. Ein entsprechendes Icon soll im weiteren Verlauf ersonnen und gescribbelt werden, bevor es im zweiten, separaten Tutorial an die digitale Umsetzung und die Ausgabe geht.


Brainstorming

Der erste Schritt zur Ideenfindung sollte ein klassisches Brainstorming sein. Das klappt alleine, besser aber noch in einer Gruppe. Nehmt euch Zettel und Stift und schreibt für ein paar Minuten alles, aber auch wirklich alles auf, was euch zu dem Thema einfällt. Falsche Wörter gibt es nicht. Überlegt nicht lange, was passen könnte, sondern notiert jeden Einfall, egal, wie absurd er klingt. Alles ist richtig. Auf diese Weise löst ihr eure Gedanken und entwickelt Ideen und Begrifflichkeiten, die bei einem rationalen, angestrengten Überlegen nicht auftauchen würden. Am Ende dieses Prozesses solltet ihr eine lange Liste von verschiedenen Begriffen vor euch liegen haben.

Liste nach dem BrainstormingBilder



Geht diese Liste nun durch und streicht jeden Begriff heraus, der absolut nicht passt. Die gekürzte Liste nehmt ihr euch nun erneut vor und streicht wieder Begriffe heraus, die euch nicht sonderlich zusagen. Sowohl von der Symbolik her als auch von der Umsetzbarkeit. Diesen Prozess wiederholt ihr, bis am Ende noch 4-5 Ideen übrig bleiben. Diese sind dann eure Ausgangsbasis für die Scribbles.

Bei mir sind für das News-Icon die folgenden Begriffe übrig geblieben: Zeitung, Männchen, Blitz, Megafon, Anschlagtafel, Zettel.

Aussortierte Begriffe auf der ListeBilder



 

Google-Bildersuche

Ergänzend zum Brainstorming hat sich für mich die Google-Bildersuche hin und wieder bezahlt gemacht. Tragt das Thema eures Icons in die Suche ein und schaut, was euch das Web an entsprechend getaggten Bilder liefert. In der Regel sind 90% davon unbrauchbar, aber hier und da entdeckt man doch immer wieder einmal die ein oder andere Anregung, die einem weiterhilft.

Google Bildersuche als inspirationsquelleBilder



 

Scribbeln

Icons besitzen in der Regel eine quadratische Form. Das ist nicht zwingend, wenn es nur als Bild auf einer Website eingesetzt wird, spätestens aber beim Einsatz innerhalb eines Betriebssystems oder als Favicon solltet ihr es formal an einem Quadrat ausrichten. Zieht euch entsprechend ein halbwegs sauberes Quadrat auf ein Papier, das euch als Begrenzung für die folgenden Zeichnungen dient.

Die Zeichenfläche wird mit Quadraten eingegrenztBilder



Auf Basis des vorangegangenen Brainstormings beginnt ihr nun, eure Motive zu skizzieren. Versucht hier verschiedene Perspektiven, Größen, Detailgrade etc.

 
Das müssen keine aufwendig ausgearbeiteten Zeichnungen sein, sondern wirklich nur grobe Skizzen, die euch zeigen, ob eine Idee auch auf dem Papier funktioniert.

Skizzen anfertigenBilder



Sobald ihr mit einem Motiv zufrieden seid, beginnt die Reinzeichnung. Ich habe mir diese Vorarbeit angewöhnt, da es für mich das Digitalisieren später einfacher und schneller macht. Auch hier zeichnet ihr euch wieder ein Quadrat als Begrenzung und arbeitet eure Skizze nun sauber aus. Lasst euch hier Zeit. Je exakter die Zeichnung ist, desto leichter fällt euch das Digitalisieren.

Reinzeichnung der endgültigen Variante erstellenBilder



 
Steht die Skizze, fahre ich die Konturen mit einem schwarzen Fineliner nach und radiere nach einer kurzen Trockenzeit (ein paar Sekunden reichen) die Bleistiftlinien weg.

Konturen mit einem Fineliner nachziehenBilder



Abschließend nehme ich mir ein paar Buntstifte (Holzstifte, Filzer, COPICs…) und koloriere die Zeichnung einmal grob in den Farben, die ich mir vorstellen könnte. Die Farbigkeit kann natürlich später noch variieren, letztlich gibt es einfach einen noch besseren Eindruck bzgl. der Optik des Icons und ermöglicht theoretisch das Aufgreifen von Farben mit dem Farbwähler in Photoshop. Warum auch immer, ich tue mich bei der Farbwahl mit „analogen Stiften“ leichter als mit dem Farbwähler in Photoshop. Vielleicht liegt es einfach an der begrenzten Farbanzahl. :)

Das fertig gescribbelte IconBilder



Mit der fertigen Skizze ist auch dieser Workshop beendet. Weiter geht es für die Interessierten im zweiten Teil.


Auflösung Iconrätsel

Zu guter Letzt bin ich euch noch die Auflösung der beiden Iconreihen schuldig.

Windows 7, von links nach rechts: Sound, Leistungsinformationen und -tools, Infobereichsymbole, Anmeldungsinformationsverwaltung, Ortungs- und andere Sensoren, Center für erleichterte Bedienung, Wartungscenter, Schriftarten.

OS X Snow Leopard, von links nach rechts: Systemeinstellungen, Aktivitätsanzeige, Bildschirmfoto,Terminal, Schriftsammlung, Time Machine (Backup), Audio-MIDI-Setup, Festplatten-Dienstprogramm.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.06.2017 - 00:40

Vielen Dank

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 20:10

Danke, tolles Tutorial.

Portrait von hierkarl
  • 25.05.2014 - 20:31

freu mich schon darauf, den nächtsen Teil zu lesen, cool, danke :)

Portrait von Photoshop_Anfänger
  • 03.08.2013 - 02:11

Vielen Dank für dieses Tutorial! Habe nämlich lange genug nach einem Tutorial gesucht und nicht gefunden. Aber nun habe ich ja eines, dass sogar in mehreren Teilen ist. :-)

Portrait von Zimtkuchen
  • 09.02.2012 - 07:49

Gutes Tutorial Danke

Portrait von hamsibone
  • 05.01.2012 - 19:58

Vielen Dank für das Tutorial

Portrait von bluemchen10
  • 23.08.2011 - 11:20

Sehr viele Informationen und gut zu verstehen :) Tolles Tut, sehr interessant.

Portrait von nasto
  • 27.06.2011 - 03:27

Hoffentlich kriege ich das auch so hin

Portrait von mhug01
  • 10.05.2011 - 13:37

Hilfreiches Tut. Besten Dank!

Portrait von DaKleene
  • 05.04.2011 - 11:05

gutes Tutorial... guter Einstieg in die Erstellung von Icons

Portrait von dragon1985
  • 18.03.2011 - 15:57

Sehr schönes und klar strukturiertes Tutorial. Hab lange nach so einem sehr guten Grundlagen-Tutorial gesucht! Danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.03.2011 - 14:36

Sehr gutes Tutorial, wenn man die ersten Schritte zur Erstellung eines Logos machen will.

Portrait von ap_colibri
  • 11.03.2011 - 16:39

Das Tutorial ist vom Aufbau sehr gut umgesetzt, beginnend vom theorethischen zum praktischen.
Das Video Tutorial konnt ich mir leider nicht anschauen, aber die PDFs haben inhaltlich und optisch
gut gefallen.
Man sieht dass Arbeit in die Gestaltung und Umsetzung gesteckt wurde.
Für einen Anfänger zudem leicht verständlich und gut nachvollziehbar.
Vielen Dank für dein Tut!

Portrait von WPVins
  • 11.03.2011 - 15:17

Ein für mich ausgesprochen hilfreiches Tutorial: danke!

Portrait von maxsteel
  • 10.03.2011 - 17:33

Tolles Tutorial, sehr interessante Tipps.
Nur leider bekomm ich das mit dem zeichnen nicht so toll hin wie du ;)
Aber ich werde mir auch im 2. Teil Mühe geben.
MfG maximilian

Portrait von philip-fuchslocher
  • 10.03.2011 - 17:43

Dafür gibt es dann die Scribbles ja auch als Arbeitsmaterial im zweiten Teil. :)

Portrait von Dunehero
  • 10.03.2011 - 12:24

Ein sehr gutesTut ! Verständlich erklärt, ein super Einstieg

Portrait von sveni98
  • 09.03.2011 - 18:25

Also ich finde dein Tut cool und interessant. Aber wann kommt der zweite Teil raus????

Portrait von svhresi
  • 09.03.2011 - 02:52

Großartig, genial erklärt und faszinierend zuzuschauen....freue mich auf Teil 2

Portrait von tester33
  • 08.03.2011 - 22:03

Hi,
super Tut, werd bald den zweiten Teil lesen.
mfg
tester33

x
×
×