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.

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 achievements as it appears on the achievements page

http://jibrjaabr.appspot.com/img/achievements/jibberjabr/fixated.gif

When you "Brag to your friends", FB will place a statement on your wall that includes a image scaled from the one our app provides to the 90x90 size they store on their CDN.

The 3 images below are from left to right:

90x90 from FB, 90x90 from AI, 90x90 PNG24 from Illustrator

90x90 from FB 90x90 from AI PNG24 from AI

The designer, (also my girlfriend) is going nuts over the way the 90x90 jags up around the outside of the circle. So she goes to create 90x90s directly from illustrator to get around this problem and it appears that Illustrator is doing only marginally better than FB did.

Is it just impossible to get nice smooth edges at this resolution? Is there some trick to getting the small image to look as nice as the larger one? Is the transparent background causing this?

They are 256 color gif images. She's tried exporting them as PNG24, but gets the same effect.

share|improve this question
2  
90x90px is not "high resolution" (nor 180px) by any stretch of the term BTW. Especially on a 72 or 96 dpi computer screen. In addition, the FB GIF is 256 colors and this is readily apparent in the dithered gradient at the center of the image. The edges are just a higher contrast so the dithering is more apparent. The PNG24 looks better in the center gradient and the edges. –  horatio Dec 20 '11 at 18:56
add comment

1 Answer 1

up vote 4 down vote accepted

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:

bicubic resampling in Photoshop

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.

share|improve this answer
2  
It's probably worthwhile to point out that alpha channel transparency is graduated (in 8-bit, 0-255 opacity), whereas gif transparency is an all-or-nothing proposition and so can't be anti-aliased. Dithering is of no help in a curved edge against transparency. –  Alan Gilbertson Dec 21 '11 at 1:05
add comment

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.