Transparent .gif in PS?

[bluefooted]

Hey all,

This is actually a work question And probably more design- than art-related...

I've been trying all morning to make a small web graphic with our logo that people can put on their websites to link back to us - a button, basically.

I'd like this to be a small gif (no bigger than 200 pixels wide or so) with a transparent background, so it can be easily placed on any website. However, every time I save my .psd as a .gif, it ends up looking like shit - all the edges are jagged and crappy. The large-size original looks fine in .psd format.

I know other people have nice looking, small gifs with transparent backgrounds. What am I doing wrong?

[AdamR]

Hey there,

While the GIF format is a very easy one to use in order to create transparent backgrounds, there are a few flaws behind it which will most always give you undesirable effects. To understand these in detail, take a look http://webstyleguide.com/graphics/gifs.html. Likewise, a tutorial which may help you in saving with correct settings could be this.

A PNG might be a more appropriate option for you to consider. Take a look around Google and you'll find plenty of information on the pros and cons of using it.

- Adam

[bluefooted]

Thanks, Adam!

Yeah, might have to go with a .png - the anti-aliasing is killing me. Or I can just give up on the transparency and produce a solid button

[AdamR]

No problem.

PNG would be the way to go, however you can still make a perfectly fine button without any sort of transparency at all.

Any more questions feel free to ask

- Adam

[Mirana]

I just made a bunch in PS no problem. I'm not sure what specifically is your issue and what you know already, so bear with me...

Make your background layer something completely opposite your button scheme (neon!). Create a new layer with the solid shape of your button, using the pencil tool. Preserve transparency on the new layer and use a good contrast shade color on low opacity brush. Darken any edges you'd like to give a rounded look to. This will give the anti-alias look, without blending with the background color and creating jaggy white edges. From there, "Save for Web...", select your neon background color from the color swatches, click transparent mapping and save.