Archief - 16 pixel icons.

Ik zoek al lange tijd achter de ideale manier om kleine 16px icoontjes te maken.

Ik heb al dikwijls op het internet rondgekeken, vanalles geprobeerd, maar de resultaten zijn meestal dezelfde:

Waneer je genoeg detail wil en een goede scherpte dan ben je bijna verplicht om deze pixel per pixel te maken. Normaal is de workflow: Illustrator (creatie) -> Photoshop (bijwerken). Dit werkt prima voor icoontjes vanaf 32px en hoger, bij 16px of minder krijg je gewoon een blurred image.

Ik zie regelmatige software waarvan de icoontjes veel detail bevatten en toch zeer scherp zijn (zonder pixelation).

Ik vraag mij af, wat is de "magic trick" om dit klaar te spelen?

Volgens mij ligt de truuk in het uitlijnen van je anchorpoints op de pixelgrid. Stel dat je een vorm vectorieel maakt in photoshop (met shapes en layer styles dus) dan kan je met de Direct Selection Tool (A) > de witte pijl, aanpassingen doen aan je anchor points. Als je fel inzoomt zie je dat je binnen de ruimte van een pixel nog je punten kan verplaatsen en dat maakt een groot verschil qua scherpte. Vallen ze binnen de pixel (sub-pixel-niveau) dan krijg je heel snel een wazige zweem rond je pixels.

Kheb een voorbeeld gemaakt om het te verduidelijken. De linkse versie bevat punten op de pixelgrid (ook al gaat het om een vector-shape) en de rechtse bevat punten op subpixelniveau. Bovenaan zie je het resultaat op 16x32px. De linkse variant geeft een veel scherper resultaat.



Je kan daar in principe al rekening mee houden in illustrator door daar met een grid te gaan werken. (die verkleind dan geschaald kan worden tot 16x16) Wellicht zijn er nog andere truuks, maar dit is wat in me opkwam toen ik je tekst las en mogelijk iets om rekening mee te houden.

Goed punt, dat zal inderdaad al een verschil maken. Ik meen mij te herinneren dat je vroeger tijdens de pixel lettertypes hype (Flash) daar ook rekening mee moest houden, met die uitlijning.

Dat klopt! ik herinner me dat het toen zo'n gedoe was om mn pixel interfaces te importeren en niet wazig weer te geven dat ik ze volledig opnieuw met vector-pixels uittekende. Grid op en rechthoeken tekenen. Those were the days