|
|
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
Create, Optimise And Save A Rectangular Navigation Button - Intermediate Plus
(Saving Transparent Images As Transparent Gifs)
Written For Paint Shop Pro 7 8 9 X
XI And X2 Photo + (Ultimate) Students Should Follow X’s Instructions
|
|
|
|
 |
|
|
|
This tutorial demonstrates how to create, optimise and save a navigation button as a transparent Gif. Create An Oval Shaped Navigation Button And Save It As A Transparent Png
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 Png On-line Tutorial
1/
Open a New Image (Paint Shop Pro 8 9 X XI X2 + Raster)
Size 100 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.
Colour/Materials Palette
Set a Background Colour of your choice, this will be your button’s colour - I am choosing Solid Red.
Foreground Swatch (Styles/Stroke) - Null
Background Swatch (Styles/Fill) - Red, Textures both - Null.  
2/
Now, from the Tools Toolbar, activate your Preset Shape Tool.  
 |
And enter the following (Rounded Rectangle) settings into the Tool Options Palette or Ribbon.
Paint Shop Pro 7
Paint Shop Pro 8 9 X XI X2 +
3/
Press and hold your Keyboard’s Shift Key; then drag out (draw) a rectangular shape onto your transparent canvas. To reposition and reshape it; hover your cursor over the small square handles that are attached to its Vector Deformation Bounding Box, and enlarge, or reduce its size accordingly - remembering to leave room for the subsequent Drop Shadow.
Note
Pressing the Shift key as you draw your shape keeps its four sides equal.
  
4/
From the top menu, choose Layers then choose Convert to Raster Layer. The deformation box will be removed, and your Layers Palette will resemble the following.
  
5/ Add An Inner Bevel
Working on the navigation button’s layer; from top menu, choose Effects then choose 3D Effects then choose Inner Bevel. Enter the following settings into the subsequent dialogue box, or experiment - then click OK. (Alternatively, apply an Eyecandy 3 Inner Bevel
or an Eyecandy Impact Inner Bevel as I have).
 |
6/ Apply A Drop Shadow
From the top menu, choose Effects then choose 3D Effects and this time, choose Drop Shadow. Enter the following settings into the subsequent dialogue box, or experiment - then click OK.
 
7/
Now, introduce either a Solid Colour, Pattern or Gradient into the Background Colour Swatch - this will represent your text’s colour.
 
8/ 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.
 
9/ 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 +
To reposition your text - (whilst the selection marquee remains), left-click and drag it to a central position over the button - as illustrated below. Then from the top menu, choose Selections then choose Select None - or press Ctrl then D. This removes the Selection Marquee.
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.
Note
To reduce the 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
To save your navigation button with its Layers intact; (to edit at a later date), save 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 you are ready for the next step.
  
11/ Save Your Transparent Button As A Transparent Gif - Save And Optimise Images
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 mark the following Existing image or layer transparency setting. (Do not click ok).
Png Note
If you prefer, save your button as a transparent Png - as demonstrated in my tutorial here. 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.
Now, click the Partial Transparency tab, and enter the following settings into its dialogue box. (Do not click ok).
 |
Important
It is crucial that you click open the Blend Colour swatch - and click a colour that matches your website background the closest. For example; this tutorial page’s background colour is cream; and I have therefore selected a cream colour - this ensures any Drop Shadows remain sharp, and don’t bleed into your website’s colour - it also makes sure my navigation button blends with this page’s colour.
If your background colour is not solid - perhaps it is made up of more than one colour; choose a colour that matches the dominant colour of your website background the closest. You may need to experiment with different colours to find the best match. To set a colour from your website’s background colour; left-click the following Blend Colour Swatch, and from the subsequent Colour (Picker) dialogue box; select a solid colour that matches your website’s background the closest. (Click OK to the Colour dialogue box, but do not close the Gif Optimiser dialogue box).
Tip
Activate Paint Shop Pro’s Dropper Tool, and sample a colour from your website’s background, if necessary.
 |
Now, click open the Colours tab - and from the Colours dialogue box, set the following attributes - then click OK.
Important Optimisation Notes
For the best possible quality for your button, choose between Optimised Median Cut and Optimised Octree; experiment with both settings, and discover which one provides the best colour result. Take a look at the right-side Preview Pane - it previews your button, showing how it will appear after it has been saved. You will notice the button has been stroked with the cream colour of this web page; this means - after it has been saved, it will blend seamlessly with this tutorial’s background colour.
When you are happy with all of the settings mentioned above, click OK.
Note
The Format and Download tabs provide additional information regarding your button, and are unrelated to the button’s quality.
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.
 |
Final Note
Experiment with different navigation button colours, and find one that suits your website’s needs; remember, it can be any size, colour or shape, and it doesn’t have to be square; in addition, your text can be any colour or font you prefer. Once you have learned the basics, you can experiment and create navigation buttons that are individual to yourself.
Wendi E M Scarth. Top of Page - Home.
|
|
|
|
  
430+ Individual Paint Shop Pro 7 8 9 X XI X2 X3 Photo + (and Ultimate) Compatible PDF Tutorials,
551.36 MB. Plus 864 MB of Extras: Plugins, Picture Frames, Picture Tubes, Landscape Picture Tubes, Brushes, Fonts, Patterns, Textures, Preset Shapes, Masks and Selections . This is divided into 36 (Zipped) files The total size of the zipped downloads is:
one thousand, four hundred and fifteen Megabytes.
(Via An Instant Electronic)
Includes My Full Photoshop Elements Editor PDF Collection
Link Here To Read More
 
Link here to discover how you can easily reach your full potential by purchasing
430+ Paint Shop Pro 7 8 9 X XI X2 X3 Photo + (and Ultimate) PDF tutorials.
Your purchase includes all future Paint Shop Pro PDF tutorials and updates.
A comprehensive list of my 430+ Paint Shop Pro tutorials can be viewed here.
Students’ Feedback.
-----------------------------------------------
(900+ PDF Tutorials: 350+ Paint Shop Pro, 340+ Photoshop & 130+ Photoshop Elements)
(Via An Instant Electronic)
Link Here To Read More
---------------------------------------------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
