1

I've been tasked with creating a bunch of icons for a software product that my company develops. The problem is, I keep getting feedback that the icons are too "pixelated" for them to use...

The icons need to be 24 x 24px, and saved as PNG. I created the icons in Photoshop, set the resolution to 300 (to try and make it as crisp and sharp as possible) and saved each file as a PNG. Here's an example of how they turned out: Icon Example

I was under the impression that, at 24x24 px, it wasn't going to get much less pixelated than this. Am I wrong about this? Is there a way to export these tiny little image files so that they are as un-pixelated as possible?

How can I save these files and get the best possible result?

||improve this question
  • 1
    You can set the resolution to 5 gabillion and a 24x24 px image will always still be 24x24 px with the same, identical file size. It looks like they are objecting to "anti-aliasing," which softens edges. Note also that if a web page/app is scaling the image UP (read: retina) then every imperfection gets scaled up as well. This stackexchange is full of SVG PNG ICON tagged questions. – Yorik Mar 16 '16 at 19:03
5

That is not pixelation, that is blurred. Your icon is blurry.

The problem is that you made them at different resolution and downscaled it, and the program made a resampling. To simulate the apropiate proportion of the stroke it applied some anti alias.

You need to make them:

a) pixel perfect at the exact resolution.

b) make them in vectors, like svg.

c) resample them turning anti alias off.... I don't think this will work but you can try.

d) Try to apply some sharpening... Could work, but they will not be as clean as the options a, and b.

Aditional notes.

The 300 dpi which are actually not dpi, but ppi, does not have anithing to do with an icon for web. Just use plain pixels as the size of your document.

Edited:

A close up of your icon:

A pixel perfect icon should look more or less like this:

Here is the icon at 24x24 px: compared to

||improve this answer
  • Thanks for the answer - but I actually DID create them pixel perfect at the exact resolution. Also, I have been told by the developers that they can only use PNG files, not SVG, TIF, etc... – Renee Mar 16 '16 at 19:27
  • 2
    Nop, you did not. Let me do some sample images and I'll edit the post. – Rafael Mar 16 '16 at 19:32
  • @Rafael SVG isn't a guaranteed solution for such small sizes, btw - you'd still have to make sure that the output will be pixel-perfect. This is doable, but adds yet another layer of complexity. – Michael Schumacher Mar 16 '16 at 23:54
  • I resampled them using anti-aliasing per your suggestion, and it helped a LOT - thank you. Your advice combined with what @cockypup posted seems to have fixed the problem. Thank you very much for your help!!! – Renee Mar 17 '16 at 19:10
3

Looks like your design is not aligning to the pixel grid properly. This creates all sorts of artifacts that are very difficult to control.

I would suggest to set the dimensions of your canvas to 24px x 24px and zoom in enough that you can see the pixel grid. Then nudge and/or resize your icons until they align with the specific pixels. This will minimize the anti aliasing on the rectangular shapes. Not much you can do about tiny circles though. There will be anti aliasing, want it or not.

I have circled things that suggest misalignment. If a rectangular shape is aligned to the pixel grid and its stroke and width are perfect pixel dimensions, then the colours on both sides should be the same. In fact, the colour should be solid, not 3 different shades of the same colour.

This does not mean that your design is wrong. You can make things whatever width you want and place them wherever you want. It just means that to be rendered at such a small size PS needs to use anti aliasing.

enter image description here

You can take a peek at my OCD guide to pixel perfection in this question. Although the answer is suggesting to use AI, not PS, some of the comments apply as well.

Things to consider:

  • The strokes might not be aligned to the pixel grid. They might be centered on it and therefore being rendered with antialiasing. Try aligning the strokes to the inside or the outside of the rectangles.
  • The with of the strokes might not be a full pixel.
  • The rectangles might have rounded corners
  • The rectangles might be slightly tilted. Not likely but the changes of colour on the left side of the smaller rectangle are suggesting something is wrong.

One last thing. Your comment about 300dpi confuses me. If you are creating an image that will be seen at 24px x 24px on a screen, talking about its resolution has no place. I talk about that topic in this answer.

||improve this answer
  • THANK YOU!!! I wish I could give you more than one upvote - both your links are explained very well. – Renee Mar 16 '16 at 20:59
  • You are welcome. Just pay back by answering somebody else's question some time : ) – cockypup Mar 16 '16 at 21:02
  • 1
    I will pay it forward. :) I just want to make sure I understand: 1. Document = RGB 2. "Align to Pixel Grid" is checked 3. Center of the square in the Transform window is selected so that the shapes don't get placed at fractional pixels.(?) 4. Try not to use fractional pixels, except for rounded shapes 5. Use pixel preview 6. Save image as 2x the size, then specify the original size on the webpage (not sure if this will work in software though). Is this correct? Thanks again, you are the best! – Renee Mar 16 '16 at 21:53
  • Correct. Comment 6 was intended for images that will be used on the web. As you mention, it might not be applicable in your case. – cockypup Mar 16 '16 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.