Anzeige
Tutorialbeschreibung

Icondesign mit Photoshop

Icondesign mit Photoshop

Icons sind mehr als optische Aufwertung eines Interfaces. Sie können die Usability deutlich verbessern - oder auch verschlechtern, wenn man es falsch angeht. Dieser Workshop zeigt konzeptionelle Ansätze und eine mögliche Vorgehensweise in Photoshop zum Erstellen eigener Icons anhand eines Beispielprojekts.

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


Icons konzipieren

Wie bei nahezu allen gestalterischen Vorhaben sollte auch beim Icondesign der erste Schritt mit Stift und Papier erfolgen. Ein einführendes Brainstorming zu möglichen Begrifflichkeiten und Metaphern, gefolgt von verschiedenen Skizzen hilft, im Vorfeld die Funktionalität eines Icons zu prüfen. Dabei sollten insbesondere folgende Punkte beachtet werden:
  • Verwenden einer klaren und verständlichen Metapher. Ein wenig abgedroschen, aber sehr funktional ist der Brief als Symbol für Kontakt. Der Betrachter soll wissen, was ihn nach einem Klick auf ein Icon erwartet. Es ist nicht zwingend nötig, das Rad neu zu erfinden. Oftmals reicht es, dieses einfach noch ein wenig runder zu machen. :)
  • Stil und optische Größe einer Iconserie sind gleich. Die physikalische Größe kann und muss sogar in vielen Fällen untereinander abweichen. Gestaltet man Icons für ein Betriebssystem (z.B. alternative Ordner-Icons) wird sogar dringend angeraten, nicht bis ganz an die Dokumentgrenzen (später mehr zu den Größen) zu gehen, um ein Aufeinanderkleben der Icons bei einem engen Darstellungsraster zu vermeiden.
  • Icons für Betriebssysteme müssen in den Größen 512 Pixel bis zu 16 Pixel erkennbar sein. Beim Skizzieren sollte darauf geachtet werden, nicht zu detailliert zu arbeiten bzw. sicherzustellen, dass der Sinn des Icons auch stark reduziert noch verständlich bleibt.
  • Stil der Icons muss der Umgebung angepasst sein, in der sie eingesetzt werden. Das ist insbesondere bei der Verwendung auf Websites ein wichtiger Aspekt. Auf einer seriösen und nüchternen Nachrichtenseite wirken knallig bunte Comic-Icons sehr wahrscheinlich als Fremdkörper.
  • Testet die Skizzen an Bekannten und Freunden. Es ist manchmal nicht nur informativ, sondern auch sehr erheiternd, welche Assoziationen in eure Überlegungen gemacht werden. So erfahrt ihr schnell, ob ein Icon auch digital umgesetzt funktionieren kann.



 
Natürlich gibt es viele weitere Stolpersteine, die es auf dem Weg zum eigenen Icon zu umgehen gilt. Ich möchte mich hier allerdings überwiegend auf den praktischen Teil beschränken. Für die Interessierten hier jedoch einige sehr spannende (englische) Artikel als Weblinks:

Ebenfalls hilfreich, vor und während der Gestaltung ist es, sich von bestehenden Icons inspirieren zu lassen. Einige nennenswerte Künstler und Agenturen sind hier: David Lanham, Jonas Rask, The Iconfactory oder Turbomilk.


Icons gestalten

Nun geht es an die Praxis. Nehmt euch hierfür Zeit. Gerade an den Details könnt ihr, je nach Spaß am Kreativsein, viel, viel Zeit verbringen. Ein gehobenes Grundverständnis der Funktionen Photoshops sollte zudem vorhanden sein. Allem voran die Arbeit mit dem Zeichenstift. (Ich höre schon das Murren ;) ). Solltet ihr dennoch einmal steckenbleiben: Die Arbeitsdaten zu jedem einzelnen der folgenden Schritte findet ihr als .zip zum Download.


 

1. Skizzieren

Im ersten Schritt geht es, wie bereits in der Einleitung erwähnt, ans Skizzieren. Um eine einheitliche Basis für diesen Workshop zu haben, verwendet am besten direkt die Skizze, die ihr im Arbeitsmaterial findet (icon-01-scribble.jpg). Natürlich steht es euch frei, eigene Entwürfe zu verwenden. Die generelle Vorgehensweise bleibt identisch.

Scribble erstellenBilder



 

2. Datei einrichten

Erstellt euch eine neue quadratische Photoshop-Datei mit einer Kantenlänge von 512 Pixel, weißem  Hintergrund und dem Farbmodus RGB. Die Auflösung spielt keine Rolle, da nur für den Monitor gearbeitet wird. Platziert die Datei „icon-01-scribble.jpg“ mittig und flächenfüllend und reduziert die Deckkraft der Ebene auf Etwa 50%, um beim anschließenden Nachzeichnen eine bessere Übersicht zu haben.

Datei einrichtenBilder



 

3. Pfade erstellen

Die nächsten Schritte sind nun der langweiligste und zeitaufwendigste Teil. Nach dieser Vorarbeit entschädigt das anschließende Kolorieren jedoch aufgrund seiner Einfachheit. Zieht mit dem Zeichenstift alle Einzelelemente nach, wie sie in der Abbildung farbig markiert sind. Insgesamt sind es 12 Elemente, die auf diese Weise erstellt werden müssen. (Pfeil und Schrift bleiben vorerst bewusst außen vor).

Mit Symmetrie arbeitenBilder



Mit Symmetrien arbeiten: Bei symmetrischen Objekten wie diesem empfiehlt es sich, in der Mitte eine Hilfslinie zu ziehen und nur eine Hälfte des Icons zu zeichnen. Auf diese Weise vermeidet ihr Unterschiede zwischen rechter und linker Bildseite. Kopiert jede erstellte Hälfte, spiegelt sie horizontal und richtet sie so aus, dass sie gerade am Rand der anderen Hälfte anstößt. Wählt beide Pfadteile mit dem Pfadauswahl-Werkzeug und kombiniert diese im Steuerungsbedienfeld mit der Option Dem Formbereich hinzufügen.


 
Alle Pfade liegen nun als ein Arbeitspfad vor. Die Abbildung zeigt, dass die Pfadkonstrukte nicht identisch mit der Skizze sind. Lasst euch davon nicht verunsichern. Es war nur eine Skizze und die Symmetrie ist in diesem Fall wichtiger. Solltet ihr mit den letzten beiden Schritten Probleme gehabt haben, verwendet ab nun einfach die Datei „icon-04-pfade-erstellen.psd“.

Erstellen der PfadeBilder



 

4. Pfade sortieren

Erstellt nun für jedes der eben gezeichneten Elemente einen eigenständigen Pfad. Dazu klicken ihr mit gedrückter Alt-Taste auf die Schaltfläche Neuen Pfad erstellen in der Pfade-Palette. Die Bezeichnungen und Hierarchie entnehmt der untenstehenden Abbildung. Das Einhalten der gezeigten Reihenfolge ist nicht zwingend nötig, erleichtert aber die Übersicht. Wählt mit dem Pfadauswahl-Werkzeug ein beliebiges Pfadelement des Arbeitspfades und schneidet es mit Strg/Cmd + X aus. Wechselt zu dem zum Element gehörigen Pfad und fügt es mit Strg/Cmd + V wieder ein. Photoshop verwendet dabei glücklicherweise exakt die gleiche Position. Verfahrt mit allen anderen Pfadstücken identisch, bis jedes Icon-Segment als eigener Pfad vorhanden ist.

Pfade hierarchisch sortierenBilder



 

5. Ebenenmasken erstellen

Ladet vom untersten Pfad (Schatten Boden) eine Auswahl, indem ihr mit gedrückter Strg/Cmd-Taste auf dessen Miniatur klickt. Erstellt eine neue Ebene, der ihr den Namen des Pfades gebt. Klickt anschließend auf das Symbol Ebenenmaske hinzufügen in der Ebenenpalette. Photoshop verwendet automatisch die bestehende Auswahl als Basis dafür. Verfahrt mit den anderen Pfaden genauso.

Hinweis: Zugegeben, das ist eine sehr mühsame Arbeit, wenn man es manuell angeht. Zum Glück gibt uns Photoshop mit der Skripting-Funktion jedoch einen nützlichen Helfer an die Hand. Im Arbeitsmaterial findet ihr die Datei "Pfad_zu_Ebene-Fuchslocher.jsx". Führt diese aus, nachdem ihr die Pfade wie unter Schritt 4 beschrieben erstellt habt. Dazu wählt ihr Datei>Skripten>Durchsuchen und wählt die Datei von eurer Festplatte aus. 

Ebenenmasken aus den Pfaden generierenBilder



 

6. Grundfarben definieren

Klickt euch nun von Ebene zu Ebene und füllt diese mit einer Grundfarbe, die eurer Vorstellung nach passend erscheint. Seid kreativ. Achtet lediglich darauf, keine zu dunkle oder helle Farbe zu verwenden, da ihr in den Folgeschritten noch Licht und Schatten setzen müsst. Speichert zudem jede verwendete Farbe mit schlüssigem Namen in der Farbfeldpalette ab.

Grundfarben der Einzelelemente definierenBilder



 

7. Schattenfarben definieren

Hinweis: Ihr findet die in diesem Workshop verwendete Farbpalette unter dem Namen „boxicon.ase“ auf der Heft-DVD. Ihr könnt sie über die Option Farbfelder laden … im Farbfelder-Palettenmenü importieren.

Wechselt zu der Ebene Kante Oben. Greift mit der Pipette (I) die Grundfarbe der Ebene auf und definiert von dieser Farbe ausgehend mit dem Farbwähler einen dunkleren Ton, den ihr auch direkt in der Farbfeldpalette abspeichert. Verfahrt genauso für die anderen Farben und Ebenen der Workshop-Datei.

Definieren der Schatten-FarbenBilder



 

8. Schatten setzen

Fügt nun auf den einzelnen Ebenen mit der jeweils zuvor definierten Schattenfarbe dunkle Akzente hinzu. In diesem Beispiel könnt ihr dazu ausschließlich mit dem Verlaufswerkzeug (Vordergrundfarbe zu Transparent) arbeiten. In der Abbildung sind einige exemplarische Verlaufsstrecken mit weißen Pfeilen markiert.

Plastizität mit Schatten auftragenBilder



Arbeiten mit dem Pinsel: Was hier ausschließlich mit Verläufen erreicht wird, lässt sich natürlich für organischere Formen noch viel präziser mit dem Pinsel erzielen. Wählt eine weiche Pinselspitze mit geringer Deckkraft (ca. 20-30%) und arbeitet von außerhalb des sichtbaren Bereichs der Ebenenmaske, sodass nur die Randbereiche des Pinsels noch Farbe auftragen. Somit habt ihr perfekte Kontrolle.

Optional verfahrt ihr nun für eine Betonung der Lichter wie in den Schritten 7 und 8.


 

9. Beschriftung hinzufügen

Wählt aus der Pfeile-Bibliothek des Eigene-Form-Werkzeugs die Spitze „Pfeil 12“ und zieht diesen als weißes Formobjekt so groß auf, dass er mit etwas Luft in den schwarzen Streifen passt. Wechselt per Strg/Cmd+T in den Frei-Transformieren-Modus und dreht den Pfeil um 90° im Uhrzeigersinn. Zieht zudem den linken oberen Anfasser ein Stück nach links, um die Perspektive zu simulieren.

Pfeil einsetzen und verzerrenBilder



 
Für den Text verwendet ihr eine schmale, serifenlose Schrift. In diesem Beispiel die Arial Narrow mit einer Größe von 50 Pixel. Rastert den Text über Ebene>Rastern>Text und verzerrt ihn ebenfalls über den Frei-Transformieren-Modus. Zieht diesmal den rechten oberen Anfasser nach rechts.

Text platzieren und perspektivisch anpassenBilder



 

10. Nahtkanten säubern

Je nachdem, wie sauber ihr die Pfade zu Beginn des Workshops erstellt habt, sind noch leichte Nahtstellen zwischen den Einzelelementen zu sehen. Diese könnt ihr kaschieren, indem ihr mit einer kleinen, harten Pinselspitze und weißer Farbe auf der Ebenenmaske der jeweiligen Ebene entlang der Kante zieht. Macht das am besten auf der unteren von zwei Ebenen, die einen solchen Blitzer erzeugen.

Säubern der Nahtkanten per EbenenmaskeBilder



 

11. Feinschliff

Um das Icon in verschiedenen Größen zu speichern, fasst ihr erst alle Ebenen in einer Gruppe als Backup zusammen und dupliziert sie. Erstellt für jede gewünschte ein weiteres Duplikat und skaliert es auf die  gewünschte Größe. Mitunter wird es nötig sein, die Details bei den kleinen Versionen zu vereinfachen bzw. komplett zu entfernen. Auch ein leichtes Schärfen kann verschwommene Details in geringem Maße verbessern.

Feinschliff am IconBilder



.ico-Dateien: Wenn ihr das erstellte Icon neben dem Einsatz auf einer Website generisch verwenden möchtet, beispielsweise als Ordnersymbol für euer Betriebssystem, müsst ihr es im .ico-Format abspeichern. Leider unterstützt Photoshop dieses Format nicht von Haus aus. Abhilfe schafft die Dateierweiterung von Telegraphics (http://www.telegraphics.com.au/sw/) , die ihr im Photoshop-Unterordner Plugins>File-Formats ablegt. Mit dem nächsten Neustart steht dieses Format im Speichern-Dialog zur Verfügung. Das ebenfalls bei Telegraphics erhältliche icobundle-Utility ermöglicht zudem, mehrere Größen eines Icons in einer .ico-Datei zu speichern. Je nach Darstellungsgröße verwendet das Betriebssystem dann automatisch die entsprechende Variante.



Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von micke_p
  • 02.11.2012 - 04:27

Sehr ausführlich, schön veranschaulicht, danke !

Portrait von babuschka
  • 09.08.2012 - 14:46

Die Idee ist super, nur:
Ich würde mir diese prozedur mit Photoshop niemals antun!
Illustrator ist für Icons, meiner Meinung nach, viel geeigneter.
Ich habe das komplette Tutorial durchgelesen. Es ist gut erklärt.
Die komplette Box habe ich dann doch mit Illustrator gemacht.

Portrait von JackTR21
  • 16.11.2010 - 11:12

Datei kann nicht komplett geladen werden :(
Bei 93% bricht der Download ab.

Portrait von WebDiver_09
  • 14.09.2010 - 11:41

Interessant, mal sehn wie das auf 'nem Mac funktioniert.
Gute Links angegeben.

Portrait von berlinsdoenerfress
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.06.2010 - 12:15

sehr gut erklärt, sehr gut verständlich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.06.2010 - 15:38

sehr gut erklärt, sehr gut verständlich

Portrait von d3221
  • 10.04.2010 - 11:57

Wenn man malen könnte wärs nett :D Gibts dazu auch ein Tutorial? :( :D

Portrait von krafdi
  • 23.03.2010 - 20:33

Gut gemachte Anleitung! Danke

Portrait von flitecen
  • 19.12.2009 - 09:02

Sehr gut nachvollziehbar. Danke

Portrait von Susan99
  • 18.12.2009 - 19:05

Sehr gut erklärt und nachvollziehbar. Danke Vielmals!
LG Susan

Portrait von reni_46
  • 18.12.2009 - 17:26

Prima Anleitung.Und man kann es für einiges mehr gebrauchen.
Übrigens: .ico kann der IrfanView machen. Das ist ein gratis Bildbetrachter

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.12.2009 - 11:28

Schön erklärt, sehr gut!

Portrait von chrishu
  • 18.12.2009 - 10:57

wenn man das plugin nicht hat ist das auch kein beinbruch. einfach als bmp abspeichern und die dateierweiterung .bmp durch .ico ersetzen....et voila...

Portrait von klausilein
  • 18.12.2009 - 10:22

Danke! Gut gemachte Anleitung!

Portrait von Grisu69
  • 18.12.2009 - 10:03

Einwandfreie sauber Erklärung super zum Nacharbeiten

Portrait von Lafi
  • 17.12.2009 - 11:37

Hoffentlich bekomm ich es auch hin :) aber es ist sehr gut erklärt, und somit denke ich das es schon klappt :)

Portrait von EManze
  • 17.12.2009 - 10:14

Schönes Tut! Dankeschön

Portrait von Yipyip
  • 16.12.2009 - 09:56

Supi, da freut sich mein Desktop=)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.12.2009 - 19:11

Prima Anleitung.

Genau was ich gerade benötige.
Und man kann es für mehr gebrauchen.

x
×
×