Free Tutorials » Adobe Photoshop » Stylish Navigation
Create a smooth stylish navigation for your web site.
Fill the background of your canvas in with the colour #0E3D4A Make a new layer set, [ Layer > new > layerset ], name it "Button1" Make a new layer. Grab the rectangular marquee tool, set it a fixed width of 186 pixels and a height of 24 pixels. Fill the selection in with the colour #1A4C5A
Make a new layer, zoom in and make a selection as shown below. Make sure you go 1 pixel within the widths and top of the first layer, as shown below:
Keep the selection, change your foreground and background colours to:
Using the gradient tool, drag from bottom to top of the selection to form a gradient like below. And then press CTRL+E to merge layers 1 and 2 together.
Bring up the blending options and set the outer-glow options and press OK:
Now make a new layer, grab the pencil tool, zoom in and draw a black and white line as shown below:
Set the blending mode to "overlay" and opacity to 38%
Make a selection like below (and a new layer) using the elliptical marquee tool:
Fill the selection in with white and then: Blending modes > gradient overlay:
Hold CTRL and click the current layer (in layers pallet) to make a selection of the circle. Make a new layer and then go to: Select > Modify > Contract [2pixels] to make a selection 2 pixels within the circle gradient layer. Fill the selection in with any colour, it doesn't matter. Bring up the blending options, gradient overlay and press OK.
Your button should now look like below:
Lets add a bit more shine (optional) to the button, zoom in, CTRL click on the current layer in the layers pallet to make a circular selection. Make a new layer, grab the elliptical marquee tool, hold ALT (with the selection still running) and drag across the selection to form a selection similar to below:
Fill the selection in with white, set the blending mode to overlay and opacity to 30%!
Now we need to duplicate the layer set. Click on the layer set heading "Button1" in the layers pallet, and click duplicate layer set.
Now move the new layer set below the first button, to do this click on the Button1Copy layer set heading and move it using the move tool.
Now duplicate the buttons until you have enough for your navigation!
Add your links and your finishing touches! Right click > save target as on the below image to download the PSD file.
- Date added:
- User rating:
- Total views:
- Total comments: