Tips on creating a transparent gif with white content?

August 18, 2007 3:31 PM

Any hints on creating a transparent .gif that uses solely white content?

I'd like to consider myself reasonably familiar with adobe photoshop but this one has got me stumped. I'm creating a personal website and my "logo" is supposed to be white with transparency so you can see the background image behind it. I can't seem to save it properly under adobe photoshop using the save for web function, it just comes out very aliased and blocky (although, it is transparent). How do I avoid this blockiness?

My logo file is here.

Thanks for any help!

Matt.

posted by mattydavy to computers & internet (14 comments total)

Knee-jerk reaction from what you are saying: Though you only have one color in your logo - white - in the image itself there are actually potentially dozens more: shades of white between 100% and the color of your background image. Increasing the number of colors in your palette should reduce the alias-y look of the edges of your gif.

Also, note that gif does NOT interpolate between a color and transparency when anti-aliasing an image. That is, in order for the shades-of-grey approach I outlined above to work, you actually need to have the pixels that are your background colored in. Otherwise, gif says "well, that background pixel, since its transparent, could conceivably be red or black or who knows, so there is no way for me to intelligently interpolate between your foreground color and that background along the images, so I just won't, neh."
posted by ChasFile at 3:38 PM on August 18, 2007

The trick is to pick the right matte color. Pick a color that matches your background image the closest and use that. Photoshop will use that color to dither into the white. Hopefully your background image isn't too busy, or at least some of your logo image will look blocky.
posted by FreezBoy at 3:45 PM on August 18, 2007

if you want graduated alpha, use png.
i don't know about the current state of browser support for png, but back in the day, at least, there used to be some issues. [1] [2]
posted by juv3nal at 3:50 PM on August 18, 2007

juv3nal: PNG is kosher for Firefox going back years, but only 100% good looking in IE's latest version (older has a white matte). I'm all for penalizing users who won't bother to make free program upgrades, but for a business it would probably be a bad idea to use PNG just yet.

The above advice is very good (the stuff above mine, I mean), but you could also just give the logo its own little square background to set it off from a noisy background image (and forget about transparency).

Also, putting it in a semi-transparent css div with the same color as your gif matte would make it blend better if your background image is busy and matte-unfriendly.
posted by cowbellemoo at 4:01 PM on August 18, 2007

for instance this looks ok on firefox 2.0.0.6
posted by juv3nal at 4:02 PM on August 18, 2007

Personally, I would have made the art bigger to begin with so that the curly part (Layer 2) is not so pixellated. Is this the part you don't like? Because the text looks fine to me when saved for web (with a matte color as FreezBoy suggests), but the curly part fades into the background. I don't think it will look sharp until the initial size is increased (hopefully you have the vector files).
posted by desjardins at 4:02 PM on August 18, 2007

If I understand correctly, you want only white in the logo. No gray lines around the outside. You then want the website background image to show through anywhere the white of the logo is missing. This may be a case where cheating is your best option. If the above info isn't helpful (such as choosing a matte color that matches your website background) then you may be better off to include the background image in the logo itself.

You may need to code the background image so it doesn't move in relation to the other content (if you know what I mean.)

If you gave us a link to the page or background image you want to use the logo with, that would be a huge help.
posted by The Deej at 4:03 PM on August 18, 2007

oops. in retrospect, cowbellemoo has a good point.
posted by juv3nal at 4:04 PM on August 18, 2007

Some folks may cringe at any use of the F-word, but Flash would work here with WMODE set to transparent. For greatest compatibility, publish for Flash Player 6 or 7.
posted by thinman at 4:15 PM on August 18, 2007

The GIF format only allows for one bit (i.e., on or off) of transparency. Therefore if you want something to blend/anti-alias into the background smoothly, you have to actually mix some of the foreground and background colors together as nontransparent edge pixels. This is what enabling the Matte option and selecting the background color that the GIF will be on top of does.

In other words, when you create a transparent GIF you have to choose between either: A) looking good only when it's on top of the one designated background color that you chose when creating it or B) working with any background color but having zero anti-aliasing (jagged, rough edges.)

If you try to mix these two options you will get an ugly halo effect the chosen matte color doesn't match the actual background color.

Note that it is possible to use PNG with its full 8 bit alpha layer just fine with all versions of IE if you're willing to accept a JS-based helper.
posted by Rhomboid at 4:26 PM on August 18, 2007

I was going to type in a long explanation here, but Rhomboid said everything I was going to.

Use PNG. It's been a W3C standard image format since the mid-90s; anyone in this day and age using a browser that can't handle PNG really shouldn't be expecting things to display properly anyway.
posted by hattifattener at 4:55 PM on August 18, 2007

If setting the Matte colour isn't good enough, and you can't use PNG, then you could try anti-aliasing onto the background image (assuming the logo will always sit in precisely the same position relative to the background).

Put the background image in a layer behind the logo and align it as it is in the page. Use a select tool to pick out only the logo without anti-aliasing (e.g. apply wand with Anti-alias unticked to area around it then invert selection), then use Copy Merged to grab the logo with a slim halo of the background image. Paste back into the image, make sure it's lined up the way it was, then hide the other two layers and Save For Web.
posted by malevolent at 1:16 AM on August 19, 2007

Make a transparent png and then write this code:


<span style="width:400px;height:32px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png');"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="logo.png" width="400" height="32" border="0" alt=""></span>


Make sure the height and width is accurate and you'll be in good shape. I've dealt with IE6's lack of PNG transparency for years and this is my favorite way to deal with it, especially if there's only one PNG on the entire page.

More info
posted by jragon at 9:19 AM on August 19, 2007

Use PNG. It's been a W3C standard image format since the mid-90s; anyone in this day and age using a browser that can't handle PNG really shouldn't be expecting things to display properly anyway.

Strongly disagree. Regardless of how long it's been a standard, a massive chunk of internet users will think you suck at web development. And they'd be right.

If this logo has anything to do with the internet, that would be enough to lose you a job.
posted by jragon at 9:23 AM on August 19, 2007