Debisty Designs

How to Create, Optimize and Save a .gif Image
Part 2

In part 1 of this tutorial I showed you how to create and save a transparent .gif image which will look perfect on any white background (see example on the left). When added to a coloured background, awful looking jaggered bits appeared ruining the overall look of my image (see example on the right). This part of the tutorial will show you how to save your transparent .gif with a specific plain coloured background or tiled background image background in mind.

In Part 1 you were told to start off by creating your image on a white background rather than a transparent one. I can't emphasis that point enough even though in this instance you're not wanting to put your finished object onto a plain white web page or insert it into an e-mail with a white background - ALWAYS CREATE ON WHITE! This time you might like to be a little more adventurous though and add a shadow to your image. When you're ready, click on Web/Image Optimizer and as you did in Part 1, click on Selected objects and then on OK when the box pops up. Let's move on now to see what options we have in the next box.

1. This is where you need to select which format you're going to save your image in. Be sure that GIF is selected.
2. Click on the 1:1 button to view your image in the preview pane at it's full size.

3. Click on the Mask Options Tab.

4. Be sure that Pick Color is selected here

5. Right click on your mouse to bring up the colour options in this Matte box. Choose a colour that matches that of your chosen web page/e-mail background. If you happen to know the hex code of the colour you need then click on Ulead Color Picker and you will see where you can enter that code towards the bottom of the pop up box.

6. Click on the Save As button. Give your image a name and save to a folder of your choosing on your hard drive.
NOTE: (I suggest that you name your image including the hex code reference number for ease of reference... i.e.: the jewel I'm saving as an example in this part of the tutorial is named jewel-9900ff.gif I know then that it's a jewel that can be used on a background with that hex code colour).

You can see from my example on the left here that my image has been saved with a coloured background and from the example on the right you can see how that jewel has been placed on a tile of the same colour...it blends perfectly, even the shadow looks good!

Let's move on and save that image for a specific background image tile.

Go back to step 5. Instead of selecting a colour, click on the little arrow at the side of the Matte box and then click on Image File. Search your hard-drive for the image you wish to use as a background image tile on your web page or e-mail, double click on it. Save your .gif image as before.

You can see from my example on the left here that my image has been saved with a background tile and from the example on the right you can see how that jewel has been placed on that tile image...it blends and lines up perfectly!

I hope this tutorial has been of benefit to you and that you have learned something new from it :-)

Debisty Designs Tutorial Award
When you have completed this tutorial you are welcome to download and display this award on your web page. As a courtesy, you may wish to display your results on the PhotoImpact International Board. This award is being offered on the honour system. Right-click on image and save to your hard drive.

[Index] [Gallery] [Tutorials] [Downloads]
[PI Newbies] [PI Challenge] [WET] [Links]