Icons für Windows XP

Dieses Tutorial behandelt das Erstellen von Icons für Windows XP. Schritt für Schritt wird erklärt, wie Sie von einer Handskizze bis zum fertigen Icon kommen.

Dieser Artikel beschreibt das Erstellen von Icons für Windows XP. Windows XP unterstützt Icons mit 32-bit Farbtiefe, welche sich aus 24-bit Bildern mit einem 8-bit Alpha-Kanal zusammensetzen. Dies ermöglicht die Darstellung von glatten (antialiased) Kanten. Jedes Icon sollte in drei verschiedenen Farbtiefen vorhanden sein, um unterschiedliche Monitoreinstellungen zu unterstützen.

  • 24-bit mit 8-bit Alpha-Kanal (32-bit)
  • 8-bit (256 Farben) mit 1-bit Transparenz
  • 4-bit (16 Farben) mit 1-bit Transparenz

Schlagschatten

Um die Icons besser zu betonen und den Raumeindruck zu erhöhen, sind Windows XP Icons mit einem leichten Schlagschatten versehen. Diesen Effekt erzielt man mit Adobe Photoshop und wird in weiterer Folge genauer erklärt. Zusätzlich besitzt jedes Icon eine „outline“ um sicherzustellen, dass es auf unterschiedlichen Hintergrundfarben gut zur Geltung kommt.

Visualisierung in Illustrator oder Freehand

Alle Icons für Windows XP werden grundsätzlich in einem Vektor-Programm, wie Adobe Illustrator oder Macromedia Freehand, erstellt.

Screenshot — Illustrator

Beim erstellen der Icons sollte auf mehrere Dinge geachtet werden:

  • Stellen Sie die Maßeinheiten auf „Pixel“ — dadurch erhält man klarere Konturen und Linien beim Importieren in Photoshop
  • Erstellen Sie die Icons immer in drei verschiedenen Größen (48x48, 32x32, 16x16)
  • Falls Sie vorhaben die Icons mit einem Schlagschatten zu versehen wollen, designen Sie vorerst für die Icons in folgenden Formaten: 46x46, 30x30, 14x14)
  • Falls Sie Icons für Menüleisten und dergleichen designen, verwenden Sie folgende zwei Größen (24x24 bzw. 16x16)

Weiterbearbeitung in Photoshop

Die fertigen Icons werden in Photoshop kopiert (Arbeitsfläche 48x48px) und mit einem Schlagschatten versehen. Ändern Sie den Winkel auf 135°, die Distanz und die Größe jeweils auf 2px. Die Farbe sollte Schwarz sein und die Deckkraft auf 75% eingestellt sein. Dies sollte in etwa so aussehen.

Screenshot —
Photoshop

Um den Schlagschatten mit dem Bild zu vereinen, erstellen Sie eine zweite Ebene (Strg+Shift+N), verbinden beide Ebenen und fügen sie mit dem Befehl „Strg+E“ zusammen.

Zusammenfügen der beiden Ebenen

Fertigstellen mit Microangelo-Studio

Speichern Sie das Bild als normale Photoshop-Datei ab und öffnen Sie das Microangelo-Studio. Über den Menüpunkt „Tools — New Image Format“ erhalten Sie ein Dialogfenster, mit welchem Sie die Eigenschaften des Arbeitsbereiches einstellen können. Wählen Sie bei „Farbtiefe“ die Option „Windows XP“ und stellen Sie die Größe auf 48x48 Pixel.

Importieren Sie nun über den Menüpunkt „Edit — Import“ die zuvor erstellte PSD-Datei. Nun brauchen Sie das Icon nur mehr abzuspeichern — fertig. Fertige Icons können Sie im Showroom von Bartelme Design herunterladen. Das unten stehende Bild, zeigt einen Ausschnitt jener Icons, die ich bereits mit Illustrator nachgebaut habe.

Nachgebaute
XP-Icons

Für genauere Information zum Thema “Icon-Design für Windows XP” finden Sie auf der Website von Microsoft.

1 comments so far

Skip to comment form

Mark November 03, 2006 at 02:56 AM

Danke für die Infos Wolfgang!

Commenting is not available in this weblog entry.