This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me.

This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me..

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!

this doesn’t work.

i feel like you’ve left out details, as if you assume too much of the person using the tutorial.

Think you

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.

Nice tut m8… i might use it one day.

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

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.

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

Nice tutorial….

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?

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.

i like that
good

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

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.

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.

This is wonderful technique for rounding corners … Thx for sharing this

really cool. thanks

nice tutorial

thanks…

Grande sito!!

luogo fine, sapete..

Desidero appena dire che e un luogo ben cotto

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

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. :)

What a nice tutorial! Thanks for your post.

——————————-
Nenest Web Application Framework!
http://www.nenest.com

Excellent. will learn it now. was looking similar tutorials.

nice tutorial bro,
straight forward and nice result.

the link to the psd doesn’t work? :(

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

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.

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.

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

By the way, made it from scratch? (i relly don´t know the word.. zero?), without using the psd.. hehehe :P

DS:Not bad :)

Hmmmmmmmmm…..ñ_ñ

hmmm very nice, i will try it on my website at http://www.designersyard.com

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

Wow great tutorials :D

cheers, saved me sooo much time and money

will try it on my website. Free Stuff http://www.MyFreeStuff.co.uk

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

Very nice! :)

nice tutorial, thanks…

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

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

Very cool. Thank you.

Excellent tutorial

Very lovely, thanks!

Amazing Tut ! 2 new tchniques i’ve learned :) .

iiiiiiiiiiii like it!

Hard to find tutorials with results of this standard.
So much rubbish out there on the web.

Thanks for helpful information you catch up us with your instructional explenation.

What people do is more important that what they say…

Best regards

this is a very nice and good looking tutorial
although i took some time to understand but then i am new to photoshop

Really excellent tutorial…

Very lovely, thaaaaaanks!

Actually, that’s pretty useful graphics work, thanks! But I don’t agree with professionals using web2.0 as a real term. :)

Nice tutorial, and it works almost as well with The Gimp instead of Photoshop.

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

Nice tutorial. Worked great

Hello, nice site look this:
Thanks.

End ^) See you

“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…

And includes a wealth of information.

Thanks. Web 2.0 Photoshop styles: http://www.bekircem.com/web-20-layer-styles/

very good tabs..

Great Great tutorial!!! Any chance to see another tutorial explaining how to make this tabs with CSS????

Great tutorial !

Really useful tutorial. Keep on!!!

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.

Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)

Thanks, I’ve been looking all over for this tutorial.
mark

Great tutorial. Really clear and concise with a stunning and simple result. Really appreciate this one!

Just Wonderful.

Great tutorial! Any help in getting accomplishing the development of this in CSS and HTML? Any help would be greatly appreciated! Thanks!

thanks for useful article

good article, thanks

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.

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.

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?

Sick of web 2. Found some good sites but no time to hit them all.

thanks your usefull article

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.

Never mind, I just got it working, sorry.

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!

Anthony: It looks great! But there’s a little alignment problem with the text. I’m seeing in with Firefox :-)

it must be the best photoshop tutorial i ever followed! thumbs up for you

Looks very useful. Thanks for the tips. I have added this website to my bookmarks.

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!

Good Good thanks… :)

Great tutorial.

I love what you do.

TX

hey
dude
great example of the create tab navigation good keep it up.

thanks very nice.Great tutorial ;)

I just wanted to say thank you very much for this great tutorial..
I’ve been looking for this from last week.

good very thanks

thats so good. i hope i can do this :)

thx bro
really amazing tutorial

good review ,very nice….!

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

nice tutorial thanks, i subscribe your blog,

thanks for useful article,

Hi,Thanks for your helpful TUT.
How could i use it in my website.
I will thank u if send me more details about it.

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,
adrian ng

Hey b`rad – check my flash site out – you might find what you want ;)

http://bradsflash.110mb.com

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

Hello,
Very nice tabs. I love the method of smoothing out the corners. Keep on going. You do a good job.
All the best!

Hello,

thank you, this tutorial find I very good and it has me very helped.

thank you kurye kargo dağıtım hizmetleri moto kurye

thank you for the tutorial

it’s very neat

wow.. thx man.. the menu looks alive ^_^

tanks

this is really useful to me!

thank you very much

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.

Thank you for this article. It’s very useful for people who loves to develope. Nice share.

thank you very much

Quite nice and simple menu.

Where did all the tutorials images go?? It’s just text…
Kind regards Carina

Where did all the tutorials images go?? It’s just text…
Kind regards Carina

Parca kontor web tasarım

web tasarım

Thanks for this site!

Thanks For You !!!

thanks you very mach

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
Angelo

Thank you very much.

Thanks For You

thanks

Thanks!!!

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.

thnaks

Awesome tutorial man, really liked it.

nice tutorial…
thank’s for sharing
the world just not for your own-but everyone’s own..
wait for next tutorial…=D

thansk you

I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation.

Great tutorial. It`s my first visit to your site and I will be coming back to browse some more.

thanks you

very well point. thanks.

good tutorial but difficult to understand

Good explanations. I still like Web 2.0 design.

Very useful tutorial for me. I have to learn more. Thank you very much.