Designing with Web 2.0 Tabs using Photoshop

Web 2.0 Tabs Design.

I love designing with tabs. They are structural, nearly always aligned, easy to navigate, and even easier to implement. So here goes another design tutorial post.

In this tutorial i am going to show you how to design Web 2.0 tabs  using photoshop.

Step 1
Create a new canvas with white[#ffffff] background at any size you like, preferably rectangular; they are more suitable to draw tabs. Then switch to Channels Tab (Windows -> Channels), click Create new channel on bottom right.

Create new channel on bottom right.

Step 2
On the channel layer selected, draw similar shape with Polygonal Lasso tool. Fill it up with white color[#ffffff]; unselect the Polygonal region (select any Marquee tool and hit the screen one); give the shape Gaussian Blur with radius 6.0px.

Gaussian Blur with radius 6.0px.

Step 3
CTRL-L to call up the Level Dialog and push the left and right arrow to meet the center arrow, like the image above. This will “smooth” your blur-ed shape up and give you a nice rounded corner shape.

Blur-ed shape up and rounded corner shape.

Step 4
In Channels Tab, Hold CTRL, click on Channel Thumbnail of layer Alpha 1. The new shape will now be selected, switch back to Layers Tab, Create New Layer and fill the selected area with black [#000000].

New Layer and fill the selected area with black.

Step 5
Remove rounded corners for bot bottom left and bottom right, move it towards the left and position it as illustrated above. Next we will focus on the black color Tab.

Remove rounded corners for bot bottom left and bottom right.

Hold CTRL, click on tab’s Layer Thumbnail to get the entire tab image highlighted.

Layer Thumbnail.

With the tab image still highlighted, select Rectangular Marquee Tool, hold ALT and draw a rectangular of region we want to remove.

Rectangular Marquee Tool.

You should only see the top part selected. Select -> Modify -> Contract, Contract by 2px and you should get something like the image on the left.

Contract by 2px.

Create a new layer, fill the highlighted region with white[#ffffff]. Right click, choose Blending Options then Gradiant Overlay. Replace the white[#ffffff] color stop with gray[#616161]. Your tab should look like the image on the left.

Gradiant Overlay.

Step 6
Create a new layer; Select Rounded rectangular Tool (Radius 8px), draw a rectangular and put this layer behind the black tab layer. Right click and select Blending Options and insert the following settings.

Drop Shadow
* Opacity: 31%
* Distance: 0px
* Spread: 0%
* Size: 2px

Bevel and Emboss
* Depth: 100%
* Size: 0px
* Soften: 0px

Gradiant Overlay
* Here are the Color stops settings.
* Color: #aaaaaa, Location: 0%
* Color: #ffffff, Location 100%

After apply Blending Options.

Step 7
Put in some text to see the overall web 2.0 look. I’m using font Lucida Fax, font-size 32pt and 25pt. And your tab is done! Feel free to play around with the Tab’s colors combination.

After putting some text.

The final Web 2.0 Tabs:

Final Web 2.0 Tabs.

Any design and graphics help please visit Clippingimages.com.

-Credits: Hongkiat.com