Tutorial: How to Save an Image with a Transparent Background Using PSP or AS3

[charliemc]

Have you wondered how people create images that have a transparent background? It's really not that difficult to do. But what makes them 'work' is all about the way you SAVE your image!

Note: While you get a much nicer image with a smoother edge if you save in the .png format, many browsers still don't support the .png transparency -- so I don't really recommend doing it.

We'll be learning two different ways to Save transparent background images -- one using Paint Shop Pro 7 (PSP7), and the other using Animation Shop 3 (AS3).
We'll end up with images that look like this:





REMEMBER!!! This tutorial doesn't deal with creating the transparent background -- but only with how to SAVE it.

Be sure to check our MEMORIES and TAGS for tutorials that deal with creating transparency...

So let's get started, shall we?

I'm going to assume you have PSP7 open. Take a second and also open AS3.

We'll be starting off with an image that's ready-to-go -- meaning you should be working with an image that currently has a transparent background. This is why I began with the assumption that PSP7 was currently open! (smile)

There are actually two ways to Save a transparent background. You can either do it in Paint Shop Pro using the Export feature -- or you can do it in Animation Shop 3. Either way is fine -- it just depends on which method you prefer!

Using PSP's Export Feature

1. Your image with the transparent background should be opened and selected.
   
   
   
   
2. Go to File > Export > GIF Optimizer.
   
   
   
   The GIF Optimizer window will open.
   
   
3. Click on the Transparency (first) tab and use these settings:
   What areas of the image would you like to be transparent?
   Select: Existing image or layer transparency
   
   
   
   
4. Click on the Partial Transparency (second) tab and use these settings:
   Partial transparency...
   Select: Use full transparency for pixels below 40% opacity.
   Note: You can play with the percentage, of course, varying it up and down to suit you.
   Would you like to blend...
   Select: No, using the existing image color at 100% opacity
   Note: With some shapes you're just not going to get the exact look you want -- so be warned in advance! Frankly, there's no way to get a 'perfectly clean' edge, I'm afraid, and keep it transparent -- except when you're using straight lines. Of course, if you know what color your background will be, then you can always select 'yes' and pick a color. Then you'll end up with an image that has a line of color around it. (I'm sure you've seen these types of transparencies before!)
   
   
   
   
5. Click the Colors (third) tab and use these settings:
   How many colors... 256 (all the way up)
   How much dithering... 100% (all the way up)
   What method of color...
   Select: Optimized Octree
   
   
   
   You can skip both the Format and Download Times tabs.
   
   
6. Click OK.
   
   The Save Copy As window will open.
   
   
7. Decide where you want to save your image and type a name. (Note: It's a good policy to avoid spaces/blanks in any image name. Instead, use hyphens or the underscore!) Remember not to accidently change the .gif format!
   
   Click the Save button.
   
   
   
   You can now simply close/discard the image, as exporting is your save!

Using AS3's Save

Even though you're not creating an animation when saving an image that has a transparent background, it still works as a way to Save and keep the transparency! Nifty, isn't it?


1. In version 7 of Paint Shop Pro (PSP7), we need to start by saving our transparent image in the .psp format before proceeding. Do this now.
   
   Important Note: Your image can only have one layer, total. So if you have several layers against a transparent background, you'll need to Merge Visible (Layers > Merge > Merge Visible) before you save! (Otherwise you'll accidently end up with an animation -- flipping from one layer to the next...)
   
   Just for the record, in later versions of PSP, the above step isn't necessary.
   
   
2. Go to AS3 and Open the image you just saved.
   
   Time to Save our partly transparent image!
   
   
3. Press the F12 key on your keyboard. (Or click the Save button on your standard toolbar. Or press Ctrl + S. Or go to File > Save.)
   
   The Save As window will open.
   
   
4. As above, decide where you want to save your image and type a name. (Note: It's a good policy to avoid spaces/blanks in any image name. Instead, use hyphens or the underscore!) Remember not to accidently change the .gif format!
   
   
   
   
5. Click the Save button.
   
   
6. The 'Animation Quality Versus Output Size' window will open.
   
   
7. Click the 'Customize' button.
   
   
   
   The Customize Optimization Settings window will open.
   
   
8. Click the Colors (first) tab. Use these settings:
   Number of colors: 255 colors
   Create palette by: Optimized Octree
   Reduce colors by: Error Diffusion
   
   
   
   
9. Click the Optimizations (second) tab. De-select (remove the checkmarks) next to all the settings.
   
   
   
   
10. Click the Partial Transparency (third) tab. Use these settings:
    Partial transparency... (top)
    Select: Convert pixels less than 100
    Note: You can play with this setting. I suggest a setting no lower than 90 -- and probably no higher than 120. But try it out and see what works best for you!
    Would you like to blend...
    Select: No...
    
    
    
    
11. Click the OK button.
    
    
12. Click the Next button.
    
    
13. Click the Next button.
    
    
14. Click the Next button.
    
    
15. Click the Finish button.
    
    Note: If you get a 'cannot be identified...' error message, just ignore it! I've no clue why that happens, but it doesn't seem to spoil the save. (smile)
    
    You can now close the single frame 'animation' you just made.

Personally, I feel you have a tiny bit more control over your save using the AS3 method. But that might just be me! (smile)

Try out both methods and see what works the best for you!

Note: Obviously the second method will als works for saving transparency in an animation...

As you can see, saving transparency is much easier than people think! (grin)

==CharlieMC, assistant moderator