Transparency Paint Shop Pro


	Transparent Graphics


	Optimise And Save Transparent Graphics - Beginners Plus Written For Paint Shop Pro 7 8 9 X Paint Shop Pro XI & X2 Photo + (Ultimate) Students Should Follow X’s Instructions

If you would like your navigation buttons, text or graphics to blend with your website or
e-mails, it is important to save them with a transparent background so they blend seamlessly with any background colour. For example, my purple flowers above, have been optimised to blend with a cream background; subsequently, they blend with this tutorial’s cream coloured background.

This tutorial demonstrates how to save a graphic as a transparent Gif, utilising Paint Shop Pro’s Gif Optimisation command.

Gif Hints And Tips Here On-line
Gifs Verses Jpegs - Pros And Cons On-line
Save Non-transparent Gifs Tutorial Here On-line
Link Here For My Create Transparent Text Tutorial On-line
Optimise And Save Jpegs - Paint Shop Pro File Format And Png Explained On-line

Gif stands for Graphic Interchange Format.

Saving Jpegs, Gifs And Png Files - Loss Of Image Quality Notes
In order to keep the file size down, the compression process randomly takes away pixels from your photograph; and as a result, every time you save an image as a Jpeg, Gif, or Png file, its quality will degrade. Therefore, to keep your Jpeg, Gif and Png files in optimum condition, always save the original image as a Paint Shop Pro Image; then open the original Paint Shop Pro file, and save it as a Gif, Jpeg or Png. Your images will then be perfectly optimised every time they are saved.

To work along, download the purple flower Here. Unzip the file and open the transparent image onto Paint Shop Pro’s workspace.

Note
A transparency is represented by the following chessboard background.

1/
Open your transparent image onto Paint Shop Pro’s workspace, then extend its grey workspace by left-clicking and dragging out one of its corners.

2/ Add A Drop Shadow
Then from the upper menu, choose Effects then choose 3D Effects then choose Drop Shadow. Set the following attributes into the subsequent dialogue box, then click OK.

3/ Optimise Your Flower To Blend With Any Background Colour
From the top menu, choose File then choose Export then choose GIF Optimiser.
From the subsequent Gif Optimiser dialogue box, click the Transparency tab - as shown below, and ensure Existing Image or layer Transparency is selected. (Do not click ok).

Note
Whilst you are changing the Gif Optimiser’s settings, keep looking at the right-side Preview Window to see how the settings are effecting your graphic. Additionally, prior to clicking OK, you can click a tab and change the settings at any time.

You will notice, (in the right-side Preview Window) - that the flower is surrounded by a ragged black stroke; this happens when you apply Drop Shadows to transparent images, or text. The following steps demonstrate how to disguise the black raggedness, so the flower blends with a light background.

4/
Now, click the Partial Transparency tab, and enter the following attributes into the subsequent dialogue box. (Do not click ok).

Important Notes
Click open the Yes, blend with the background colour swatch, then left-click to sample (collect) a colour from the subsequent Colour picker dialogue box. This setting works by making your chosen colour appear to be transparent; meaning, when your graphic is placed onto a website, or sent via e-mail; the e-mail, or website colour below it will show through your graphic. With this in mind, choose a colour that matches the dominant colour of your website, or e-mail background. For example, this tutorial’s background colour is cream, therefore, I have selected cream for the Yes, blend with...; this provides the best blend between my flower graphic and my cream background. When choosing your Blend colour, it is important that your graphic does not include the Yes, blend with.. colour;
if it does, that part of your graphic will become transparent.

If your website or e-mail’s background is not a solid colour, choose a solid colour that matches the dominant colour the closest. In addition, if you know your solid colour’s HTML code, then enter it into the Colour dialogue box - in the HTML box.

Colour Picker Dialogue Box

After selecting (or sampling) your colour, click OK to close the Colour picker dialogue
box; however - do not close the Gif Optimiser dialogue box.

Important Opacity Note
If the edge of your graphic is ragged, adjust the Opacity slider until it is smooth and crisp - the Opacity slider adjusts the Blend colour’s width; making it thicker or thinner.

Different Opacity Setting Examples

16 % Opacity 1 % Opacity

Information About Drop Shadow Optimisation Here

Images Without Drop Shadows
If your graphic has no Drop Shadow, you would set the Opacity setting to 1% - as illustrated below. However, because images react uniquely, always experiment.

5/
Now, click the Colours tab, and enter the following attributes into the subsequent dialogue box.

Tip
Click the Optimised Median Cut or the Optimise Octree to see which setting provides the best result. Depending on your image’s colours, one setting can produce a much better result than the other.

6/
Whilst the Format and Download Times tabs contain useful information regarding file type and download speeds, and are worth exploring - they are not crucial to this tutorial - therefore, after viewing the following tabs, proceed to the next step - Chapter 7.

7/
After you have optimised the Transparency, Partial Transparency and Colour tabs, and are satisfied with the outcome, click OK.

8/ Save Your Transparent Gif
After clicking OK you will be presented with a Save as dialogue box; now, navigate to a memorable folder, and enter a name for your image, (into the File name box), then click Save. Congratulations, your transparent graphic is ready to upload to your website, or send via e-mail, in your usual manner.

Use Wizard Note
In my experience, it is better to optimise your Gifs manually, as described in this tutorial. However, for quickness, click open the Use Wizard tab, and a Transparent Gif Wizard dialogue box will guide you through 5 quick optimisation steps.

Further Gif Points
1/ Gifs are best suited to simple graphics with few colours, such as screen screen captures and cartoons. As Gif supports a maximum of 256 colours, it is best to keep the number of colours to a minimum, thereby ensuring better quality graphics.
2/ Gif reduces your file size, enabling your web pages to download quicker. Remember, slow loading websites tend to encourage visitors to go elsewhere.
3/ Gif supports Internet Browser Transparency and animation.
4/ If, for instance, you are uploading a graphic to a web page with a white background - or you do not require a transparency - you can still save it as a Gif, however, you will not require the Transparency or Partial Transparency options. Save as usual, as described in this tutorial. Save Non-transparent Gifs Tutorial Here.
5/ Gifs will give crisp edges to text, while Jpegs may blur the edges.
6/ When applying drop shadows to Gifs the quality is not always 100%, it is therefore crucial that you select the Yes blend with background colour tab - from the Partial Transparency box; ensuring the colour matches your website background as close as possible.

Optimising Text With Drop Shadows - Additional Information
Graphics with drop shadows can be difficult to convert to transparent Gifs, and may require extra preparation. If, after following this tutorial, your graphic is less than perfect, and does not appear seamless on your web page; (perhaps you see can see white edges around your drop shadow) - the following information may help.

1/
First, open a New Canvas, then Flood Fill it with the dominant colour of your web page background; ensuring it is as close as possible. Remember, it has to be a solid colour, and this one solid colour will become transparent. Therefore, it is very important that this colour does not appear in your graphic; if it does, that part of your graphic will also become transparent.

2/
Now, place your text - or graphic, onto your canvas, and apply a drop shadow; then from the Transparency tab, select the Areas That Match This Colour tab - as shown below, then left-click the Colour Swatch, and introduce the colour that closely matches the dominate colour of the web page.

Colour Picker Dialogue Box

If your web page background is a solid colour; for example, cream, white or red - it will be extremely easy to blend your graphic seamlessly.

Note
If you choose a very dark - or black drop shadow, the blend will be far superior than it would if you were to choose a grey drop shadow; remember, the darker your drop shadow is, the crisper the subsequent blend will be.

Tip
Prior to saving your Gif, to reduce your file size, from the left-side Tools Toolbar, select the Crop Tool and crop away any extraneous transparency.

Wendi E M Scarth Top of Page - Home.

my logo example