Advanced Search
Keywords

Create a Tabbed Web 2.0 Navigation with Photoshop

Do you love the look of glossy navigation tabs that stream across the top of many professional website template styles? Do you want your own web design or web template to have the same fresh feeling? In this tutorial we're going to create the web 2.0 navigation tabs to freshen up your own your website design. For this navigation tab, we are going to learn to use the channel option in photoshop, which is seldom used by designers when creating their website designs.

First, let’s start by creating a new page of 500X200 pixels with a white background. Then we start with the channel window, click on your channel window. If you can’t find it you can get it from Windows>Channels.

Now create a new channel name it as “ Alpha 1”.

channel Note: Once you create a new channel, your working area will turn black. Don’t over react when it happens.

Then draw a rectangle shape on the alpha 1 layer for the tab and then HOLD on to the shift key and draw another long rectangle for the bar of your tab just like below.

Tab

Note: When you hold on to shift you will notice there’s a little + icon beside your cursor.

Now fill the selection with white #ffffff and deselect it. You will notice that your alpha 1 layer will have the shape you just created.

Tab

channel

Still on the channel window and the alpha1 layer, click Filter>Blur>Gaussian Blur. Give a 6.0 px to it to create a smooth rounded corners of your tabs. Then to smoothen the tabs click Image>Adjustment>Levels.

Tab

Gaussian Blur

Note: Click to enlarge


Tab

Level

Note: Click to enlarge

Now its time to go back to your layer window, before that under your channel alpha1 layer, make a selection of the shape you have just created, click Select > Load Selection and go back to your layer window and create a new layer.

Tab

Layer

Filled the selection as the color you prefer for your navigation tab bar, here it was filled with dark red. Then move the tab bar towards the left and make the right side of the bar longer, to do so, make a selection and click Edit > Transform>Scale and drag it to the right. Just like below.

Tab

 

Now to have the 3D looks, add some highlight at the top of the tab. Create a new layer name it highlight, then HOLD on to the ALT key and click on the layer withi contain the navigation bar to make a selection . Then HOLD on to the ALT key and deselect the selection on the bar, so that we have the top bar selected only. Then cilck Select > Modify> Contract and give a 2px contract of the selection. Just like below.

Tab

 

After that fill the selection with white and deselect it. To make the highlight, we need to add the blending option to that layer. Double click the highlight layer and add Gradient Overlay, select the foreground color to transparent.

Tab

Gradient Overlay

Note: Click to enlarge

To make the highlight more blend in set the layer opacity to 90% and add another highlight at the bottom of the bar by creating a new layer and draw a long rectangle then fill it t with white and set the layer opacity to 20%.

Tab

Layer Opcaity

Now that the first tab is ready, create another few more other tabs for other links. Select the first layer which contain the tab bar (without the highlights) and duplicate, click Layer > Duplicate Layer. And move it after the main tab, then to have it a different color and effect, we add in some blending option to the layer. Again double click the layer and add in Drop Shadow, Bevel & Emboss and Gradient Overlay. Continue with other tabs, as much as you needed for your navigation links.

Tab

Gradient Overlay

Note: Click to enlarge

Drop SHadow Bevel Gradient

Now to finish up the nice navigation bar, add in the text for your tabs. For the current tab the Georgia font type was being used, font size 34pt, color white and for the other tabs it is Georgia as well, font size 32pt with the tracking of -25pt and added blending option of Outer Glow.

Tab

Outer GLow

Note: Click to enlarge

Congratulations! You have completed your Web2.0 navigation tab and try to add it into your website design. Remember that you can use the color of your prefrence to match your web page design.

 
 
 
 
 
  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost