Icons designen in Inkscape

Februar 22nd, 2015 § 0 comments

Ab und an fehlt ein passendes Icon auf einer selbstgebauten Website – und man muss selber eines bauen. Selbiges geschah mir letzte Woche. Das Icon sollte skalierbar sein, also als Vektorgrafik entstehen. Und natürlich sollte es scharf sein. Wo eine Linie ist sollte also wirklich eine Linie sein und kein Farbverlauf.

Erster Gedanke: Photoshop. Probiert… nee, doch nicht (geht aber bestimmt). Inkscape hatte ich auch noch. Erster Eindruck war: naja. Nach einigem Ausprobieren habe ich dann einen ganz guten Weg gefunden, wie man Icons in Inkscape erstellen kann. Hier das Vorgehen.

Arbeitsfläche einstellen

inkscapeIcons_dimensions
Am besten schon mal auf die gewünschte Pixelzahl oder ein vielfaches davon. Ich wollten so ein winziges Favicon für Browsertabs machen, das waren 16*16 Pixel, man könnte aber auch 32*32 einstellen. Die Maßeinheit sollte passenderweise auch auf Pixel stehen. Dann geht es weiter zum Gitter-Tab…

Gitter

Inkscape_Gitter Hier erzeugen wir ein rechteckiges Gitter, das uns anzeigt wo die Pixel wären. Das ist wichtig, denn wenn wir eine ein Objekt mitten in einem Pixel positionieren, dann wird dieser Pixel nur halb eingefärbt, weil eben das Objekt nur halb drin ist und den Pixel nicht voll ausfüllt.

Deshalb »Gitter-Rastereinheiten« auch auf Pixel stellen, und je eine Pixel bei Abstand X und Abstand Y wählen. Jeder Pixel hat jetzt einen Gitterrand. Und falls wir die nächstkleinere Auflösung auch noch mitberücksichtigen wollen, stellen wir ein das alle 2 Gitterlinien eine dickere Linie kommt. So könnte man sich in einer 32*32 Arbeitsfläche auch die 16*16-Pixel anzeigen lassen.

Das Gitter können wir übrigens mit der »#«-Taste an und ausschalten. Praktisch.
Fehlt nur noch…

Die Vorschau

Die Vorschau zeigt uns, wie unserer Icon als Pixelgrafik aussehen würde. Um die Vorschau anzuzeigen gehen wir im Menü auf Ansicht/Symbolvorschau (engl.:View/Icon Preview). In dem Fenster können wir die Icon-Größe wählen, die die Vorschau zeigen soll – von 16 bis 128 Kantenlänge. Wählt erst mal die Zielgröße, wenn ihr also winzige Favicons macht, 16, für Desktop-Icons 48 und/oder 128. In der Vorschau können wir auch sehen, ob wir die Objekte richtig auf den Pixeln des Gitters platziert haben:

Inkscape_usingiconPreview1

Für die 32er passts, für die 16er ist sind die Objekte mitten in den Pixeln (dicke Linien) platziert.

Inkscape_usingImagePreview2

Sowohl bei 32er als auch 16er (dicke Linien) knackige Kanten (Zumindest in dem Ausschnitt)

Zuletzt könnt ihr alles…

Exportieren

Und zwar mit »PNG-Bild exportieren« (Datei/PNG-Bild exportieren oder Umschalt+Strg+E). »Seite« als Exportbereich wählen, als Bildgröße wählt ihr die Seitengröße oder ein vielfaches kleineres oder größeres (habt ihr also eine Seite mit 32px Kantenlänge wählt auch 32px als Exportgröße oder wenigstens 16 oder 64) – sonst nutzt das alles mit den Gitterlinien und der Vorschau nichts, weil sonst die Pixel ganz woanders beginnen und enden als in eurem Gitter.

 

Soweit zur Wahl der Funktionen. Gestalten müsst ihr selber.

Falls ihr Icons gestaltet, die eine Funktion aufrufen, sei an dieser Stelle sei gewarnt, dass Icons keinesfalls automatisch  intuitiv verständlich sind. Bilder sagen zwar mehr als 1000 Worte, aber diese Worte können grober Unfug sein. Bevor ihr euch also die Usability ruiniert, fragt euch, ob es nicht auch mit einem kurzen Wort ginge. Wenn nicht: Standards nutzen, also für »Speichern« die Diskette etc. Und testen, testen, testen. 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

What's this?

You are currently reading Icons designen in Inkscape at maschinenraum.

meta