Werbung
Es gibt eine große Anzahl kostenloser Icon-Sets online, aber wenn Sie über die reine Verwendung hinausgehen möchten, gibt es auch eine Reihe von Problemen, die damit verbunden sind. Lizenzierung und das Fehlen von Branding sind nur zwei davon.
Selbst wenn Sie kein Softwareentwickler sind, ist das Erlernen der Erstellung eigener Symbole eine äußerst nützliche Fähigkeit. Sie können Ihrem Computer einen einzigartigen Skin geben oder Ihre Dienste für die Community und die Unternehmenswelt bereitstellen.
Dies ist keineswegs ein vollständiges Tutorial für das Icon-Design. Wir bringen Sie gerade erst in die rudimentären Grundlagen ein - technische Details, eine Design-Checkliste und ein Toolset für das Icon-Design.
Icon Technische Daten
Im Folgenden finden Sie einige Spezifikationen, die Sie bezüglich des Symbolformats kennen sollten, vor allem Bildauflösungen und Dateiformate.
Größe
Die Wichtigkeit der Größe wird weiter unten diskutiert. Im Moment bleiben wir bei den technischen Aspekten.
Symbole sind immer quadratisch. Dies bedeutet, dass ein rechteckiges Symbol entweder gestreckt oder verkleinert wird, um die gesamte Leinwand auszufüllen oder hinein zu passen. In beiden Fällen fallen stark rechteckige Symbole schlecht auf. Die folgenden Symbolgrößen werden am häufigsten verwendet:
- 16 x 16 px * **
- 24 x 24 px
- 32 x 32 px * **
- 48 x 48 px * **
- 64 x 64 px
- 96 x 96 px
- 128 x 128 px **
- 256 x 256 px **
- 512 x 512 px **
Windows XP empfiehlt die Verwendung von Auflösungen von 16 x 16, 32 x 32 oder 48 x 48 *. Wenn keine verfügbar sind, wird die Größe des Symbols mit der nächstgelegenen Auflösung auf 256 x 256 geändert. Da die Desktop-Auflösungen immer höher werden, wird empfohlen, immer größere Auflösungen einzuschließen. Das Apple ICNS-Format unterstützt die Größen 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 und sogar 512 x 512 **.
Datei Format
Unter Windows ist das am häufigsten verwendete Dateiformat für die Symbolverteilung ICO. Das Mac-Gegenstück ist ICNS (Apple Icon Image Format).
Die Icon Design Checkliste
Es gibt kein einziges Tutorial, um immer wieder das perfekte Symbol zu entwerfen. Unterschiedliche Themen und Designs erfordern unterschiedliche Ansätze, und der „aktuelle Trend“ ist in ständigem Wandel. Im Folgenden finden Sie drei wichtige Säulen der Symbolerstellung, die sich immer wieder bewährt haben. Wenn Sie mit dem Entwerfen von Symbolen noch nicht vertraut sind, denken Sie immer an die Symbol-Checkliste.
Unverkennbar
Symbole müssen vor allem unverkennbar sein. Die Beziehung zu Ihrer Bewerbung muss für alle über Zeit-, Kultur- und Altersunterschiede hinweg offensichtlich sein. Bekämpfen Sie die Versuchung, auffällige Symbole zu erstellen, die keine Relevanz haben, und bleiben Sie bei einem einfachen, soliden und offensichtlichen Design.
Sehen Sie dies nicht als Hindernis für Ihre Kreativität. Symbole können schön sein und zum Nachdenken anregen, sollten aber nicht für Interpretationen offen sein (lesen Sie: Rätselraten am Ende des Benutzers).
Gleichmäßigkeit
Wenn Sie ein Icon-Set entwerfen, halten Sie das Design einheitlich.
Stellen Sie sicher, dass Sie einen gemeinsamen Thread haben, der diese Symbole miteinander verbindet und den Benutzern die Synergie zeigt. Das Ganze muss größer sein als die Summe der Teile.
Größe
Symbole werden immer in mehreren Größen erstellt. Dies wirkt sich in mehrfacher Hinsicht auf das Design aus.
Für den Anfang müssen Symbole unabhängig von der Größe gut und erkennbar aussehen. Verringern Sie den Kontrast an den Seiten, um gezackte Kanten zu vermeiden, und heben Sie wichtige Details hervor, um den Fokus bei der kleinsten Implementierung des Symbols beizubehalten.
Auf technischer Ebene lassen sich Symbole am besten mit Vektoren gestalten, Bildern, die aus endlos skalierbaren Formen bestehen, und nicht mit einer festgelegten Zusammensetzung von Pixeln. Wenn Ihre Auflösung jedoch hoch genug ist, funktionieren Bitmaps genauso gut.
Das Icon Design Toolset
Photoshop ist eine großartige Anwendung zum Entwerfen von Symbolen. Sie haben (fast) alle Werkzeuge, die Sie benötigen, um Vektorgrafiken zu erstellen oder Bitmaps zu bearbeiten und komplexe Effekte und Schattierungen anzuwenden. Am wichtigsten sind folgende Tools:
Stiftwerkzeug
Mit dem Stiftwerkzeug können Sie skalierbare Vektorgrafiken erstellen. Sie können eine Form zeichnen, indem Sie Knoten erstellen und ziehen, um die Kurve der Linie anzupassen. Es ist schwieriger zu bedienen als es aussieht, aber wahrscheinlich das beste Werkzeug der Wahl. Wir haben in der Vergangenheit über das Stiftwerkzeug geschrieben und gelesen Photoshop-Pfad: Verwendung des Photoshop-Stiftwerkzeugs So verwenden Sie das Photoshop Pen Tool Weiterlesen .
ICO-Dateiformat-Plug-In
Dieses Photoshop-Plug-In fügt Ihren Exporteinstellungen das ICO-Dateiformat hinzu. Die Installationsmethode hängt von Ihrem Betriebssystem und Ihrer Photoshop-Version ab. Überprüfen Sie daher unbedingt die Website.
Apple Icon Composer
Leider gibt es kein solches Tool für das ICNS-Dateiformat von Apple. Dieses kostenlose Tool kümmert sich stattdessen um das Problem. Es wird mit dem Apple Xcode-Paket geliefert, das Sie nach einem (langwierigen) Anmeldevorgang herunterladen können. Oder Sie können Google für den Download.
Hongkiat: Über 40 handverlesene Photoshop-Tutorials zum Thema Symboldesign
Der Design-Blog Hongkiat.com hat eine Liste mit über 40 verschiedenen Tutorials zum Design von Photoshop-Symbolen zusammengestellt. Diese Liste umfasst alle Arten von Symbolen und verschiedene Schwierigkeitsgrade. Durchsuchen Sie die Liste nach Inspiration und extrapolieren Sie die Techniken, mit denen Sie Ihre eigenen Designs realisieren.
Ebenenstile
Die in Photoshop integrierten Ebenenstile sind eine hervorragende Möglichkeit, Ihren Symbolen den letzten Schliff zu verleihen. Öffnen Sie den Ebenenstilbereich, indem Sie auf eine Ebene doppelklicken oder in der Ebenenübersicht mit der rechten Maustaste darauf klicken. Verwenden Sie einen 1-Pixel-Strich mit einer Deckkraft von 40-50% für die Rahmen Ihres Symbols und stellen Sie Ihre Schatten auf 110 °, um die besten Ergebnisse zu erzielen. Versuche keine Schatten zu verwenden um das Symbol, da die meisten Betriebssysteme dies bereits tun.
Haben Sie weitere rudimentäre Tipps zum Icon-Design? Teilen Sie uns Ihre Meinung im Kommentarbereich unten mit!
Ich bin ein Schriftsteller und Informatikstudent aus Belgien. Sie können mir immer einen Gefallen tun, wenn Sie eine gute Artikelidee, Buchempfehlung oder Rezeptidee haben.