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

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]

Nico am 7.03.2009 um 13:48

Danke für die Tipps, sagmal wie hast du deine Icons eigentlich gemacht, in Illustrator und Pfaden ?

Markus am 7.03.2009 um 17:37

Ich benutze Inkscape. Wie meinst du das mit »Pfaden«? Natürlich habe ich Pfade verwendet, viel mehr geht mit einem Vektorprogramm ja auch nicht ;)

Luckerking am 8.03.2009 um 11:15

Ist es den eigtlich oft so, dass die Icons in 16×16 (usw.) gefordert werden?
Ich kann mir vorstellen das es auf Websiten die Größe meistens doch ziemlich egal ist, oder?
Selbst unter .Net ist die Größe der Icon egal.
(eben nochmal getestet)

P.S.: Der “Merken” Text, beim Comment eintragen, nach dem Checkfield ist verrutscht. Das verwirrt einen etwas.

Markus am 8.03.2009 um 12:16

Gefordert wird selten irgend etwas bestimmtes (im Web, im OS schon). Es gibt aber gewisse Konventionen, die zum einen dadurch entstehen, dass es niemand anders macht; zum anderen sind 16²px² auch viel praktischer einsetzbar, z.B. als Favicon.

Außerdem lässt sich die beschriebene Regel auch nicht auf alle Icons applizieren.

Andererseits hat es Apple mit ihrem »Apple-Touch-Icon« (57×57) für’s iPhone etc. mal wieder vorgemacht.

P.S.: Der “Merken” Text, beim Comment eintragen, nach dem Checkfield ist verrutscht. Das verwirrt einen etwas.

Danke, wird geändert.

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