Dieser Beitrag nimmt am Dr. Web Autorenwettbewerb teil. Sie helfen dem Autor durch Ihr Feedback und Ihre Kritik in Form eines Kommentars. Diese fließen ebenso wie der erzielte Traffic und eventuelle Verlinkungen in die Entscheidung über die zu gewinnenden Preise ein.

von Markus Schlegel

Normalerweise tendiert man bei der Erstellung von Grafiken eher zu geradzahligen Höhen und Breiten, beispielsweise 16×16px, 32×32px oder 42×42px. Die Begründung liegt auf der Hand; sie sind einfach viel praktischer als ungerade Bemaßungen. So kann man gerade Zahlen beispielsweise ohne Rest durch zwei teilen. Beim Rendern einer Vektorgrafik, also beim Überführen der Vektoren in ein Pixelraster, geht aber gerade diese Gleichung nicht auf, zumindest nicht, wenn man Bilder mit exakter Mitte benötigt. Diese exakte Mitte ist vor allem bei Icons, die auf einem bildfüllenden Kreis aufsetzen, wichtig. Denn nur wenn eine Mitte erkennbar ist, wird der Kreis für das Auge scharf. Folgende Abbildung soll den Umstand erläutern:

Man sieht ein vergrößertes Pixelraster mit 4×4 Einheiten. Die blauen Linien stellen die Mittellinien des Bildes unabhängig vom Grid (Raster) dar. Das orange Eingefärbte sind dann die Felder, die man, wenn man die Mittellinien in das Grid zeichnen wöllte, ausfüllen müsste. Wie man sieht, sind also die rastergebundenen Mittellinien eigentlich zwei Pixel breit. Der springende Punkt ist nämlich, dass die eigentlichen Mittellinien genau zwischen zwei Pixeln verlaufen, zwischen der zweiten und dritten Pixelreihe/-spalte.

In diesem Bild wurde eine 5×5 Einheiten große Leinwand verwendet. Die exakte Mittellinie verläuft genau auf einer Pixelreihe und -spalte, deshalb kann man in diesem Bild die rastergebundene Mittellinie auch mit einem Pixel Breite zeichnen.

In der Praxis sieht das mit dem Beispiel des ausfüllenden Kreises dann so aus:

Mit geraden Maßen gerendert, sieht der Kreis wegen der zu breiten Mitte stumpf aus.

Rendert man ihn mit ungeraden Maßen, wirkt er viel schärfer.

Die Frage ist nun, ob man aufgrund dieser Erkenntnis in Zukunft die Breiten- und Höhenkonventionen missachten und einfach alle seine „Kreis-Grafiken“ einen Pixel größer anlegen sollte. Ich selbst gehe oft noch so vor, dass ich sie nicht einen Pixel größer, sondern einen Pixel kleiner rendere, und dann – quasi mit einem Pixel Platzverschwendung - in einer Leinwand mit geraden Maßen abspeichere. Vor allem in kleinen Dimensionen wie 16×16px verliert man durch diese Methode jedoch eher an Qualität, als dass man hinzugewinnen würde.

Abschließend muss ich noch einmal betonen, dass die beschriebene Methode nur auf Grafiken zutrifft, die, wie eben Kreise, auf eine darzustellende Mitte angewiesen sind. Grafiken, die darauf ausgelegt sind, die Mitte als Begrenzung zweier Bereiche zu verwenden, sollte man weiterhin mit geradzahligen Leinwandmaßen realisieren.

(sl)

Für den Wettbewerb können keine Beiträge mehr eingereicht werden, über Autoren freuen wir uns trotzdem. In dem Fall: bitte hier entlang.

Verwandte Artikel

• Webgrafik: Icons, Pixels und Fotos (0)
• Uncharmante Ikonen (4)
• Top 10 der Favicons (2)
• Symbole, Buttons und Icons zum Download (99)
• Schwarz, Streng oder Schlicht: Neue Icons (6)
• Mini Pixel Icons Kollektion (2)
• Ikonenmaler: Mit spezieller Software zum perfekten Icon (0) €