Advanced Website Navigation Buttons

In this tutorial you will learn how to make a set of website buttons like the one shown below.

Advanced Website Navigation Buttons

So let’s get started. Start by selecting a rectangle as long and wide as you want your navigation bar to be. Fill it with White (#FFFFFF).


Now go to your blending options and insert these settings.

Now that you have the blending options in it should look something like this:

Create a New Layer. Ctrl – Click the last layer beneath the one you just created. While making sure you have the new layer selected in the layers palette fill the selection black. Then resize the width so it is only a pixel or two smaller than the layer beneath it. You should now have something like this:

Go into your blending options and apply these settings to your layer.

Now you should have something like this:

Now that we have those two layers done, create a new layer. CTRL – Click the layer beneath your newly created layer. Now make sure you have your new layer selected in the layers palette. Fill the selection White. Now resize the width of the layer so it is slightly smaller than the layer beneath it. You should now have something like this:

Now go to your blending options and insert these settings:

Now that we have that done you should have something like this:

Now create a New Layer. Grab a circle brush. Set it to:

Size : 1 px
Hardness: 100%

With your 1 px hard brush set you foreground to the color: #3a3a3a

Now on the new layer click once at the top of your button. Go down to the bottom while holding CTRL click again. (This should create a line from where your first click was, however it might take some practice on getting it to be straight.)

Now again start at the top of your button 1 pixel away from the previous line. Using the color: #ACACAC

Click once at the top next to your previous pixel. (It has to be DIRECTLY next to your other line for this to work)

Now go to the bottom and CTRL- click right next to your previous line. Creating two lines, 1 dark and one light.

Now set the layers blending mode to Hard Light.

You should have something like this:

Now add your text to it and you have a nice set of buttons!

Advanced Website Navigation Buttons

Congratulations! You successfully learned how to create a nice pair of buttons for your website. I encourage you to use the techniques you use in this tut to try and modify these buttons making them your own.

Happy PSing!

Leave a comment