Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Ähnliche Inhalte

Tutorial: Icons erstellen - Teil 2: digitalisieren und ausgeben
DVD-Werbung
Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Retusche & Composing

  • 100 Tutorials zu Retusche & Composing
  • 34 Stunden Video-Training, über 3.300 PDF-Seiten Know-how
  • Alle Tutorials sind als HTML für die Webansicht und als PDF für die Web- und Druckansicht optimiert.
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von Zimtkuchen

    Zimtkuchen

    09.02.2012 - 07:49

    Gutes Tutorial Danke

  • Alternative Portrait von hamsibone

    hamsibone

    05.01.2012 - 19:58

    Vielen Dank für das Tutorial

  • Alternative Portrait von bluemchen10

    bluemchen10

    23.08.2011 - 11:20

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

  • Alternative Portrait von nasto

    nasto

    27.06.2011 - 03:27

    Hoffentlich kriege ich das auch so hin

  • Portrait von mhug01

    mhug01

    10.05.2011 - 13:37

    Hilfreiches Tut. Besten Dank!

  • Alternative Portrait von DaKleene

    DaKleene

    05.04.2011 - 11:05

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

  • Alternative Portrait von dragon1985

    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

    User hat PSD-Tutorials.de verlassen

    18.03.2011 - 14:36

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

  • Alternative Portrait von ap_colibri

    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!

  • Alternative Portrait von WPVins

    WPVins

    11.03.2011 - 15:17

    Ein für mich ausgesprochen hilfreiches Tutorial: danke!

  • Alternative Portrait von Dunehero

    Dunehero

    10.03.2011 - 12:24

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

  • Alternative Portrait von tester33

    tester33

    08.03.2011 - 22:03

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

  • Portrait von philip-fuchslocher

    philip-fuchslocher

    08.03.2011 - 09:43

    Nun auch als Video-Tutorial online: http://www.psd-tutorials.de/video-trainings/2d/adobe-photoshop/composing-und-illustrationen/view/15770--icons-i-konzipieren-und-scribbeln

  • Portrait von eyexperience

    eyexperience

    06.03.2011 - 10:12

    Echt tolles tut ... danke dir

  • Alternative Portrait von Joerg_0609

    Joerg_0609

    06.03.2011 - 10:00

    einfach und sehr gut beschrieben. Vielen Dank !

  • Alternative Portrait von spurtnix

    spurtnix

    03.03.2011 - 21:53

    Sehr guter Einstieg in die Thematik.

  • Alternative Portrait von Daklos

    Daklos

    03.03.2011 - 21:14

    Kann mich nur anschließen... sehr gut geschriebenes Tutorial

  • Alternative Portrait von Sorex

    Sorex

    03.03.2011 - 12:39

    das war ein sehr interessantes tutorial. Danke

  • Alternative Portrait von Legatos

    Legatos

    03.03.2011 - 05:57

    Vielen Dank. Ich hätte ja echt nicht gedacht, dass man sich über Icons wirklich sooo viele Gedanken machen kann (und sollte).

  • Alternative Portrait von karinccc

    karinccc

    02.03.2011 - 15:55

    vielen Dank für das Tutorial Gut zu lesen!

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.

Bilder


 
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.

Bilder

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.

Bilder


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.

Bilder


 

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.

Bilder

Bilder


 

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.

Bilder


 

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.

Bilder


 

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:

Bilder

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.

Bilder


 

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.

Bilder


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.

Bilder

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.

Bilder


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.

Bilder


 

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.

Bilder


 

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.

Bilder


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.

Bilder


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.

Bilder


 
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.

Bilder


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. :)

Bilder


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.
Drupal Programmierung • vBulletin 0.041 • ZF-App 0.432 • Total 0.473