-
Icons erstellen - Teil 1: konzipieren und scribbeln
20.02.2011 in Composing und Illustrationen von philip-fuchslocher
- Kategorie: Composing und Illustrationen
- Erstellt mit Programmversion: Kein Programm nötig
- Kompatibel ab Programmversion: Kein Programm nötig
- Dateigröße (PDF): 1.9 MB
- Bisherige Zugriffe: 3040
Tipp: Dieser Inhalt befindet sich auch auf der:
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.
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.
- Download: Screenguide-Magazin als PDF zum Download
- Download: Vektor-Logo (Eidechse)
- Download: Sepia-Vintage-Effekt-Aktion
- Tutorial: Ballons aus einer Schublade
- Tutorial: Neue Pinsel erstellen leicht gemacht
- Tutorial: Kommerzielle Fotografie 01: Berufswunsch Fotografie
- Tutorial: Linien zum Glühen bringen
- Videotraining: Lichtscheinkontureneffekt mit Animation
- Videotraining: CorelDRAW X6 Grundlagen - Hilfsmittel Freihand, 2-Punkt-Linie, Bezier, B-Spline, Polylinie, Stift, 3-Punkt-Kurve
- Videotraining: CorelDRAW X6 Grundlagen: Hilfsmittel Form - Heranziehen, Zurückweisen
- Videotraining: Die Programmoberfläche und der Arbeitsbereich von Adobe InDesign
Ähnliche Inhalte
Tutorial: Icons erstellen - Teil 2: digitalisieren und ausgeben
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.
Kommentare
Weitere KommentareAchtung: 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.
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.
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.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.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.
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.
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:
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.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.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.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.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.
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.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.Auf Basis des vorangegangenen Brainstormings beginnt ihr nun, eure Motive zu skizzieren. Versucht hier verschiedene Perspektiven, Größen, Detailgrade etc.
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.
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. :)
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.
-
Reklame
-
-
- Hintergrund einfügen
- Cache ohne externe Installation gesucht
- Kaufempfehlung: Monitor für Bildbearbeitung/DTP
- Firepro oder Quadro
- Traum Silhoueten
- Tipps zum Kauf einer Kamera
- Welcher tragbare LCD Monitor an Canon 6D?
- gibt es Sättigungspinsel?
- Alte "CSxx" Programme deinstallieren
- Ebeneneigenschaften "auslesen"
- Photoshop Dokument 125x245cm ein paar fragen
- Probleme mit dem "include" Befehl
- Partner für komplette Betreuung unseres Webshops gesucht
- Creative Cloud deinstalliert, nun nicht mehr installierbar
- Gif Animation für Avatar
- Gelbes Band dunkelrot einfärben
- Fehler "Hugin" Panorama erstellen
- NIK Filter Collection
- Wordpress Gallery Shortcode
- Rechte von Musiktitel
-
-
Aktuelles Commag
Anzeige
-
Anzeige
nullsieben
02.03.2011 - 11:35
danke fürs schreiben!
Sasha
28.02.2011 - 23:27
Hallo, ich habe mir gerade das Tutorial durch gelesen und finde es wirklich gut gemacht. Jetzt bin ich auf den zweiten Teil gespannt. Bitte mehr davon :)
hermaut
28.02.2011 - 13:22
Danke für dein hilfreiches Tutorial.
TPM
28.02.2011 - 10:02
Vielen Dank für das Tutorial. Auch wenn ich schon diverse Icons erstellt habe, hat es mir geholfen.
sonje
27.02.2011 - 16:18
Vielen Dank für das informative Tutorial.
kleinerastronom
27.02.2011 - 15:27
sehr gute Tutorial, bietet einen super Einstieg
Rosenresli
27.02.2011 - 14:58
Super, einfach toll erklärt!!!! Danke und vielleicht bald mehr.
Danach habe ich schon längere Zeit gesucht. Danke!!!!
zotexx
27.02.2011 - 14:25
Echt klasse!
Ich erstelle mir im Moment selber Icons für ein paar Spiele und durch deine Arbeit hier hast du mir echt geholfen. Schön ausführlich und ordentlich erklärt ,wie ich es gerne habe.
Vielen Dank und auf zu Teil 2
juperman
27.02.2011 - 13:46
Gut gemacht, sehr schön!
Stierchen
26.02.2011 - 19:22
Ein klasse Tutorial...sehrgut
StVet
26.02.2011 - 19:08
Danke, darauf habe ich gewartet
chrisharb
26.02.2011 - 18:08
Habe mir gerade das Tutorial angesehen. Wirklich sehr anschaulich und kompakt zum Einstieg in dieses Thema. Werde mir auch gleich den zweiten Teil anschauen. Vielen Dank.
icebear83
26.02.2011 - 14:27
Schön beschriebenes Tutorial. Werde gleich den nächsten teil lesen.
Multibilderfreund
25.02.2011 - 19:57
Ein sehr schön nachvollziehbar strukturiertes Tutorial, mit dem man auch echt was anfangen kann. Wer sich nicht jeden Tag damit beschäftigen kann (oder muss), findet hier auf den Punkt gebracht, worauf es ankommt. Weiter so!
Ines_p
25.02.2011 - 18:50
Ab dem Brainstorming wurde es für mich sehr interessant - hat mir super gefallen!
Danke für die tolle und leicht verständliche Erklärung! :)
Bin schon auf Teil 2 gespannt...
Nef10
25.02.2011 - 16:58
Super Tutorial, kann ich gut gebrauchen!
Handicki
25.02.2011 - 16:28
Danke, ha schon immer sowas gesucht :-)
Wilda
25.02.2011 - 16:07
Gutes Tutorial, sehr anschaulich und das "Rätsel" fand ich auch sehr gut!
bergfex62
25.02.2011 - 13:56
Herzlichen Dank für den ersten Teil, gibt einen guten Einstieg in das Thema, das auch für andere Bereiche adapiert werden kann.
Christof
ghostii
25.02.2011 - 13:34
Sehr gut gemacht! Wunderbar einfach und ausführlich erkärt! Gleich mal Teil 2 anschauen. =)