Design Tutorials

Creating background and anti-aliased transparent GIFs

Ever wonder how to get the best out of FreeHand's GIF export? How to create tileable background GIFs or even transparent, anti-aliased GIFs? Well these series of tips will certainly help with the mysteries.

I first have to express my gratitude to Ken Kehl and David Gangwisch (FreeHand's SQA Engineer) for helping me understand how FreeHand exports GIF files with transparencies. I can tell you this, the manual sure didn't help much and if you were as confused as me, you'll want to thank those guys too.










Above is some art I'm going to be exporting in this series of tips. The logo is all vector art in FreeHand as well as that background shape. The background pattern is actually a Tile filled rectangle consisting of a bunch of lines.

This is basically a comping piece to show what the logo would look like on the background. Once the client is happy, we can now make this art ready for the web.

The main purpose of this exercise is to export both pieces as separate GIFs. The logo will be made transparent and will be anti-aliased to the yellow color that falls behind it.

Tileable Background GIFs








This is the part that I used to create that Tile fill. It's a simple rectangle containing a blend of two yellow lines. If you've created such a fill, then all you need is the starting piece like shown above.

While this piece is selected, go to the File menu and Export.
















Select the GIF format and turn on the option Selected objects only (only if you have other objects in your document).

Next click the Options button to see more options available. Choose 72 dpi, anti-aliasing at 2-3 and turn off the Include alpha channel options.

In the More options area I chose these (they may be different for your art):

• Interlaced turned on
• Dither: None
• Palette: WebSnap Adaptive 16
• Optimized Palette turned on

The results are what you see above. The table cell is set to have this background pattern in it so it repeats seamlessly.

The tag will look something like this:


So that's how you create background tileable GIFs. Easy enough eh? Now on to the really fun stuff.

Transparent Anti-Aliased GIFs








background. The reason we need to make it transparent, is so you don't have to be exact when placing it on your HTML document.

First I'll show you what happens with just a regular GIF export with no anti-aliasing. Then I'll show how to fix that so it looks great!

With the logo selected, go to the Export dialog again.












We'll use nearly the same export options as before, only this time we'll turn on the Include alpha channel option.

In the More options area I chose these:

• Interlaced turned on
• Dither: Moderate
• Palette: WebSnap Adaptive 128
• Optimized Palette turned on
• Transparent Background turned on

The results are what you see above. As you can see, while the background of the GIF is transparent, the edges of the text and the logo shape are all jagged. This is not what I had in mind, and I'm sure the client wouldn't be happy.

FreeHand automatically uses the non-object areas of the page as an alpha mask. With the GIF, however, you need to provide a color for the transparency edges to anti-alias to.

So how do you get around this? Well remember seeing that option Alpha includes background? Now we are going to put it to use.











Select all the art you want to anti-alias. Clone this and it might be a good idea to put this on a new layer to keep from changing the original art.

Now give everything a thick Stroke. If any of the art doesn't have any stroke, then give it one. This includes Text (for more on giving text a stroke, see the tip Giving Text an Outline in the Tips Archive).

Then place this cloned art behind the original art and check if the strokes are thick enough to see. In my example above, I recolored the strokes green so I could see what was going on.

Generally you want to make sure the strokes are a couple of points thicker than the original art. Once you are happy with the thickness, recolor the strokes to White.









Now you want to create a rectangle filled with Black behind this white clone. This can be any size.

The reason we are doing this is how FreeHand uses the Background as an Alpha channel. Anything Black will be masked out or transparent, while anything white will be solid.









If you placed this cloned art on a new layer, just move that layer to the background area of the Layers palette (below the separator). If not, then just move the art to the default Background layer.

It should now appear screened back like shown above.










Now since we want to anti-alias to that background pattern, we will create a solid block of color behind the logo. This is based on the most dominant color of the pattern... yellow. This rectangle also acts as the bounding area for the size of the final GIF.

Now off to the Export dialog again.












Use the same export options as before, only this time we'll turn on the Include alpha channel and the Alpha includes background options.

In the More options area I chose these:

• Interlaced turned on
• Dither: Moderate
• Palette: WebSnap Adaptive 128
• Optimized Palette turned on
• Transparent Background turned on

Above is the final results. As you can see, the edges are perfectly anti-aliased to the yellow color, seen as a slight yellow halo around the edges. This "halo" was defined by that white, thick stroked clone you created and put on the background.










Once placed on the final background pattern, it looks fantastic!

Of course you can adjust the halo size by decreasing or increasing the point size of the White colored clone you created.

Read More...