Design a Web 2.0 tab with Photoshop

The Follow guide below attempts to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.

 

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 switchChannels Tab(Windows-> channels), clickCreate new channelOn 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 shapeGaussian blurWith radius 6.0px.

Step 3

CTRL-LTo 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.

Step 4

In channels tab,Hold CTRL, Click onChannel thumbnailOf layer Alpha 1. The new shape will now be selected, switch backLayers Tab,Create new layerAnd fill the selected area with black [#000000].

Step 5

Remove rounded corners for BOT bottom left and bottom right, move it towards the left and position it as your strated above. Next we will focus on the black color tab.

	HoldCTRL, Click on tab'sLayer thumbnailTo get the entire tab image highlighted.
	With the tab image still highlighted, selectRectangular marquee tool, HoldALTAnd draw a rectangular of region we want to remove.
	You shoshould only see the top part selected.Select->Modify->Contract,Contract by 2pxAnd you shoshould get something like the image on the left.
	Create a new layer, fill the highlighted region with white [# ffffff]. Right click, chooseBlending optionsThenGradiant overlay. Replace the white [# ffffff] color stop with gray [#616161]. Your tab shocould look like the image on the left.

Step 6

Create a new layer; selectRounded rectangular Tool(Radius 8px), draw a rectangular and put this layer behind the black tab layer. Right click and selectBlending optionsAnd 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%

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.

Download tutorial