Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question

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.
share|improve this answer
    
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 Dec 1 '12 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.

share|improve this answer

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.

share|improve this answer
    
But this graphic does appear to be partly anti-aliased. –  e100 Nov 16 '12 at 9:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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