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?
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.
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.
