I'm creating an app and I am trying to create some icons for it. I made the icon in AI, changed the color of the icon in Fireworks, and then resized the icon to the exact size I needed in Photoshop. The end result of all of this gives me this icon, which includes some nice jagged edges (that I don't want of course)

Can anyone tell me what I'm doing wrong in my steps?

enter image description here

3 Answers 3


Go ahead and keep your over-sized vector version but duplicate it and scale down in your vector app of choice (Illy or Fireworks). There's no need to jump to Photoshop unless you need some extra functionality it provides (like gradient dithering).

If exporting an actual size drawing from your vector app doesn't solve the problem, there are a couple of solutions that come to mind.

  • Adjust your rotation angle until the path hits the pixel grid just right. Sometimes a small move can make a big improvement.
  • Apply a slight feather effect to the edge of your rotated object. Just enough to 'help' the anti-aliasing out.
  • Sorry it took so long to respond, I'm actually going to apply an outer glow to this image, so I would need Photoshop I guess. So, should I go from Illustrator -> Fireworks -> Photoshop? If so, where do I align it in a pixel grid. If I align to pixel grid in illustrator, won't resizing it in fireworks mess it up, and therefore make it look messed up in photoshop?
    – EGHDK
    Commented Dec 1, 2012 at 16:59

That looks like a problem with anti aliasing when you rotated that icon on the background, when exporting it to photoshop was it exported as a vectororial mask?

If you didn't get this problem with the image in fireworks or AI then I'm guesing the problem happend when resizing in photoshop. Try maintaining the format in vectors and resize them as vectors and not bitmaps.


The issue you have is that pixels are square. So when you have a line that's diagonal, you can see the edge of each of these squares. The reason that you often don't notice this is that graphics are often antialiased, which means that the graphics program will interpolate the colors along the edge, so that the colors are a blend between the colors on each side and give the illusion of a smoother edge. This is also the reason behind the retina display, which packs 4 pixels into the area that are occupied by one on a normal screen--the image has the same physical size, but with more pixels this interpolation is much better.

That said, keep the icon in Fireworks and export to the size/format that you need. This is what Fireworks was designed for. If the final format you need is png, make sure that you export from Fireworks and don't used the layered Fireworks native png format.

  • But this graphic does appear to be partly anti-aliased.
    – e100
    Commented Nov 16, 2012 at 9:54

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.