Pixel-Fitting Pixel-Fitting / tutorial / free


When a vector is scaled down to a small size, it uses anti-aliasing to make it appear clear, however this isn't enough. This is one of the better tutorials I've seen on the subject of pixel-fitting, and making your icons or images look crystal clear at small sizes.
5 favorites
submitted about 5 years ago, by pineapple
Pixel-Fitting popular tutorial



Great article!

I made the mistake of assuming I could just rasterize 2x assets and then downsize all images by 50% in PS to go to 1x.... big mistake. I ended up doing it that way first, then going back and re-snapping the vector outline on 1x assets like in the article... Doh!

Also, if you're lucky enough to have CS6, the new 'align to pixel grid' really helps out too. http://blogs.adobe.com/jkost/2012/05/align-to-pixel-grid-in-photoshop-cs6.html

SkinnyGeek1010, about 5 years ago


So awesome... I never knew about that in CS6. Thanks so much

pineapple, about 5 years ago


Made a screencast on the subject. http://www.youtube.com/watch?v=wSLW4K2ON4s

rnmp, almost 5 years ago

Login or to comment.

Tutorials are any resources you learn from.

Examples: an intro to html5 screencast, a pdf about git, photoshop effects tutorials, meta-programming in ruby, lambda calculus, higher-order fixed-point combinators.

Tools are websites, apps or services used -on- your project (indirectly), to aid the process.

Examples: A color scheme generator, email marketing software, usability heat maps, css3 code generators, a downloadable png compressor.

Assets are downloadable files used -in- your projects, usually as code, textures, or images.

Examples: a jquery sticky menu, photoshop brushes, background textures, mvc frameworks, twitter bootstrap, 960 grid system.