{"id":286,"date":"2007-01-24T20:43:07","date_gmt":"2007-01-24T12:43:07","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/design-a-web-20-tab-with-photoshop\/"},"modified":"2025-04-12T21:06:00","modified_gmt":"2025-04-12T13:06:00","slug":"design-a-web-20-tab-with-photoshop","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/design-a-web-20-tab-with-photoshop\/","title":{"rendered":"Design a Web 2.0 tab with Photoshop"},"content":{"rendered":"

The follow guide below attempts to give you an idea how to design a nice sleek tab menu in Photoshop, Web 2.0 style.<\/p>\n

Step 1<\/h2>\n

\"photoshop<\/p>\n

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<\/strong> (Windows -> Channels), click Create new channel<\/strong> on bottom right.<\/p>\n

Step 2<\/h2>\n

\"Design<\/p>\n

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 <\/strong>with radius 6.0px.<\/p>\n

Step 3<\/h2>\n

\"Design<\/p>\n

CTRL-L<\/strong> to call up the Level Dialog and push the left and right arrow to meet the center arrow, like the image above. This will \u201csmooth\u201d your blur-ed shape up and give you a nice rounded corner shape.<\/p>\n

Step 4<\/h2>\n

\"Design<\/p>\n

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

Step 5<\/h2>\n

\"Design<\/p>\n

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.<\/p>\n\n\n\n\n\n
\u00a0<\/td>\nHold CTRL<\/strong>, click on tab\u2019s Layer Thumbnail<\/strong> to get the entire tab image highlighted.<\/td>\n<\/tr>\n
\u00a0<\/td>\nWith the tab image still highlighted, select Rectangular Marquee Tool<\/strong>, hold ALT<\/strong> and draw a rectangular of region we want to remove. <\/td>\n<\/tr>\n
\u00a0<\/td>\nYou should only see the top part selected. Select<\/strong> -> Modify<\/strong> -> Contract<\/strong>, Contract by 2px<\/strong> and you should get something like the image on the left.<\/td>\n<\/tr>\n
\u00a0<\/td>\nCreate a new layer, fill the highlighted region with white[#ffffff]. Right click, choose Blending Options<\/strong> then Gradiant Overlay<\/strong>. Replace the white[#ffffff] color stop with gray[#616161]. Your tab should look like the image on the left.<\/td>\n<\/tr>\n<\/table>\n

Step 6<\/h2>\n

\"Design<\/p>\n

Create a new layer; Select Rounded rectangular Tool<\/strong> (Radius 8px), draw a rectangular and put this layer behind the black tab layer. Right click and select Blending Options<\/strong> and insert the following settings.<\/p>\n

Drop Shadow<\/strong><\/p>\n