Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Navigation Bar

Navigation Bar


Step1: Learning how to create the Glass Effect.

I found this effect on www.depiction.net , the reason I used this effect is because it is a nice effect and very simple to recreate. You can click here to download the style and import it into Photoshop.

Ok, let us get started. Create a new image using the dimension  800 x 600. Set the background color to white. You can change the background depending on you web site color. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 1 create a rectangle using the dimensions below. Change the foreground color to #dcdcdc

image 2

With that, you should have the effect below.

image 3

Now click here to download the style, import it into Photoshop, and add the effect to the bar above. With the effect added, you should have what i have shown in the image below.

image 4

Step2: Creating the on/off button.

At this point, you should have the button above. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 5 create a small rectangle using the dimensions below. Change the foreground color to #FFFFFF, and place the smaller rectangle as shown in the image below.

image 6

image 7

We need to create the effect of the embedded button. Still on the same layer, click here to download the style and import it into Photoshop and add the effect to the small rectangle. You should have the effect I have below.

image 8

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 9 create a small rectangle using the dimensions below. Change the foreground color to #c5c5c5.

image 10

Your rectangle should look like the image below.

image 11

Right click on the small rounded rectangle and click Blending Options as shown below.

image 12

Now add the Blending Options setting below.

Drop Shadow

image 13

Inner Shadow

image 14

Gradient Overlay

image 15

Gradient Overlay (Gradient)

image 16

Click ok when you have added the setting.

With that, you should have the effect below.

image 17

Now position the button over the gradient you created previously to get the effect in the image below.

image 18

Step3: Creating the display screen

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 19 create a small rectangle using the dimensions below. Change the foreground color to #b1b1b1.

image 20

By using the setting above, create the rectangle below.

image 21

We need to add a gradient to the bar above. Right click on the layer you have just created and click Blending Options and add the setting below.

Gradient Overlay

image 22

Gradient Overlay (Gradient)

image 23

Click ok when you have added the setting.

With that, you should have the effect below.

image 24

Step4: Creating the Blue Screen.

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Using the Rounded Rectangle Tool image 25 create a rectangle using the dimensions below. Change the foreground color to #7dcafc. This rectangle has to be smaller than the previous rectangle to give it the effect that it is imbedded into the display.  

image 26

At this point, your image should look like the image below. Place that rectangle above the previous rectangle.

image 27

At this point, you should have the effect below.

image 28

Right click on the blue screen layer, click Blending Options and add the setting below.

Inner Glow

image 29

Click ok when you have added the setting.

Click on the layer and change the Opacity to 75 % as shown below.

image 30

With that, your image should look like the screenshot below.

image 31

Step5: Power button logo.

I created this button using custom shapes as shown below.

image 32

Create a new layer; change the foreground color to 688cab. Click on the circular shape. Draw the circle while holding the shift key to get a perfect circle. Using the Rectangular Marquee Tool image 33 delete the top to get the effect below.

image 34

Using the Pencil tool at 1 pixel (px) with the same color (688cab). Draw a line on a new layer in the middle of the circle to get the effect below.

image 35

Step6: Adding Text.

When you are adding the text, make sure you change the Opacity on the text layer. Doing this will blend the text with the background, giving the effect off the text behind glass.

image 36

Finished:

Well that is it, hope it came out to what you expected.

Navigation Bar Tutorial: Final Result (Click to enlarge)
Click to enlarge

Click to enlarge
Click to enlarge


Author's URL: Mark
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Navigation Bar"

Only registered users can write comment

No comments yet...