
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 switch to Channels Tab (Windows -> Channels), click 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.
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.
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].
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.
| 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. |
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%
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.
Related Contents |
Sponsors |
|
Posted by hongkiat in Photoshop Tutorials , at 01.24.07 |
|























Comments
Sapan January 27th, 2007
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me.
ReplySapan January 27th, 2007
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me..
ReplyAr3s January 28th, 2007
Very nice tutorial!
ReplyI 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!
annoyed January 31st, 2007
this doesn’t work.
i feel like you’ve left out details, as if you assume too much of the person using the tutorial.
Replyreem January 31st, 2007
Think you
Replycraig January 31st, 2007
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.
Replyromeo January 31st, 2007
Nice tut m8… i might use it one day.
Replydonceh February 1st, 2007
very nice tutorial .
Replythis is that i’ve been searching for a long time .
can’t believe that i can do the tab one .
thank u guys
dbm February 2nd, 2007
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.
Replyb`rad February 3rd, 2007
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
Replytechconet February 3rd, 2007
Nice tutorial….
ReplyRobert Craig February 8th, 2007
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?
ReplyRyan Szablewski February 10th, 2007
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.
Replyparas February 13th, 2007
i like that
Replygood
ady February 18th, 2007
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
Replyady February 19th, 2007
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.
Reply“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.
hongkiat February 19th, 2007
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.
ReplySharingan February 19th, 2007
This is wonderful technique for rounding corners … Thx for sharing this
Replyblackj February 19th, 2007
really cool. thanks
Replystylin February 19th, 2007
nice tutorial
ReplySvT February 21st, 2007
thanks…
Replypoesia February 22nd, 2007
Grande sito!!
Replysuperman February 24th, 2007
luogo fine, sapete..
Replynata February 25th, 2007
Desidero appena dire che e un luogo ben cotto
ReplyDS March 3rd, 2007
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..
Replyhongkiat March 4th, 2007
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. :)
ReplyTony Y. March 5th, 2007
What a nice tutorial! Thanks for your post.
——————————-
ReplyNenest Web Application Framework!
http://www.nenest.com
im March 15th, 2007
Excellent. will learn it now. was looking similar tutorials.
ReplyGuy March 15th, 2007
nice tutorial bro,
Replystraight forward and nice result.
Roberto March 16th, 2007
the link to the psd doesn’t work? :(
ReplyDS March 18th, 2007
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….
Replyhongkiat March 18th, 2007
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.
ReplyPatrick March 18th, 2007
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.
ReplyDS March 26th, 2007
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
ReplyDS March 26th, 2007
By the way, made it from scratch? (i relly don´t know the word.. zero?), without using the psd.. hehehe :P
Replyhongkiat March 26th, 2007
DS:Not bad :)
ReplyDS March 26th, 2007
Hmmmmmmmmm…..ñ_ñ
Replyklein March 29th, 2007
hmmm very nice, i will try it on my website at http://www.designersyard.com
ReplyWCW March 30th, 2007
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
Replymax April 2nd, 2007
Wow great tutorials :D
cheers, saved me sooo much time and money
Replymax April 2nd, 2007
will try it on my website. Free Stuff http://www.MyFreeStuff.co.uk
Replygbl DWDWD April 5th, 2007
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
ReplykerberoS April 9th, 2007
Very nice! :)
Replyevren April 22nd, 2007
nice tutorial, thanks…
ReplySasha cute April 22nd, 2007
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
ReplyMichael Cindric April 27th, 2007
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
ReplySam Zaydel May 9th, 2007
Very cool. Thank you.
Replykrish May 14th, 2007
Excellent tutorial
ReplyLacey May 17th, 2007
Very lovely, thanks!
ReplySreejith May 20th, 2007
Amazing Tut ! 2 new tchniques i’ve learned :) .
ReplyQuintin May 31st, 2007
iiiiiiiiiiii like it!
Hard to find tutorials with results of this standard.
ReplySo much rubbish out there on the web.
Izmir Tasarim June 1st, 2007
Thanks for helpful information you catch up us with your instructional explenation.
What people do is more important that what they say…
Best regards
ReplyAmitav Roy June 9th, 2007
this is a very nice and good looking tutorial
Replyalthough i took some time to understand but then i am new to photoshop
Shaon June 14th, 2007
Really excellent tutorial…
Replyqyasi June 19th, 2007
Very lovely, thaaaaaanks!
ReplyAlek - Stylish Web Design June 19th, 2007
Actually, that’s pretty useful graphics work, thanks! But I don’t agree with professionals using web2.0 as a real term. :)
ReplyStef June 27th, 2007
Nice tutorial, and it works almost as well with The Gimp instead of Photoshop.
ReplyZhille July 7th, 2007
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
ReplyPuggs July 19th, 2007
Nice tutorial. Worked great
ReplySaeko July 24th, 2007
Hello, nice site look this:
Thanks.
End ^) See you
ReplyMatt July 28th, 2007
“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…
Replybest price viagra August 4th, 2007
And includes a wealth of information.
ReplyBekirJem September 13th, 2007
Thanks. Web 2.0 Photoshop styles: http://www.bekircem.com/web-20-layer-styles/
very good tabs..
Replywasko74 September 21st, 2007
Great Great tutorial!!! Any chance to see another tutorial explaining how to make this tabs with CSS????
Replyfxencore October 5th, 2007
Great tutorial !
ReplyHaladdin October 12th, 2007
Really useful tutorial. Keep on!!!
Replyportrait artist October 18th, 2007
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.
ReplyKurye October 25th, 2007
Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)
ReplyMark Lindberg October 27th, 2007
Thanks, I’ve been looking all over for this tutorial.
Replymark
Zellah December 4th, 2007
Great tutorial. Really clear and concise with a stunning and simple result. Really appreciate this one!
ReplyAenugu December 21st, 2007
Just Wonderful.
ReplyJ January 9th, 2008
Great tutorial! Any help in getting accomplishing the development of this in CSS and HTML? Any help would be greatly appreciated! Thanks!
Replyweb tasarımı February 5th, 2008
thanks for useful article
ReplyGoogle Reklam February 5th, 2008
good article, thanks
ReplySRINI MANCHIKANTI March 4th, 2008
This is the best tutorial I have ever seen on Photoshop. Thank you very much for the effort and providing the details with the screen shots. Appreciate it.
Replymenace March 4th, 2008
To everyone complaining that he left steps out or to better explain since it’s a “Tutorial”, please stfu. The guy made an awesome tutorial for no profit at all just to share his skills and the lot of you want more from him. If you’ve never worked with channels before I suggest you leave this one alone. It’s not for you and I dont see why the author should make it even more simplier then it already is by telling you exactly what coordinates you should pin point your mouse at.
To the author. Awesome job, was looking at a bunch of different tutorials for tabs and your’s is the nicest/cleanest.
To Zhille, I use raster for everything web based. If you like vector so much go use Illistrator.
To Matt, no one likes a grammar nazi. It’s the inet, stop trying to make yourself look better. We get it.
ReplyPhil March 8th, 2008
Thanks. Once the main home tab is created I opted to create individual secondary tabs. The advantage to doing that is to enable one to then set up pairs of link tabs to create different colored mouse over effects for the secondary tabs in Flash or using Javascript.
Did you get that B’rad?
ReplyPDX Guy March 14th, 2008
Sick of web 2. Found some good sites but no time to hit them all.
ReplyCd Çoğaltım March 16th, 2008
thanks your usefull article
ReplyLemps March 22nd, 2008
Hello,
I’m having problems with filling the Alpha 1 selection with the white color.
I make a new channel named Alpha 1, make the selection and when I try to fill it with color, nothing happens, it stays black. I’m using PS CS3. Can anyone help me?
Thank You.
ReplyLemps March 22nd, 2008
Never mind, I just got it working, sorry.
ReplyAnthony G April 8th, 2008
I used this on NsaneStickers.com and everyone should check it out! It looks amazing! If you need help with the css, let me know… It is very simple and looks very clean!
Replyhongkiat April 8th, 2008
Anthony: It looks great! But there’s a little alignment problem with the text. I’m seeing in with Firefox :-)
ReplyMary April 17th, 2008
it must be the best photoshop tutorial i ever followed! thumbs up for you
Replysosyal bilgiler April 24th, 2008
Looks very useful. Thanks for the tips. I have added this website to my bookmarks.
ReplySusan May 1st, 2008
Worked like a charm! Someone above suggested drawing two boxes. I prefer to work with the pen tool. Lots of ways to skin a cat, I guess. Thank you for your tutorial!
ReplyTasarim May 5th, 2008
Good Good thanks… :)
ReplySong May 24th, 2008
Great tutorial.
I love what you do.
TX
Replyjeetu June 24th, 2008
hey
Replydude
great example of the create tab navigation good keep it up.
webmaster blog June 27th, 2008
thanks very nice.Great tutorial ;)
ReplyTom (Puppy Website) June 30th, 2008
I just wanted to say thank you very much for this great tutorial..
ReplyI’ve been looking for this from last week.
osman July 14th, 2008
good very thanks
Replyh4run July 19th, 2008
thats so good. i hope i can do this :)
ReplyJohn D July 22nd, 2008
thx bro
Replyreally amazing tutorial
nedyasafira August 5th, 2008
good review ,very nice….!
Replydave August 22nd, 2008
Hey i really like this design and i am able to do it, but do you know i can then put it into dreamweaver to use as a nav bar ?
Cheers
Replyweb tasarım firmaları August 24th, 2008
nice tutorial thanks, i subscribe your blog,
Replyweb tasarımı August 24th, 2008
thanks for useful article,
ReplyAndy August 27th, 2008
Hi,Thanks for your helpful TUT.
ReplyHow could i use it in my website.
I will thank u if send me more details about it.
adrian ng September 18th, 2008
hi hongkiat,
after 2 days, i finally got to the last steps. I have several questions:
Im using photoshop 7..so there’s a few thing missing when im using the gradient overlay ( to do the color stop settings). So can you help me with that? im almost completing your tutorial!!! i cant wait for it..haha.. and also, erm, how do you put the layer behind the black tab layer? im a newbie on photoshop..
cheers,
Replyadrian ng
Brad82 September 28th, 2008
Hey b`rad – check my flash site out – you might find what you want ;)
http://bradsflash.110mb.com
ReplyAngryCornflakes November 14th, 2008
just had to tell you NEVER doubt your ability i’m currently in school for graphic design and i took a CLASS in photoshop and did poorly. I had a work conflict so i got home sooo late at night it was damn near impossible for me to get to class in the morning in time PLUS i didnt have the software (finally got it during the last 3 weeks of the semester) so i barely managed a C+ and i had little or NO idea what i was doing and now im taking online tuts just to catchup with what i SHOULD have known in the first place and im doing almost as good as my other classmates ALMOST my goal is to be even BETTER just for a sense of personal accomplishment so good luck i hope this reaches you in good health and even better state of mind
ReplyAdrian November 17th, 2008
Hello,
ReplyVery nice tabs. I love the method of smoothing out the corners. Keep on going. You do a good job.
All the best!
Webagentur November 26th, 2008
Hello,
thank you, this tutorial find I very good and it has me very helped.
Replykurye December 1st, 2008
thank you kurye kargo dağıtım hizmetleri moto kurye
Replyint2k December 12th, 2008
thank you for the tutorial
it’s very neat
Replyshootdatarget December 13th, 2008
wow.. thx man.. the menu looks alive ^_^
Replyjewelz December 15th, 2008
tanks
Replyramadha December 23rd, 2008
this is really useful to me!
thank you very much
ReplyTim December 31st, 2008
The end result looks amazing, but the tutorial could be written more effectively. To his/her credit the author has acknowledged a missing step, but I think the steps could be numbered and a bit more detailed like other people have mentioned.
Replyreklam ajans web tasarımı matbaa January 4th, 2009
Thank you for this article. It’s very useful for people who loves to develope. Nice share.
Replykarot beton delme beton kesme January 5th, 2009
thank you very much
ReplySkracanie linków January 8th, 2009
Quite nice and simple menu.
ReplyCarina January 28th, 2009
Where did all the tutorials images go?? It’s just text…
ReplyKind regards Carina
çarli January 31st, 2009
Where did all the tutorials images go?? It’s just text…
ReplyKind regards Carina
parca kontor February 1st, 2009
Parca kontor web tasarım
Replyreklam ajans February 1st, 2009
web tasarım
Replykervancı bobin February 3rd, 2009
Thanks for this site!
Replyfirma rehberi February 5th, 2009
Thanks For You !!!
ReplyAromalar February 20th, 2009
thanks you very mach
ReplyANGELO February 24th, 2009
Hi
The tutorial was nice thank you but just 1/2 quetions
What is an alpha channels purpose ?
When I ctrl L and bring levels in, the corners of my “tab” don’t become rounded, what am I doing wrong ?
One thing I did notice was in the levels dialog box the lines showing colour info were not as prominent, could this be why
Many thanks
ReplyAngelo
bebek March 2nd, 2009
Thank you very much.
Replyprefabrik March 12th, 2009
Thanks For You
Replykonteyner March 20th, 2009
thanks
ReplyJoão March 21st, 2009
Thanks!!!
ReplyGreg April 4th, 2009
Great tutorial.
I’ve been doing the exact same thing with GIMP for a few years. Using the ‘Levels’ tool, and selecting the ‘Alpha’ channel – moving the sliders to adjust the tones.
I use the same technique for all rounded corners shapes in my composites, although, GIMP has a rounded-corner radius setting with its marquee tool, and I can get nearly the same result. I tend to gravitate to GIMP for low-fidelity work, but I use Photoshop when I need a pixel-perfect rendering.
Replygaziantep evden eve April 7th, 2009
thnaks
ReplyRahul Chowdhury April 22nd, 2009
Awesome tutorial man, really liked it.
Replydelprie May 1st, 2009
nice tutorial…
Replythank’s for sharing
the world just not for your own-but everyone’s own..
wait for next tutorial…=D
gaziantep evden eve taşımacılık May 1st, 2009
thansk you
Replymutfak dolabı May 4th, 2009
I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.
Replyphoto retouching May 12th, 2009
Great tutorial. It`s my first visit to your site and I will be coming back to browse some more.
Replygaziantep evden eve taşımacılık May 13th, 2009
thanks you
Replyyerimde olsan May 25th, 2009
very well point. thanks.
ReplyDanny July 1st, 2009
good tutorial but difficult to understand
ReplyMarta July 2nd, 2009
Good explanations. I still like Web 2.0 design.
ReplyÖrgü örnekleri July 3rd, 2009
Very useful tutorial for me. I have to learn more. Thank you very much.
ReplyTrackbacks