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 pink text graphics 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 apply text, and how to save it as a transparent Gif utilising Paint Shop Pro’s Gif Optimisation command.

Gif stands for Graphic Interchange Format.

Saving Jpegs, Gifs And Png Files - Loss Of Image Quality NotesIn 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.

NoteA transparency is represented by the following chessboard background.

1/ Applying TextOpen a New Image (Canvas), and set the following attributes into the New Image dialogue box - then click OK. Create a larger canvas if you prefer.

And enter the following attributes into the Text Tool’s Options Ribbon.

Font Size NoteYour choice of Font Size is determined by the canvas’s Dimensions; Image Resolution, and the type of Font; given these can differ between Paint Shop Pro versions, it is important to experiment with different (Font) Sizes.

Left-click over the centre of your canvas, and in the subsequent Text Entry dialogue box, enter your text, then click Apply.

All VersionsWhilst your text remains isolated by a Selection Marquee, activate the MoveTool.

Then hover your cursor over the Selection Marquee. When your cursor changes to the following cross icon, left-click and drag your text to a central position.

3/ Apply An Inner Bevel Now, to add depth, from the top menu, choose Effects then choose 3DEffects then choose Inner Bevel. From the subsequent Inner Bevel dialogue box, enter the following attributes, then click OK.

4/ Apply A Drop ShadowAgain, from the upper menu, choose Effects then choose 3DEffects then choose Drop Shadow. From the subsequent Drop Shadow dialogue box, enter the following attributes, then click OK.

5/Now, from the top menu, choose Selections then choose Select None. This removes the Selection Marquee. (Alternatively, press Ctrl then D).

6/ Optimise Your Text So It Blends With Any Background ColourIt is time to save your transparent text as a Transparent Gif. Therefore, from the top menu, choose File then choose Export then choose GIF Optimiser. In the subsequent dialogue box, illustrated below - click the Transparency tab, and set the following attributes. (Do not click ok).

NoteWhilst you are changing the Gif Optimiser’s settings, keep looking at the right-side Preview Window to see how the settings are effecting your text. 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 text 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 raggedness.

7/Now, click the Partial Transparency tab - and enter the following attributes.

Important NotesClick 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 text has been 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 text 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 your colour, click OK to close the Colour dialogue box. Do not close the Gif Optimiser dialogue box.

Important Opacity NoteIf the edge of your text 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.

Text Without Drop Shadows If your text has no Drop Shadow, you would set the Opacity setting to 1%, as illustrated below. However, because images react uniquely, it is always best to experiment.

8/Now, from the Gif Optimiser’s dialogue box, click the following Colours tab - and enter the following attributes into the dialogue box.

TipClick 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.

9/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 10.

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

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

Use Wizard NoteIn 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 Points1/ 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 Here5/ 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 InformationGraphics 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 be 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 blue - it will be extremely easy to blend your graphic seamlessly.

NoteIf 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.