Mobile app version of vmapp.org
Login or Join
Mendez620

: Jagged lines on my icons 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

@Mendez620

Posted in: #AdobeFireworks #AdobeIllustrator #AdobePhotoshop #Icon #Vector

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?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Mendez620

3 Comments

Sorted by latest first Latest Oldest Best

 

@Phylliss782

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.

10% popularity Vote Up Vote Down


 

@Samaraweera207

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.

10% popularity Vote Up Vote Down


 

@Sherry646

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme