Optimise Navigation Buttons


	Button Optimisation


	Make One Colour Transparent And Create Buttonised Effects - Intermediate Written For Paint Shop Pro 7 8 9 X XI And X2 Photo + (Ultimate) Students Should Follow X’s Instructions

In my previous creating navigation buttons from Preset Shapes tutorials (linked below).

Create Glossy Navigation Buttons From Gradients (PDF Tutorial) Here

Make Navigation Buttons From Preset Shapes And Save Them As A Transparent Gif
Make Navigation Buttons From Preset Shapes And Save Them As A Transparent Png

I demonstrated how to create transparent navigation buttons, and how to save them as Gifs and Pngs. The buttons’ canvases were transparent, making it fairly straight forward to save them with their transparencies intact. Part one of this tutorial demonstrates how to make one colour (the button’s background - for example), transparent. Part two of this tutorial demonstrates how to apply Buttonise effects to navigation buttons.

111+ Beginner PDF Tutorials
Optimise And Save Images On-line Tutorial

1/Part One - Make A Single Colour Transparent Part Two - Buttonise Navigation Buttons

Important
When making a single colour transparent it is vital that the colour you are making transparent (for example, blue) is not included in the navigation button - any part of the button that is blue, will appear transparent.

Lets assume your navigation button has been created (with a drop shadow) and its background colour is solid blue. (Make Navigation Buttons From A Preset Shape Here).

2/
To make the blue background appear transparent; from the top menu, choose File then choose Export then choose Gif Optimiser. From the subsequent Gif Optimiser dialogue box, click the Transparency tab, and from its dialogue box, set the following attributes.
(Do not click ok). Save Images As Transparent Pngs Here.

Tolerance 58

Note
When setting the Tolerance; don’t set it too high, if it is too high, parts of the button will become transparent. You are looking to remove just the blue background colour - whilst leaving the button’s colours untouched - this can take a little practise.

3/
Now, click open the Partial Transparency tab, and enter the following details - do not click ok.

Again, you may have to experiment with the settings - Transparent Gifs Explained.

Click open the Blend Colour Swatch, and from the subsequent Colour (Picker) dialogue box, click a solid colour that matches your website background colour the closest - I have selected cream; my navigation button will subsequently blend with this tutorial’s background colour.

You will notice that the right-hand upper preview box demonstrates the outcome of your button. Always experiment with the settings, and discover the best attributes for you.

Tip
Activate Paint Shop Pro’s Dropper Tool, and sample a colour from your website’s background, if necessary.

4/
Now, click open the Colours tab, and enter the following attributes - then click OK.

Notes
For optimum results, experiment with Optimised Median Cut and Optimised Octree, and find the best setting for your image’s needs. In addition, refer to the right-side Preview
Pane - to see how the settings are effecting your navigation button.

When you are happy with the transparency, click OK. In the subsequent Save copy as dialogue box, enter a suitable name for your navigation button, (into the File name box), then click Save.

Congratulations, you have made a single colour transparent, and your navigation button is ready to utilise in your usual manner.

Final Points
Remember, images will always react uniquely - and because Gifs are by nature rectangular - if you select rounded buttons, you will have to work harder to achieve a smooth edge. Furthermore, ensure the colour you select to be transparent, is not included in your button - as this will become transparent also. Top of Page - Home.

1/ Buttonise Navigation Buttons - Part Two
First, create a rectangular shaped navigation button (without the Inner Bevel), exactly as described in my tutorial here - making it the colour of your choice; then return to continue with this Buttonise tutorial.

Note
The Buttonise filter works on images that have been isolated with a Selection Marquee.

After you have created your navigation button, you are ready for the next step.

2/
From the left-side Tools Toolbar, activate the Magic Wand Tool .

And enter the following settings into the Tool Options Palette or Ribbon.

Paint Shop Pro 7

Paint Shop Pro 8 9 X XI X2 +

Left-click once inside the button - to isolate it with a Selection Marquee.

3/
Then from the top menu, choose Effects then choose 3D Effects then choose Buttonise. Enter the following settings into the subsequent dialogue box - or experiment, then click OK.

Paint Shop Pro 7

Paint Shop Pro 8 9 X XI X2 +

4/
When you are happy with the Buttonise effect, from the top menu, choose Selections then choose Select None, or press Ctrl then D. This removes the Selection Marquee.

5/
Congratulations, you have Buttonised your navigation button; to finish, apply your Text, then save your navigation button, as demonstrated in my Create Navigation Buttons Tutorial Here.

Note
The tutorial linked above demonstrates in detail how to optimise and save your
navigation button.

Wendi E M Scarth. Top of Page - Home.