Pixel-Fitting Pixel-Fitting / tutorial / free

http://dcurt.is/pixel-fitting

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 4 years ago, by pineapple
Pixel-Fitting popular tutorial

4 Comments

SkinnyGeek1010

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 4 years ago

pineapple

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

pineapple, about 4 years ago

rnmp

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

rnmp, almost 4 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.