0

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 I am making. The drawing consists of like 4 black lines. Looks perfect in Illustrator, but then as soon as I save for web its blurry. I switched from Photoshop to Illustrator as I was told vectors will make cleaner/sharper lines.

What is going on? Am I fighting a losing battle here? When an image is 30x30 pixels is it possible for them to be unpixelated? Please someone help !!!! :( PS have looked at so many other forums.

Improve this question
6
  • 4
    Possible duplicate of How do I get my vector logos to look super sharp on the web?
    – Luciano
    Commented Jun 15, 2017 at 8:12
  • Have you tried exporting the image as an SVG vector file. If it's a raster image, have you tried viewing it at 100%, and not zooming in? Can you post examples of the problem graphic?
    – Billy Kerr
    Commented Jun 15, 2017 at 8:14
  • It is possible you just have to hit integer pixels.
    – joojaa
    Commented Jun 15, 2017 at 10:18
  • After further comments to Cai's answer, I see it's a raster icon. Illustrator is practically useless for making tiny raster icons. You've been given spectacularly bad advice by the person who told you to use Illustrator.
    – Billy Kerr
    Commented Jun 15, 2017 at 11:51
  • Any other programs you could recommend? @BillyKerr
    – Nick
    Commented Jun 15, 2017 at 11:57

1 Answer 1

Reset to default
1

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.

enter image description here

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):

enter image description here

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

Improve this answer
6
  • thanks! So if you were drawing diagonal lines, its always going to look blurred I assume?!
    – Nick
    Commented Jun 15, 2017 at 10:10
  • If you're exporting a raster image then yes, no way around that
    – Cai
    Commented Jun 15, 2017 at 10:40
  • No idea how these SVG images work, when I open it its code?
    – Nick
    Commented Jun 15, 2017 at 11:56
  • SVG is code yes (it's a form of XML), you should (depending on where you're using it) be able to use it as an image as you would any other image though (in CSS or an <img> tag for example)
    – Cai
    Commented Jun 15, 2017 at 12:05
  • hmmm I don't think it will work in Xcode - I will try tomorrow and let you know! Thanks for your help :D
    – Nick
    Commented Jun 15, 2017 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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