: Jagged edges from illustrator We built a game for facebook http://apps.facebook.com/jibrjabr that uses images created in illustrator and exported as gif. This is a high res version of one of the

@Radia289

She shouldn't have used GIFs in the first place since GIFs are an archaic format that doesn't support alpha channel transparency. That means you can't AA curves or diagonals without using a matte color, which means it'll only look properly on a solid background of that color.

That, in combination with a faster but lower quality downscaling algorithm, is probably what's responsible for the jagged edges on the first image. (Edit: as noted by horatio and Alan, the GIF image is also dithered to compensate for GIF's limited palette size, which itself produces some artifacts.)

The second and third images look fine however. You're using a relatively dark fill color and then outlining it with an even darker stroke while displaying it on a mostly white background. So your only options are to AA it further, which will soften the edges, or leave it looking crisper the way it is, but have more visible aliasing. That's just the limitation of your display and color choice.

The design you've chosen can have more AAed edges and still not look blurry though. This is demonstrated here:



That was done by simply dropping the original 180x181 GIF into Photoshop and downscaling it using bicubic resampling. You can try the other resampling methods, but I think this produces the smoothest results.

However, using a transparent GIF as the source material probably isn't the best option. So if she directly exports the vector image into Photoshop and then rescales the smart object and saves it as a transparent PNG with an alpha channel, she might get slightly better results.

Vote Up Vote Down