

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.

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.

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.

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].

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.
| Hold CTRL, click on tab’s Layer Thumbnail to get the entire tab image highlighted. | |
| With the tab image still highlighted, select Rectangular Marquee Tool, hold ALT and draw a rectangular of region we want to remove. | |
| 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. | |
| 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. |

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
Bevel and Emboss
Gradiant Overlay
|
|

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.
|
Posted by hongkiat in Photoshop Tutorial, at 01.24.07 |
![]() |
Related Contents |
Sponsors |








Comments
Xiffy's Linkdump
January 27th, 2007 at 8:56 am
Web 2.0 tabs with Photoshop…
…
comment
The WP Themes » Blog Archive » Design Web 2.0
January 27th, 2007 at 6:47 pm
[...] Web 2.0 tab with Photoshop - a good and detailed how-to make a web 2.0-look tab. [...]
comment
January 27th, 2007 at 8:47 pm
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me.
comment
January 27th, 2007 at 8:48 pm
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me..
comment
January 28th, 2007 at 5:08 pm
Very nice tutorial!
I absolutely love the method of smoothing out the corners. An easier way i find is to just draw two boxes than drawing with the lasso :)
Thanks!
comment
January 31st, 2007 at 4:55 am
this doesn’t work.
i feel like you’ve left out details, as if you assume too much of the person using the tutorial.
comment
January 31st, 2007 at 6:45 am
Think you
comment
January 31st, 2007 at 8:21 am
just getting back into photoshop after a year. was really efficiant in it but forgot everything. Good tutorial but took me a while to cop on cause i’m out of practice. (just a little bit more detail) plz.
comment
January 31st, 2007 at 11:21 am
Nice tut m8… i might use it one day.
comment
Max Design - standards based web design, development and training » Some links for light reading (1/2/07)
February 1st, 2007 at 4:11 am
[...] Design a Web 2.0 tab with Photoshop [...]
comment
February 1st, 2007 at 1:52 pm
very nice tutorial .
this is that i’ve been searching for a long time .
can’t believe that i can do the tab one .
thank u guys
comment
February 2nd, 2007 at 4:42 pm
Why are you complaining about details missing? (Yeah, you know who you are!) There isn’t a single detail missing in this tutorial! If you can’t follow instructions as easy as those given, maybe you shouldn’t be using Photoshop yet.
Good tutorial which shows how you can do great stuph with little effort, by the way.
comment
February 3rd, 2007 at 11:13 am
I thought this was an excellent tutorial.. I made it through with no difficulty. I would LOVE to find out how to animate the tabs in flash… you know, when you are clicking from one tab to another. Anyone have any ideas or could someone point me to a tutorial on such?
Thanks,
b`rad
comment
February 3rd, 2007 at 3:07 pm
Nice tutorial….
comment
Technikwürze » Technikwürze 58 - Versionsverwaltung
February 6th, 2007 at 6:18 am
[...] Design a Web 2.0 tab with Photoshop Podcast anhören Jetzt hören: [...]
comment
February 8th, 2007 at 6:22 am
THIS IS TOOOOO HARD!
I am a novice. Please Please can anyone explain this for a thicko like me? I have hardly used Photoshop before, but I REALLY need to do these tabs….. Please?
comment
February 10th, 2007 at 8:42 am
Did not understand how the background changed colors. After I CTRL Thumbnail, and went to layers, and then paintbucketed it black, everything was just black… plus I had a “Ghost Shade” around the image… any suggestions?
Also, I’m a newb at cropping, so I really didn’t understand how to extend right border.
comment
pixelblog - Sebastian Döll » Web Updates (02/10/2007)
February 10th, 2007 at 4:40 pm
[...] - A lot of free css based templates - Wordpress Feed Styler plugin - A nice history of Apple.com - tingelets are new hot stuff for webdevelopers - Design a web 2.0 tab with Photoshop - Pixelstamps for your mails - Free Fonts from Fontshop - Design a modern blog layout [...]
comment
holdandmodify.com » Blog Archive » links for 2007-02-07
February 11th, 2007 at 8:36 pm
[...] Design a Web 2.0 tab with Photoshop (tags: photoshop tutorial web2.0 design webDesign tabs graphics) [...]
comment
February 13th, 2007 at 1:27 pm
i like that
good
comment
February 18th, 2007 at 11:52 pm
In tutorial file the alpha1 layer is gone. I supose it has something to do with background color change; it was deleted at one step or something. Please explain how did you change the background color. Tanks
comment
February 19th, 2007 at 12:08 am
Ok to those that had a problem with the background color change. The key is to make a new layer at the begging and not working directly on background layer. I also did this and it didn’t work.
“switch back to Layers Tab and fill the selected area with black [#000000]” - here is the problem; if you have only the background layer this step does nothing. After this step i suppose u can delete the alpha channel.
comment
February 19th, 2007 at 1:28 am
Alright ady, to make you understand the Photoshop Channel (background change issue) better, here’s what you can do.
1.Create a new file with background color white [#ffffff].
2.Go to Channel Tab, then “Create new Channel”. This is a small button on the bottom right. Once you created this, your background will turned black.
3.Then my tutorials continues….
4.There is two ways to awap back to Layers scene, or the “White-background-you-just-created”. One - in the Channels Tab, click on RGB Layer; Two - double click on the Layer in layers tab.
You are right, i’ve missed telling you guys to create a layer before performing this. Thanks for highligting. I’m putting it in. I hope this helps. If you still cannot get it to work, you can email me your IM contacts, I can help you over IM chat.
comment
February 19th, 2007 at 5:39 am
This is wonderful technique for rounding corners … Thx for sharing this
comment
February 19th, 2007 at 9:09 am
really cool. thanks
comment
Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
February 19th, 2007 at 3:53 pm
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
February 19th, 2007 at 3:54 pm
nice tutorial
comment
Whitesquid
February 20th, 2007 at 2:45 am
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
Photoshop-Weblog » Blog Archiv » Design a Web 2.0 tab
February 20th, 2007 at 10:36 pm
[...] sieht das Menü, das in dem Tutorial Design a Web 2.0 tab gestaltet wird, unbedingt nach Web 2.0 aus. Egal, ich finde es ganz schick. Sicher eine gute [...]
comment
PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials
February 21st, 2007 at 12:05 am
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
February 21st, 2007 at 8:03 pm
thanks…
comment
BlogZwo | Blog Archive » Web 2.0 Webdesign Tutorials
February 22nd, 2007 at 5:26 pm
[...] und Web 2.0 Tab Filed under Grafik Leave a [...]
comment
February 22nd, 2007 at 11:21 pm
Grande sito!!
comment
February 24th, 2007 at 1:27 am
luogo fine, sapete..
comment
design 2.0 at comatags
February 24th, 2007 at 4:58 pm
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
February 25th, 2007 at 4:54 am
Desidero appena dire che e un luogo ben cotto
comment
Photoshop and Web 2.0 ~ Prateek’s Blog
March 2nd, 2007 at 1:14 pm
[...] Web 2.0 Tabs [...]
comment
March 3rd, 2007 at 3:25 am
Hi, verrrrrry nice tutorial, but i´m stuck in this part (maybe can you help me pleaaaase?) “Crop rounded edges of each side” please help me, how do i crop the edges of each side.. (yes i´ve played with the crop tool a lot.. but obiously i´m missing a lot..)
Thanks..
comment
March 4th, 2007 at 3:29 pm
Hi DS, if you see this image:
http://i3.photobucket.com/albums/y76/hongkiat/tab04.gif
All edges has rounded corners. My intention here is to delete away the bottom left and bottom right edges. Should have use “cut” instead of “crop”. I’ll change and update the tutorial. :)
comment
March 5th, 2007 at 10:08 pm
What a nice tutorial! Thanks for your post.
——————————-
Nenest Web Application Framework!
http://www.nenest.com
comment
Web 2.0 Tutorials Round-Up | Smashing Magazine
March 10th, 2007 at 12:44 am
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
Middle School Hacks » test entry 03/11/2007
March 12th, 2007 at 8:41 am
[...] Design a Web 2.0 tab with Photoshop [...]
comment
March 15th, 2007 at 6:38 am
Excellent. will learn it now. was looking similar tutorials.
comment
March 15th, 2007 at 9:06 am
nice tutorial bro,
straight forward and nice result.
comment
March 16th, 2007 at 10:53 am
the link to the psd doesn’t work? :(
comment
March 18th, 2007 at 1:10 am
Hehe thank you hongkiat, but it seems that the image have exceed the bandwith.. :( , i hope you don´t mind, but i have another question.. how do you (after the crop/cut step ) how do you extend the BAR below the tab…?? (yep the one we just cut..) Thanks and happy drawings….
comment
March 18th, 2007 at 1:19 am
DS: The images should be fine now. You might need to CTRL-F5 (refresh) your browser, or try clear cache and refresh.
About the extending, you can try this. Grab one of the edge with Rectangular Marquee Tool, then swap to Move Tool. Hold SHIFT ALT, keep hitting the left arrow (copying what you’ve selected towards left). Hope this helps.
comment
March 18th, 2007 at 6:38 am
Great effect. I was able to get the black portion of the effect(Home), but decided to stop when it came to the other tabs(subtitles 1 and 2).. I got as far as I did purely because I have other tutorials well before this one… I have to agree with another poster, you simply leave things out as you go along in your description making the assumption the viewer knows as much or close to as much as you do - that doesn’t define a ‘tutorial’, please make your descriptions more.. well, descriptive.
B’rad, as far as clicking on the tabs, wouldn’t the designs be duplicated for each page? I don’t see why Flash should be incorporated into this.
comment
MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları
March 21st, 2007 at 3:56 am
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
Photoshop ile Web2.0 Menü « 1 “FiKiR” Lâzım
March 24th, 2007 at 4:36 am
[...] Burada web2.0 terimi ile birlikte karşılaştığımız görsel menülerden birinin photoshop ile nasıl hazırlandığı ile ilgili güzel bir makale yer almakta. [...]
comment
viagra
March 25th, 2007 at 9:25 pm
viagra…
bie afuig…
comment
March 26th, 2007 at 7:14 am
Hehehehe FINALLY hehehe, thank you thank you thank you thank you hongkiat, i hope you can give me your opinion…here´s my result…
http://tinyurl.com/37xq5r
comment
March 26th, 2007 at 8:07 am
By the way, made it from scratch? (i relly don´t know the word.. zero?), without using the psd.. hehehe :P
comment
March 26th, 2007 at 8:26 am
DS:Not bad :)
comment
March 26th, 2007 at 11:12 pm
Hmmmmmmmmm…..ñ_ñ
comment
March 29th, 2007 at 9:04 pm
hmmm very nice, i will try it on my website at http://www.designersyard.com
comment
March 30th, 2007 at 6:53 am
I thought the tutorial was great! Yes, it seemed at first that there were a few steps missing, but I found that it was my error, not the tutorial’s. There ARE things assumed, and yes, this would not be for someone first getting into PhotoShop.
I LOVED the technique for rounding corners, using channels! Very kewl. I have made it work several times. Now off to do it with different colors and shpaes!
Thanks so much! WCW
comment
April 2nd, 2007 at 2:07 am
Wow great tutorials :D
cheers, saved me sooo much time and money
comment
April 2nd, 2007 at 2:10 am
will try it on my website. Free Stuff http://www.MyFreeStuff.co.uk
comment
April 5th, 2007 at 1:00 am
WHY WHEN U MADE THE SELECTION WITH POLIGON LASSO TOOL AND FILL IT , THERE IS A GOSTY SHADOW ? ? ? I DONT KNOW WHAT IS GOIN ON BUT WHEN I FILL ROUNDED SELECTION IT FADE
PLZ HELP
comment
April 9th, 2007 at 11:06 pm
Very nice! :)
comment
April 22nd, 2007 at 2:03 am
nice tutorial, thanks…
comment
Themes Central - free themes for Windows Vista, XP, WordPress and many more. » Web 2.0 objects: glossy, badges, tabs.
April 22nd, 2007 at 2:30 am
[...] Design a Web 2.0 tab with Photoshop [...]
comment
68 Web 2.0 design tutorials » A blog you can use!
April 22nd, 2007 at 7:44 am
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
April 22nd, 2007 at 8:25 am
I think you need to add a tutorial about adding this final result to web layout.. I really newbie about it..for all..this is really rockin tutorial
comment
April 27th, 2007 at 1:56 pm
Great tutorial it’s great when people of skill share it with others thanks.
I have tried apply it to a dynamic menu and had some trouble making it look good but ill get there l hope
comment
Blog des Internetprofessor » Blog Archiv » Copyright Modelle vor dem “aus” ?
May 9th, 2007 at 3:23 am
[...] T [...]
comment
May 9th, 2007 at 8:56 am
Very cool. Thank you.
comment
May 14th, 2007 at 2:49 pm
Excellent tutorial
comment
May 17th, 2007 at 10:12 pm
Very lovely, thanks!
comment
May 20th, 2007 at 11:01 am
Amazing Tut ! 2 new tchniques i’ve learned :) .
comment
tadalafil
May 25th, 2007 at 6:03 pm
tadalafil…
oabaxuzb arax…
comment
ultram
May 25th, 2007 at 8:15 pm
ultram…
utuwaq whietee…
comment
Web 2.0 Tutorials by Tekjuice.com
May 30th, 2007 at 11:07 am
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
May 31st, 2007 at 6:56 am
iiiiiiiiiiii like it!
Hard to find tutorials with results of this standard.
So much rubbish out there on the web.
comment
June 1st, 2007 at 7:53 pm
Thanks for helpful information you catch up us with your instructional explenation.
What people do is more important that what they say…
Best regards
comment
Conception Web » Blog Archive » Web 2.0. Design
June 3rd, 2007 at 7:27 pm
[...] 47. Design a Web 2.0 tab with Photoshop [...]
comment
June 9th, 2007 at 2:15 pm
this is a very nice and good looking tutorial
although i took some time to understand but then i am new to photoshop
comment
June 14th, 2007 at 3:29 am
Really excellent tutorial…
comment
June 19th, 2007 at 12:32 am
Very lovely, thaaaaaanks!
comment
June 19th, 2007 at 10:48 am
Actually, that’s pretty useful graphics work, thanks! But I don’t agree with professionals using web2.0 as a real term. :)
comment
June 27th, 2007 at 12:14 am
Nice tutorial, and it works almost as well with The Gimp instead of Photoshop.
comment
Tutoriales para el diseño orientado al 2.0 | Kabytes
July 4th, 2007 at 1:21 am
[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente, resultado: [...]
comment
Tutoriales para el diseño orientado al 2.0 « Cosas sencillas
July 4th, 2007 at 3:11 pm
[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente. [...]
comment
¿Como diseñar al estilo web 2.0? «
July 5th, 2007 at 12:19 am
[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente. [...]
comment
franklin dictionary
July 6th, 2007 at 2:24 pm
franklin dictionary…
thanks, keep up the good work……
comment
July 7th, 2007 at 11:01 am
When working for the web, never rely on raster shapes…this tutorial has some good techniques, but I personally think it would be better if you made the tut with vector shapes, because they(the shapes) can be changed easily. You could change the entire color scheme with a single click or two.
Keep up the good work
comment
July 19th, 2007 at 3:07 am
Nice tutorial. Worked great
comment
July 24th, 2007 at 11:08 pm
Hello, nice site look this:
Thanks.
End ^) See you
comment
Web2 tool » Web2.0 tutorial grafica
July 28th, 2007 at 4:11 am
[...] Design a Web 2.0 tab with Photoshop [...]
comment
July 28th, 2007 at 9:05 am
“Why are you complaining about details missing? (Yeah, you know who you are!) There isn’t a single detail missing in this tutorial! If you can’t follow instructions as easy as those given, maybe you shouldn’t be using Photoshop yet.
Good tutorial which shows how you can do great stuph with little effort, by the way.”
Maybe you shouldn’t try English yet? stuff doesn’t have ph at the the end…
comment
August 4th, 2007 at 5:26 pm
And includes a wealth of information.
comment
Web 2.0 objects: glossy, badges, tabs.
September 1st, 2007 at 7:21 am
[...] Design a Web 2.0 tab with Photoshop [...]
comment
September 13th, 2007 at 6:57 pm
Thanks. Web 2.0 Photoshop styles: http://www.bekircem.com/web-20-layer-styles/
very good tabs..
comment
September 21st, 2007 at 11:16 pm
Great Great tutorial!!! Any chance to see another tutorial explaining how to make this tabs with CSS????
comment
Design a Web 2.0 tab with Photoshop - Ayiva
September 25th, 2007 at 9:45 pm
[...] 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 [...]
comment
Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri
September 28th, 2007 at 10:03 pm
[...] menü hazırlama, burası, burası, burası ve burası [...]
comment
October 5th, 2007 at 10:20 pm
Great tutorial !
comment
October 12th, 2007 at 2:12 am
Really useful tutorial. Keep on!!!
comment
Recopilación variada de recursos Web | BetaElite
October 15th, 2007 at 1:37 pm
[...] Web 2.0 tab with Photoshop [...]
comment
October 18th, 2007 at 12:38 pm
I haven’t tried this myself but forwarded this to a graphics designer friend. He was hooked at it and now he’s trying to do some upgrades like animating the tabs. I might as well try this myself but I doubt my PS skills.
comment
October 25th, 2007 at 12:15 am
Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)
comment
October 27th, 2007 at 12:03 am
Thanks, I’ve been looking all over for this tutorial.
mark
comment
Web 2.0 Tutorials Round-Up - Article Save
November 13th, 2007 at 4:51 am
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
:: gclubstudio :: » Blog Archive » Tutorial Web 2.0
November 14th, 2007 at 12:02 pm
[...] Design a Web 2.0 tab with Photoshop [...]
comment
December 4th, 2007 at 12:52 am
Great tutorial. Really clear and concise with a stunning and simple result. Really appreciate this one!
comment
December 21st, 2007 at 5:32 am
Just Wonderful.
comment
Ayiva » Blog Archive » Web 2.0 Tutorials Round-Up
January 8th, 2008 at 10:07 pm
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
January 9th, 2008 at 10:41 pm
Great tutorial! Any help in getting accomplishing the development of this in CSS and HTML? Any help would be greatly appreciated! Thanks!
comment
Web 2.0 Tutorials | Pxdev.com
January 29th, 2008 at 7:33 am
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
February 5th, 2008 at 3:01 pm
thanks for useful article
comment
February 5th, 2008 at 3:01 pm
good article, thanks
comment
Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up
February 16th, 2008 at 12:33 pm
[...] 48. Design a Web 2.0 tab with Photoshop [...]
comment
Design a Web 2.0 tab with Photoshop « Photoshop, Here, webdesign, link, resource, development, helpful, css « Sharebrain