10 einfache Tipps zum Erstellen eigener cooler Symbole mit Photoshop

Es gibt eine große Anzahl von kostenlosen Icon-Sets online, aber wenn Sie über den reinen Gebrauch hinausgehen möchten, gibt es auch eine Reihe von Problemen, die damit verbunden sind. Lizenzierung und fehlendes 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 ein einzigartiges Design verleihen oder Ihre Dienste für die Community und die Unternehmenswelt bereitstellen.

Dies ist keinesfalls ein vollständiges Icon Design-Tutorial. Wir fangen gerade erst mit den rudimentären Grundlagen an - technischen Details, einer Design-Checkliste und einem Icon-Design-Toolset.

Symbol-technische Aspekte

Im Folgenden finden Sie einige Spezifikationen, die Sie bezüglich des Symbolformats, insbesondere der Bildauflösung und Dateiformate, kennen sollten.

Größe

Die Wichtigkeit der Größe wird weiter unten diskutiert. Vorerst bleiben wir bei den technischen Aspekten.

Icons sind immer quadratisch. Dies bedeutet, dass ein rechteckiges Symbol entweder gestreckt oder verkleinert wird, um die gesamte Leinwand zu füllen oder in sie zu passen. In beiden Fällen zeichnen sich hoch rechteckige Symbole schlecht aus. 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 ist, ändert sich die Größe des Symbols mit der geringsten Auflösung (bis zu 256 x 256). Da die Desktop-Auflösung immer höher wird, empfiehlt es sich, immer eine höhere Auflösung zu verwenden. 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

Für Windows ist ICO das am häufigsten verwendete Dateiformat für die Symbolverteilung. Das Mac-Pendant ist ICNS (Apple Icon Image Format).

Die Icon Design Checkliste

Es gibt nicht ein Tutorial, um immer und immer wieder das perfekte Symbol zu entwerfen. Unterschiedliche Themen und Designs erfordern unterschiedliche Ansätze, und der „aktuelle Trend“ befindet sich in einem konstanten Fluss. Nachfolgend sind drei wichtige Säulen der Symbolerstellung aufgeführt, die sich immer wieder als wahr erwiesen haben. Wenn Sie mit dem Entwurf von Symbolen noch nicht vertraut sind, sollten Sie die Symbol-Checkliste jederzeit im Auge behalten.

Unverkennbar

Icons müssen vor allem unverkennbar sein. Die Beziehung zu Ihrer Bewerbung muss für alle offensichtlich sein, über Zeit-, Kultur- und Altersunterschiede. Bekämpfen Sie die Versuchung, auffällige Symbole zu erstellen, die keine Relevanz haben, und halten Sie sich an ein einfaches, solides und offensichtliches Design.

Sehen Sie dies nicht als Hindernis für Ihre Kreativität. Icons können schön sein und zum Nachdenken anregen, sollten aber nicht zur Interpretation offen sein (siehe: Vermutung beim Benutzer).

Gleichmäßigkeit

Wenn Sie ein Icon-Set entwerfen, halten Sie das Design einheitlich.

Stellen Sie sicher, dass Sie über einen gemeinsamen Thread verfügen, der diese Symbole miteinander verbindet und den Benutzern die Synergie zeigt. Das Ganze muss größer sein als die Summe der Teile.

Größe

Icons werden immer in mehreren Größen erstellt. Dies beeinflusst das Design in mehrfacher Hinsicht.

Für den Anfang müssen Icons unabhängig von der Größe gut und erkennbar aussehen. Nehmen Sie den Kontrast an den Seiten herunter, um gezackte Kanten zu vermeiden und wichtige Details so hervorzuheben, dass der Fokus in der kleinsten Implementierung des Symbols erhalten bleibt.

Auf technischer Ebene werden Symbole am besten mit Vektoren erstellt, dh Bildern, die aus endlos skalierbaren Formen bestehen, und nicht einer bestimmten Zusammensetzung von Pixeln. Wenn Ihre Auflösung jedoch hoch genug ist, werden Bitmaps genauso gut funktionieren.

Das Icon Design Toolset

Photoshop ist eine großartige Anwendung, um Icons zu entwerfen. Sie haben (fast) alle Werkzeuge, die Sie zum Erstellen von Vektorgrafiken oder zum Bearbeiten von Bitmaps sowie zum Anwenden komplexer Effekte und Schattierungen benötigen. Am wichtigsten werden folgende Werkzeuge sein:

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 als es aussieht, aber wahrscheinlich das beste Werkzeug der Wahl. In der Vergangenheit haben wir über das Stiftwerkzeug geschrieben. Lesen Sie dazu Photoshop Pathing: Verwenden des Photoshop-Stiftwerkzeugs Verwenden des Photoshop-Stiftwerkzeugs Verwenden des Photoshop-Stiftwerkzeugs Lesen Sie weiter .

ICO-Dateiformat-Plug-In

Dieses Photoshop-Plug-In fügt den Exporteinstellungen das ICO-Dateiformat hinzu. Die Installationsmethode hängt von Ihrem Betriebssystem und der Photoshop-Version ab. Überprüfen Sie daher unbedingt die Website.

Apple Icon Composer

Leider gibt es kein solches Werkzeug 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) Anmeldeprozess herunterladen können. Oder Sie können Google zum Download anbieten.

Hongkiat: Über 40 handverlesene Icons für Photoshop-Tutorials

Design-Blog Hongkiat.com hat eine Liste von über 40 verschiedenen Tutorials für das Photoshop-Icon-Design 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 Entwürfe verwirklichen können.

Ebenenstile

Die integrierten Ebenenstile von Photoshop sind eine großartige Möglichkeit, um Ihren Symbolen den letzten Schliff zu geben. Öffnen Sie den Ebenenstilbereich, indem Sie auf eine Ebene doppelklicken oder in der Ebenenübersicht mit der rechten Maustaste darauf klicken. Verwenden Sie einen 1px grauen Strich mit einer Deckkraft von 40-50% für die Ränder Ihres Symbols und setzen Sie Ihre Schatten auf 110 °, um die besten Ergebnisse zu erzielen. Versuchen Sie, keine Schatten zu verwenden um das Symbol jedoch, da die meisten Betriebssysteme dies bereits tun.

Haben Sie weitere rudimentäre Tipps zum Ikonendesign? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!

Erfahren Sie mehr über: Adobe Photoshop.