disdat designs PSP 7 Tutorial - Transparent GIF

DisDat Designs - Paint Shop Pro 7 Tutorials
Creating a Transparent .GIF

This is an Intermediate PSP 7 Tutorial- Remember to SAVE OFTEN!

If you would like to offer any of my tutorials to your groups or classes, please contact me first. Please list the name of your group or class, and your website if you have one. Thanks so much!

If you like my Paint Shop Pro tutorials, be sure to take a peek at my new tutorials at Debbie T Designs. Learn how to build your own web site with free tutorials for xhtml and css!

I have received a request for a tutorial for creating PSP 7 TRANSPARENT GIFS, so I thought I would give it a try. The above DisDat Designs header image has been created with a transparent background.

Let's get started.

1. Create a new canvas 400x200 - TRANSPARENT BACKGROUND.

2. On a New Layer, ADD some text - I am using Vector Text. You can use Raster or Vector - whatever you are most comfy with. Below you will find my Text Settings: (notice I am using a texture for my fill)

transparent text dialog box

3. I added a shape in back of my text also. Here is what I have so far:

shape t oo

4. Now Crop your image to remove the empty space around your logo. My image was reduced to approximately 400x95. Save your image as .psp format.

5. At this point, you have to decide what the color of your background will be on your web page. This will be the web page that your transparent image will be uploaded to. The background on this page is a light blue - color #b0c4de.

CHANGE the background color swatch on the color palette to reflect your web page background color.

Don't worry if you change your mind later and decide you would like to try a new color for your web page background. It is easily remedied. It is important to keep your logo saved as a .psp format so you can easily export the transparent gif for different background colors.

6. Click on VIEW>PREVIEW IN BROWSER. Here are my settings (GIF, INTERNET EXPLORER, BLUE BG COLOR- choose the main color of your web page background) See image below:

preview in browser

7. Click PREVIEW button. The GIF Optimizer dialog box will appear. The FIRST Tab is to set the TRANSPARENCY. Choose "Existing image or layer transparency". What this means is that the optimizer will use the transparency already in your image.

8. The SECOND Tab is PARTIAL TRANSPARENCY. Choose "Use full transparency for pixels below ## % opacity." I like to use a low number, somewhere between 10 and 1. You can experiment with the settings. Choose YES, to blend with the bg color.

Note: I find that the dither and 100% opacity settings create hard edges. When you specify your bg color, the edges take on the color of the bg and stay soft so it displays flawlessly on your webpage.

gif optimizer 1

9. The next tab is for COLOR. Choose the least amount of colors for your image. Since my logo has only a few solid colors, I chose 15 standard/websafe colors. Experiment with the settings. Try Median Cut or Octree to see if it changes your file size and quality of the image. The best settings will produce a good quality image while keeping a small file size. If you are optimizing a detailed colorful image, then you will need more colors (up to 256.)

10. For the FORMAT Tab, choose either NON-interlaced or interlaced. Experiment to see which will produce the smaller file size.

11. The DOWNLOAD TIMES Tab is to show approximate download times for your image.

12. Now click OK. The chosen browser will open and display your image. Neat, huh?

13. If your image looks good, let's export it. Click FILE>EXPORT>GIF OPTIMIZER. Your settings should have remained from your browser preview. Double check to make sure the blending background color is the color of your web page background.

Here is my finished LOGO:

DISDAT designs final logo

If you change your webpage background color, just open the .psp image and export again with the new bg color. Easy, huh?

I hope you enjoyed the tutorial.

Learn (x)HTML & CSS ~ Paint Shop Pro Tutorials ~ Contact debbieT ~ Beginners ~ Free Backgrounds ~ Home

Website Design & Graphics created by debbieT and DisDat Designs
© 2000-2006 - all rights reserved.