Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

Themenserie: icondesign

7.06.09

Icondesign: Dateimanagement

Wenn man ein Iconset zusammenstellt, ist es sinnvoll, ein paar Regeln im Bezug auf das Dateisystem zu beachten. Man muss z.B. davon ausgehen, dass in einem Projekt nie das komplette Set zum Einsatz kommt und die einzelnen Bilddateien in einem einzigen Verzeichnis zusammengeworfen werden. Egal, welche Größe, oder welches Dateiformat. Außerdem ist anzunehmen, dass oftmals verschiedene Iconsets zusammengewürfelt werden.

Deshalb ist es zunächst wichtig, dass jede Datei einen eindeutigen Namen bekommt. Am besten ist es, wenn man durch Suffixe und Prefixe gewisse Informationen bereithält. Diese Informationen sollten den Namen des Sets, die Leinwandgröße und den Bildtyp beinhalten. Letzteres erledigt sich selbstverständlich durch das jeweilige Anhängsel mit Punkt getrennt (.jpg, .png, .gif).

Wie man letztendlich genau vorgeht, ist egal. Man sollte das Schema natürlich innerhalb eines Projekts konsequent durchziehen. Ich verwende derzeit folgendes:

set_iconname_status_icongröße.dateityp

Mit Status bezeichne ich besondere Icons. Wenn es etwa von jedem Icon eine ausgegraute und eine bunte Version gibt, wird die, die den Spezialfall darstellt mit einem Status versehen.

Wenn man die Icons für eine bekannte Zielgruppe anbietet, sollte man sie für diese auch namentlich optimieren. Der Gnome Desktop erkennt Icons, die mit emblem- beginnen als Embleme, die man dann auf seine Ordnericons kleben darf. Also kann man alle Icons, die sich als solche Embleme eignen gleich mit dem entsprechenden Prefix versehen.

Die Ordnerstruktur sollte dann kein großes Problem mehr darstellen. Entweder man unterscheidet zunächst in der Größe und dann im Dateityp, oder vice versa.

Kommentare [4]

8.05.09

Icondesign: Auf dem Grid

Man sollte beim Erstellen von Icons generell immer mit Grid zeichnen; zumindest am Anfang. »Auf dem Grid« kann dabei aber vieles bedeuten. In Inkscape gibt es zwei verschiedene Einstellungen, die es erlauben, »Ecken der Umrandungsbox« oder »Knoten« am Gitter auszurichten.

Da die Umrandungsbox immer rechteckig ist, ist diese Einstellung schwerer zu handhaben, denn man hat in den meisten Fällen kompliziertere Formen, die man ausrichten möchte. In fast allen Fällen kommt deshalb die zweite Option zum Einsatz. Aber hier ist Vorsicht geboten, denn je nach Breite der Linien können später beim Rendern minderwertige Ergebnisse zustande kommen.

Ich habe versucht, dies anhand dreier selbsterklärenden Grafiken klarzumachen. Links sieht man die Ansicht aus dem Vektorprogramm und rechts das Resultat nachdem es gerendert wurde.

Die erste Grafik ist eine Box mit einem 1px breiten Rahmen; die Knotenpunkte liegen dabei auf den Schnittpunkten des Gitters.

Die Eckpunkte auf dem Grid und 1 Unit Stroke-Breite ergibt schlechte Resultate

Grafik Nummer 2 nutzt auch Eckpunkte, die auf den Schnittpunkten der Gridlinien liegen, hat allerdings 2px dicke Strokes.

Mit den Eckpunkten auf dem Grid und 2 Units Stroke-Breite gibt es bessere Ergebnisse.

Die dritte Grafik hat wieder einen 1px breiten Rahmen. Die Eckpunkte jedoch liegen dieses mal zwischen den Gitterlinien.

Auch mit einem 1 Unit Stroke-Breite werden scharfe Bilder erzielt, wenn man nicht auf dem Grid arbeitet.

Alle gerenderten Vektorgrafiken wurden ungeglättet hochskaliert und hatten ursprünglich eine Auflösung von 8×8 px.

Wie man eindeutig sieht, schafft man mit der ersten Methode ein sehr unscharfes Resultat. Die anderen beiden hingegen sind scharf. Das liegt daran, dass es nicht interessiert, ob die Eckpunkte auf dem Grid liegen, sondern ob die Ränder der Linien mit den Gridlinien abschließen.

Man sieht aber auch, dass die beiden schärferen nicht unbedingt die besseren Ergebnisse sein müssen. Im zweiten Bild ist der Rand eventuell viel zu dick für das, was man eigentlich erreichen wollte. Bild 3 hat zwar die gewünschte Linienbreite, dafür muss man hier den Kompromiss eingehen, dass die gesamte Box um einen Pixel größer ist.

Kommentare

7.03.09

Icondesign: Rendergröße

Wenn man Pixelicons haben möchte, diese aber zunächst in einem Vektorprogramm erstellt hat, muss man sie in einer bestimmten Breite rendern. Gewöhnlich sind diese Größen eine Potenz von zwei (16×16, 32×32 …) oder ein paar Schritte dazwischen (24×24, 48×48 …). Immer jedoch eine gerade Zahl als Breite und Höhe.

Das Problem bei Bildern mit geraden Höhen- und Breitenangaben ist, dass es keine richtige Mitte gibt. Das mag sich zunächst widersprüchlich anhören, da man eine gerade Zahl – im Gegensatz zu einer ungeraden – ohne Rest durch zwei teilen kann.

Aber schauen wir uns einmal folgende Grafik an:
Die Mitte ist in einem Grid mit gerader Breite nicht genau festgelegt.

Wir sehen ein Grid mit 10×10 Feldern. Die grauen Kästchen sind ein Versuch, eine horizontale und vertikale Mitte zu finden. Wie man jetzt sieht, ist dies jedoch nicht möglich, im Gegensatz zu einem Grid mit ungerader Höhe/Breite:
Ein Grid mit ungerader Höhe und Breite

Man muss sich klar machen, dass man nur im Grid zeichnen kann und nicht auf den »Streben«. Deshalb gibt es bei Bildern mit geraden Höhen- und Breitenangaben nie eine echte Mitte.

Und das ist ein echtes Problem. Denn alles hat irgendwie eine Mitte. Bei großen Grafiken tut das keinem weh, aber die Größen von Icons bewegen sich im Minimalbereich.

Bei einem Rechteck ist das noch unter den Tisch zu kehren. Da nimmt sich das Auge einfach irgendeinen Punkt als Mitte, egal ob der auf dem Grid liegt oder nicht. Viel heikler wird es da bei einem Kreis. Ein Kreis hat im Gegensatz zu einem Rechteck einen höchsten Punkt und dieser liegt genau in der Mitte.

Folgende Grafik soll diesen Umstand etwas klarer machen:
3 Icon-Größen im Vergleich

Alle Icons wurden zehnfach vergrößert. Man erkennt bei dem Icon in der Mitte (16px), dass der höchste Punkt eben kein einzelner Pixel ist, wie bei den anderen zwei Icons. Stattdessen bilden ganze zwei Pixel diesen wichtigen höchsten Punkt. Und das gilt nicht nur für den höchsten Punkt, sondern natürlich auch für den tiefsten und die beiden seitlichen. Und das ist unschön.

Noch unschöner wird es bei dem Kreuz. Denn auch hier gibt es bei dem 16px-Icon wieder keine richtige Mitte. Das Resultat ist ein unförmiges, klobiges Kreuz, während die beiden anderen schon viel ausgeglichener aussehen.

Wenn man also nicht an bestimmte Maße gebunden ist, ist es eine Überlegung wert, ob man seine Icons nicht vielleicht in ein eher unkonventionelleres Gefäß legt. Falls man sich an die typischen Maße halten muss oder will, kann man zumindest mit dem Gedanken spielen, seine Icons einen Pixel kleiner zu rendern und dann ein Stück nach links/rechts/oben/unten zu verschieben.

So bin ich auch bei meinem Icon Set vorgegangen. Bis jetzt hat sich noch niemand beschwert :)

Kommentare [4]
Neuere Artikel
Ältere Artikel

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll