Oval navigation buttons PSP


	Navigation Button Png


	Create, Optimise And Save An Oval Navigation Button - Intermediate Plus (Saving Transparent Images As Transparent Pngs) Written For Paint Shop Pro 7 8 9 X XI And X2 Photo + (Ultimate) Students Should Follow X’s Instructions

This lesson demonstrates how to create, optimise and save an oval navigation button as a transparent Png. Create A Rectangular Shaped Navigation Button And Save It As A Transparent Gif

Create Glossy Navigation Buttons From Gradients (PDF Tutorial) Here

111+ Beginner PDF Tutorials
Understanding Layers On-line Tutorial
Buttonise Preset Shapes On-line Tutorial
Download/Apply Preset Shapes PDF Tutorial
Optimise And Save Images On-line Tutorial
Make One Colour Transparent On-line Tutorial
Save Transparent Navigation Buttons As A Transparent Gif On-line Tutorial

1/
Open a New Image (Paint Shop Pro 8 9 X XI X2 + Raster)
Size 150 Pixels Width X 100 Pixels Height - make your button larger - or smaller, if you prefer
Canvas Background - Transparent
Resolution Paint Shop Pro 7 72,000 - Paint Shop Pro 8 9 X XI X2 + 200,000
16 Million Colours/RGB 8 Bits/Channel.

2/
Then from the Tools Toolbar, activate the Preset Shape Tool.

PSP9

Enter the following Retain Style settings into the Tool Options Palette or Ribbon - or choose a navigation button of your choice.



Paint Shop Pro 8 9 X XI X2 +

3/
Now, left-click and drag out (draw) your navigation button onto the canvas - making sure it is not too large.

Enlarged View

Tip
To reposition and reshape your navigation button; hover your cursor over the small square handles that are attached to the Vector Deformation Bounding Box, and enlarge - or reduce its size accordingly - remembering to leave room for the subsequent Drop Shadow.

4/
After you have applied, and resized the navigation button; from the top menu, choose Layers then choose Convert to Raster. The deformation box will be removed, and your Layers Palette will resemble the following.



5/ Apply A Drop Shadow
From top menu, choose Effects then choose 3D Effects and choose Drop Shadow. Enter the following settings into the subsequent dialogue box, or experiment - then click OK.



6/
Now, introduce either a Solid Colour, Pattern or Gradient into the Background Colour Swatch - this will represent your text’s colour.



7/ Create A New Raster Layer
Then from the top menu, choose Layers then choose New Raster Layer; there is no need to name the New Layer, unless you wish to. Click OK to the subsequent dialogue box, accepting the default settings.



8/ Apply Text
Working on the New Raster Layer; from the left-side Tools Toolbar, activate the Text Tool.



Then apply the text of your choice onto the button; I applied the following settings. After clicking OK or Apply - left-click and drag your text to a central position.

Font Size Note
Your 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.

Paint Shop Pro 7

Paint Shop Pro 8 9 X XI X2 +

Tips
To reposition your text - (whilst the Selection Marquee remains), left-click and drag it to a central position over the button.

Tip - All Versions
Nudge the text into position pixel-by-pixel by tapping your Keyboard’s Arrow Keys.

Paint Shop Pro 7 only: Press and keep pressed your Ctrl Key, then simultaneously tap your text into position using the Arrow Keys.

9/
From the top menu, choose Selections then choose Select None - or press Ctrl then D. This removes the Selection Marquee.

Note
To reduce the subsequent file size, (from the Tools Toolbar), activate the Crop Tool, and Crop away any extraneous transparent canvas.

Tip
Prior to merging the Layers; you can blend the text with your button by altering the Text Layer’s Blend Mode - and/or, by reducing the Layer’s Opacity. Layers Explained - Blend Modes Explained.



Tip
You cans save your navigation button with its Layers intact, (to edit at a later date),
by saving it as a .PSP File.

10/
Now, from the top menu, choose Layers then choose Merge then choose Merge Visible. Your button is complete, and it is ready to save.



Png Notes
Given the navigation button’s gradient attributes; for optimum results, I am saving it as a Png, rather than a Gif. Png compresses images, (retaining their transparency), whilst at the same time - retaining the image’s 16.7 million colours. Gifs on the other hand compress files, reducing them to a maximum of 256 colours. The disadvantage of Pngs is that some older Web Browsers don’t support it.

11/ Save Your Transparent Button As A Transparent Png - Save And Optimise Images
From the top menu, choose File then choose Export then choose Png Optimiser.
From the subsequent Png Optimiser dialogue box - click the Colours tab, and from the subsequent Colours dialogue box, mark the following 16.7 Million Colours (24 bit)
setting. (do not click ok).

Now, click the Transparency tab. And from its dialogue box, ensure Alpha channel transparency and Exiting image or layer transparency are both marked - as illustrated below - then click OK.

Note
The Gamma, Format and Download Times dialogue boxes are worth looking at; however, they have no bearing over the optimisation process.

After clicking OK, enter a name for your button into the subsequent Save Copy As dialogue box (in the File name box) - then click Save.

12/
Congratulations, your button has been saved, and it is ready to upload to your website in your usual manner.

Note
After you have saved your transparent Png, it will have a solid background - as demonstrated here.

However, once your Png has been uploaded, or it has been double-left-clicked (to display it), it will be transparent, and will resemble the following.

Final Note
Experiment with different custom-made navigation buttons; and find one that suits your website - in addition, your text can be any colour or font you prefer. Once you have learned the basics, you can experiment and create buttons that are individual to yourself.

Wendi E M Scarth. Top of Page - Home.



my_logoexample_website03