Candy Tree

Web 2.0 Nav Bar and sticker

In this tutorial I will be showing you how to create a web 2.0 nav bar with a sticker to go along side with it.

Step 1.

Create a blank canvas 800 x 300px and fill the background with black (#ffffff).

Step 2.

Select the colour (#454545) and create a long rectangle approximately three quarters of the canvas using the the rectangle tool, make sure that the image is on a new layer with nothing on it. You should make it look similar to the image below.

Step 3.

Repeat Step 2. But this time instead of using a dark grey we will use something lighter (#7e7d7d) make sure again that it’s on a new layer. The new image should be the same size as the one in Step 2. and should be placed directly over the top of it.

Step 4.

Staying on the lighter gray layer we go to Blending Options (Layer>Layer Styles>Blending Options) use the same setting as we do below.

You should now have something that looks similar to this

Step 5.

Now we are going to make it a little bit smaller by using the transform tool (ctrl + T) when you transform the top so it’s smaller the dark gray layer will appear giving it a nice effect.

Step 6.

This step is optional, If you do not like the width of the nav bar you can select the top two layers at the same time and transform them so that they are a little thinner. I have done this to mine and this is what I got out of it.

Step 7.

Now we need to ad the text for the buttons and the dividers. I made the dividers with the line tool with the colour set to (#373737) I also lowered the opacity to 50%

Step 8.

For the text I used Myriad Pro font 12pt, the colour does not really matter but I used (#9e9d9d)

Alright, that’s the nav bar done. You might of noticed that I left some room on the left hand side. I have done that on purpose. Now I am going to show you how to create a sticker to put there. We will be working in the same document so I’ve put all of the Nav Bar layers into a folder so that they do not get mixed up.

Step 1.

Hide the folder with all of the layers related to the Nav Bar.

Step 2.

With the elliptical marquee tool make a circle in the center of the canvas, whilst making the circle hold down the Shift Button and it will become a perfect circle.

Step 3.

Fill the the selected area using the bucket tool with the colour (#cdcdcd) selected. Again make sure that you are filling the area on a layer where there is nothing else.

Step 4.

Now go to Blending Options (Layer>Layer Styles>Blending Options) and use the following settings.

Step 5.

Now we have to lift a edge of the circle to make it look like it is curling. Using the Polygonal lasso Tool with select the area, you should select an area similar to this.

Now Right Click in the selected area and select Layer Via Cut.

Step 6.

Now we use the transform tool (ctrl + T) to rotate the cut so that it looks like it has been curled.

Step 7.

Now we have to add blending options to the curled layer. (Layer>Layer Styles>Blending Options) Use the following settings.

Step 8.

Now you should have something like this

Step 9.

The final step is to show the Nav Bar layer and align them both.