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

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.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll