| |

Professional Navigation Button

Posted on June 19th, 2007
Written by admin and filed into the Web Graphics category.


In this Adobe Photoshop Tutorial you will learn how to create a Professional Navigation Button perfect for any sidebar, the final result can be seen below:

Professional Navigation Button

Start off by creating a canvas; (Ctrl + N) or go to File > New, after photoshop has loaded approximately 217×145 pixels. Make sure that you select ‘Transparent‘ from background contents. Leave the Resolution as 72 and don’t change the ‘bit value’ leave it as default. Mine is 8 bit; yours may vary.

size

Next select the paint bucket tool (paint bucket tool G), click on the top co lour box in the color chooser color chooser and select a medium Grey. I have chosen to use the color #505050. After choosing your preferred color click OK. Put the cursor (which should be displayed as the paint bucket) over the canvas and click. The canvas will now be filled with the color you have chosen. Your canvas should look something like the picture below. (without the Grey outline)

without the grey outline

Next, we are going to add a gradient. Go to Layer > Layer Styles > Gradient Overlay. To select the color that you want to use for the gradient, click on the rectangle box labeled ‘Gradient‘. A new window will open where you can change, edit, choose the gradient colors.

gradient chooser

To get a ‘transparent to color‘ gradient select the 2nd gradient preset which is always black to transparent. But if your foreground color is different then the color in this gradient will be transparent blended to the foreground color. Click OK.

Make sure the ‘Blend Mode‘ is set to Normal. Set the ‘Opacity‘ to 44%. If the gradient appears transparent on the left to black on the right. Make sure ‘Reverse‘ is ticked. If the transparent appears on the right then leave the ‘Reverse’ box unchecked.

Click OK. Your Canvas should look something like the one below:

result

Create a New Layer. (Ctrl + Shift + N). Next, select the Rectangle Tool (rectangle tool) select the color #d69b17 and draw a rectangle at the top of the canvas. Make sure the rectangle is a little wider than the width of the canvas. Your canvas should look something like this:

Now select the top layer. We are now going to add a ‘Inner Shadow‘ to the rectangle. Layer > Layer Style > Inner Shadow. Enter the settings below into the Inner Shadow tab.

Click OK. Yours should look something like mine below:

Next Select the Rectangular Selection tool (). Select half of the top rectangle and press Ctrl+U. This will bring up the ‘Hue/Saturation‘ window. Enter the settings below and then click OK.

(Click for Full View)

Your canvas should look like the one below.

We are nearly finished now. All you need to do now is to add the text and anything else you want. I have decided to add a laptop picture, text and a few lines. Here is what I ended up with.

I used it as a navigation button in one of my layouts. Messing around a bit with the colors can also make the outcome much better.

1825 Responses to “Professional Navigation Button”