1

I know this question has been asked many times but I still can't find a solution.

I'm redesigning icons that are going to be used on a web application. The former icons were placed on a PNG sprites sheet and the icons were 16x16px.

On Illustrator, I redesigned the icons with the 16x16px size but when I export them, they are blurry.

They are already blurry on my PNG file after the export.

enter image description here enter image description here enter image description here

I don't really know what to do. I tried the export for devices menu, everything... I even tried making a screenshot of my Illustrator artboard at 100% but then you lose transparency.

|improve this question|||||
  • Is exporting them as SVG an option? – ErickP Nov 22 '17 at 15:12
  • You seem to have zoomed in on the icons. You can't zoom in on raster images, or they will get blurry. – Billy Kerr Nov 22 '17 at 15:56
2

If you export to a small pixel format, they will be blurry when you scale them up. That's totally normal - and not a good idea.

If you want sharper lines, they have to be on the pixel grid. Otherwise the lines will be anti-aliased (= blurry). Non-orthogonal or round lines will always run across the pixel-grid, so they can't be as sharp as vertical or horizontal lines.

A vector format like SVG will only make a difference if your screen is hi-res (like Retina or similar). I'd recommend to design the icons in larger sizes with the pixel grid in mind. Best would be multiples of 16px (32, 64, 128). Downscaling is always easier than upscaling.

|improve this answer|||||
  • I would agree with everything here other than the SVG comment. Exporting as SVG (where viable) can offer benefits in the long run in terms of unforeseen revisions. I've had situations where we needed to change icons to larger display sizes and - knowing we were using SVGs already - just made a CSS edit rather than have to generate and replace our entire icon asset library. There are other benefits too but I think some people overlook this one. – biscuitstack Nov 22 '17 at 16:00
  • @biscuitstack Well, the question was about a PNG spritesheet and how to optimize the display. So SVG is kind of off-topic here. The pixel grid/antialiasing is an issue for SVG as well, so cleanup work has to be done for both... – AAGD Nov 22 '17 at 16:19
  • Understood. I brought it up as you introduced SVG with the statement that will only make a difference if your screen is hi-res and was wary of future Google searches arriving here and dismissing SVG in this situation as only relevant to high DPI screens. It was more about clarification for others in the future but I was going a little on a tangent so apologies. – biscuitstack Nov 22 '17 at 16:43
1

So your first image of the sprites is not blurry.

If you are seeing a blurry output that is because you are using screen scaling (retina etc) and that screen scaling is enlarging the raster images using stretch or resampling. Your export art is fine.

So the real question to ask is: "how do I handle the art after it is created to avoid a poor result." The answer is, generally, "export vectors" but if you cannot use vectors, you need to export multiple pixel sizes and set the target software to choose the closest optimal size.

|improve this answer|||||
-1

or try give some high resolution of the file after exporting it to illustrator by the way what version of Illustrator do you use? Because in Adobe Illustrator CC they can export automatically the PNG file and you can decide what resolution of the image to put

|improve this answer|||||
  • resolution won't matter in this case since OP specified 16x16px – Luciano Nov 23 '17 at 9:58

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