: Save for web is making my Illustrator file blurry. (30x30pixels) I've been stuck on illustrator for legit 2 days. All I am trying to do is create a simple icon at 30x30pixels for an app project

@Turnbaugh909

Unfortunately, if you're exporting to a raster image then you're not going to have any cleaner or sharper lines from Illustrator. You will inside Illustrator, or if you export to a vector format (SVG is good for web icons, for example), but exporting to a raster format (JPG, PNG etc.) will give you little difference.

If you're working in Illustrator and exporting to a raster format then it's best to work with (or at least periodically check) pixel preview turned on (View → Pixel Preview). The only way to make sure you don't have any "blur" (which is just anti-aliasing) is to make sure your artwork aligns to the pixel grid. You can turn on "Snap to Pixel Grid" to make Illustrator do this for you.

So the only sure way to get your icon with no "blur" is to adjust or redraw so that it aligns to your pixel grid...

An example (taken from a previous answer)...

Take this boom box SVG icon. The original vector on the left looks great. View the same thing at 16 × 16 pixels and it looks terrible. You can see this is because the paths don't align with the pixels. There is too much information to be seen in the number of pixels available.



Image 1: Original vector (left), 16×16 pixel preview (right)



The solution is to design the icon specifically for the size it will be viewed at. Take the same icon again and redraw the paths so that they align with the pixel grid and you have a nice clean icon (cleaner at least, the speaker/circle could probably do with some more adjusting):



Image 2: 16×16 pixel preview original vector (left), adjusted paths to fit pixel grid (right)

Vote Up Vote Down