|
This tutorial demonstrates how to create navigation buttons from Photoshop Styles and third-party filters.
My lesson Here demonstrates how to create glossy buttons/badges from scratch.
My lesson Here demonstrates how to create transparent navigation buttons from scratch.
Undo and Navigation Steps
Two ways of undoing steps are from the top menu, Edit then Step Backwards. Alternatively, click a previous snapshot in the History Palette.
Navigate (zoom in and pan) your image using the Navigator Palette,
or the Zoom Tool. 
Activate The Hand Tool by tapping the Spacebar, keeping the Spacebar pressed, pan your image in the usual way. 
1/
Open a Transparent document, and set the following attributes.
2/
Then from the toolbar, activate either the Rectangular or Elliptical Marquee Tool.
And draw a navigation button shape.
3/
Now, to display your choice of Styles - from the right-side palette well, click the Styles tab. If you cannot see your Style swatches, from the top menu, choose Window and click a tick before Styles.
From the Styles palette, click the following black triangle to display your Styles
Library.
And click Buttons.  or Glass Buttons. 
Then click OK to replace your current swatches - or click Append to add them to your current swatches.
Note
Set a style you prefer, there are many third-party Styles available on-line.
4/
When you have set your Styles, from the toolbar, activate the Paint Bucket Tool.
Then left-click inside your transparent navigation button. Note: whatever Style is active will be applied to your navigation button.
Important
To fill your button using the Paint Bucket Tool, the selection must be applied to a Transparent background. If you flatten the layers - or fill the background, the Paint Bucket Tool will fill your button with the Foreground colour.
In the Styles palette, click each style (one-by-one) to see which produces the best effect.
Fill your button with different Styles to find a look you like.
The following examples are from my personal Styles collection.
 
 
5 / Requires Eyecandy 5 Impact - Install Plugins
An alternative way of creating navigation buttons is to first, create your transparent marquee.
6/
Then from the top menu, choose Filter then choose Eyecandy 5 Nature then choose either, Chrome or Glass.
Then try different Chrome and Glass settings to find a suitable button effect.
 
 
Experiment with (Eyecandy 5’s), Basic, Lighting, and Bevel Profile settings to make unique buttons.
7/
Now you have created your navigation button, apply a Drop Shadow, if you so wish. It is time to add type to the button, my lesson Here explains how. Remember to remove the marquee first - Select then Deselect - or press Ctrl then D.
Tip
To expand your canvas, (if necessary), from the top menu, choose Image then choose Canvas Size. Type in the amount of pixels you wish to expand your canvas by, then click OK.
8/ Saving your navigation buttons
Depending on your requirements, there are different ways of saving buttons. One way is to fill your button’s transparent background with the pattern of your website background - or a colour that matches it as close as possible. For example, for my button to appear seamless on this page, I would fill the button’s background with the (canvas) background pattern used for this tutorial. To do this, open your pattern onto Photoshop’s workspace, then from the top menu, choose Edit then choose Define Pattern. Enter a name for your pattern, then click OK. Link Here to permanently save your pattern.
When your button is complete, you are ready for the next step.
From the top menu, choose Layer then New Fill Layer then Pattern, now fill your image with the pattern of your website’s background (Tutorial Here), then drag the pattern layer to the bottom of the Layers palette, then Flatten the layers, Layer then Flatten Image. Your button is complete, and ready to save.
 
To save your button as a Jpeg, link to my lesson Here.
To save your button with a transparent background, do not fill it with a pattern,
your button should resemble the following. 
Now, crop out the wasted transparent edges, then save your button as a transparent
Gif, as described in my lesson Here.
Experiment with different styles of navigation buttons, remembering to keep them smaller than my examples.
Wendi E M Scarth. Top of Page - Home.
|
|
