reposting tutorial, transparent images

This is a tutorial that tells you how to make areas of an image transparent, and gives tips and tricks on getting the best results.

First a word on anti-aliasing. Anti-aliasing is what makes your transparent images look clean. It smooths the images. Since the main image format that uses transparency is .gif however, this is not easy to do. Gif's are based on SQUARE pixels. That means they don't have an easy time of doing smooth edges. Therefore anti-aliasing uses offsetting pixels with varying levels of transparency to give a smooth look.

Here is a zoomed up cross section of the image we will be working with.

Notice the jagged, square edges. That is just ugly. And when you look at the image, it is not pretty.

Here is a zoomed up cross section of an anti-aliased image.

Now of course, you might be thinking...hm, that still looks jagged to me. But notice the little boxes around it that are shaded slightly different, and at varying levels of transparency. When zoomed out this actually makes it appear round.

So, that is simple enough, just make sure anti-aliasing is working and you are set. Well, not quite. There are two major complications in sig making. The first is the size of the image.

When you are trying to make an image 300 x 150 max, it does not work to simply use anti-aliasing when saving. The reason? When the image is anti-aliased it uses too much of the actual image to make the transparencies, etc, and thin lines and details still do not look right. To overcome this you should work in LARGE an image as possible at first. I will not post my original for this work as it is well over 4000 x 3000 pixels! When you use a larger image and save with anti-aliasing, then resize it you don't lose as much of the image, as it seems to just shrink down the existing patternÃÆââââ¬Å¡Ã¬Ã¢ââ¬Ãâyeah I know, it doesn't make sense to me either, but it does work!

The second difficulty is that anti-aliasing of tranparent images is greatly affected by the background color of your target page. For instance, if you have an image for a black background then the semi-transparent pixels of different shades will be dark grey shades, so as to blend.

If you are making a web page that is no big deal. You know what color the page is and can make the anti-aliasing for that color. But what if your background color changes (as in runescape forum themes). Then it becomes a real problem. In fact, the only solution I have found is to make your image optimized for the theme that most people useÃÆââââ¬Å¡Ã¬Ã¢ââ¬Ãâsubsilver. In other words, you will anti-alias with a light grey background in mind. The downside to this is that if people use sub-black etc. it will not look right. They will see a little light color irregular edge. But since most use the default that is best to use.

This is a tutorial for making transparent images in Corel Photopaint. This is not one of the most used programs, but if ya have a limited budget pick up last years edition (10 ) and go to it, it is a great program.

The general principles learned here will be helpful for other programs as well.

Here is the basic image we will be working with, and the corel workspace

This was a sig made for sk8ordie, and he never picked it up. But it has what we want...lots of curved lines. Notice it also has a white background. You can start a new image with a transparent background, but that is not always what you want. In fact, one of the things that is helpful is to start with a background the same color as your destination page...or in this case light grey. But in this case, we are starting with white because I imported this from corel draw and that is easiest :)

The image is actually zoomed way out, because, as I mentioned it is HUGE. Now we need to resize it for sig use. Simply go to the IMAGE MENU and select resample.

It will bring up the following dialogue

Enter the new desired dimensions as seen in the pic above. Make sure that anti-alias is selected!!!! Also make sure that you keep the aspect ratio the same, unless you know what you want both figures to be. This image is not that wide, so if I want the image to display as large as possible I set the HEIGHT to 150. That gives me a width of only 195, but that is the maximum size with this image. If my image is very wide I will set the width to 300 and the height will auto-adjust.

Now, since you resized it, and had it zoomed way out for the large image, you will have to zoom it way in again to see the picture normally.

Now for the saving it as a transparent image. First you need to EXPORT to GIF format. Go to the FILE menu and select EXPORT...it will open a dialogue like this:

make sure that you put the file type to gif. Then hit SAVE in the upper right corner.

It will next bring you to this menu:

Notice that the option to make a color transparent is set. Once this is done, use the eyedropper tool that is circled and tap it in an area that has the color you want to be transparent. Then just hit ok through the rest of the menus and you will have that great transparent image.

Only one problem. If you use a color selection model, it has limitations. For instance, our target background is light grey. So anything that is white in your image will now be light grey. This means that our smiley guy will now have GREY EYES! because they were white. Not only that, but the image right now is optimized for a WHITE background, not a GREY one, so you will see a very faint grey ring around the imageÃÆââââ¬Å¡Ã¬Ã¢ââ¬Ãânot good.

There are two ways to fix this. The first is to use the bucket fill tool and put a fill into the background area of a LIGHT GREY color. Then select that color as your transparent one. This works, but sometimes the fill will mess up your great smooth lines on your image.

The other way is to use a different means of determining what is the transparent area.

I use a SELECTION to determine what will be my transparent area.

Here is how it works. Use whatever selection tool you want to select your main image. Most will find the magic wand tool easiest. But remember, if you use the magic wand tool to select the background you must INVERT your selection, or MASK in order to have the image itself selected. Or if you want, you can leave it and there is an option to use an invert mask later.

The little lines indicate our mask. You can invert the mask by going to the MASK menu and selecting INVERT.

Now go to export again, select .gif format, etc. only this time when you get to the next dialogue, instead of using a color to determine your transparency, use a selection.

Now the transparent section will be all the area that is not masked. But notice that the color table (circled in red) is also set to light grey. This becomes the transparent color of your image. You see transparent .gifs make a transparent image by making one color transparent. Therefore, when you determine transparency by selection, it just adjusts the color of the part you want to be transparent. Here by setting that color to light grey we make sure that the anti-aliasing is optimized for subsilver.

Now just click ok on all other menus, and there ya go :)

Here is the final image.

Good luck!

Or make a .png file like my signature below...the lines are not "edgy" and work with any backround color. :wink:

Yeah I like png's but have trouble getting them under size requirements.

Oh and your avatar has a ring around it on sub black :)

but my signature doesnt have....the lines disappear in it. Should you have a working browser..

should I have a working browser.....huh?

Face it man, no image format is perfect.