Web 2.0 tabs with Photoshop…

…

[...] Web 2.0 tab with Photoshop - a good and detailed how-to make a web 2.0-look tab. [...]

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.

[...] Design a Web 2.0 tab with Photoshop [...]

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

[...] Design a Web 2.0 tab with Photoshop Podcast anhören Jetzt hören: [...]

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.

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

[...] Design a Web 2.0 tab with Photoshop (tags: photoshop tutorial web2.0 design webDesign tabs graphics) [...]

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

[...] 47. Design a Web 2.0 tab with Photoshop [...]

nice tutorial

[...] 47. Design a Web 2.0 tab with Photoshop [...]

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

[...] 47. Design a Web 2.0 tab with Photoshop [...]

thanks…

[...] und Web 2.0 Tab Filed under Grafik Leave a [...]

Grande sito!!

luogo fine, sapete..

[...] 47. Design a Web 2.0 tab with Photoshop [...]

Desidero appena dire che e un luogo ben cotto

[...] Web 2.0 Tabs [...]

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

[...] 48. Design a Web 2.0 tab with Photoshop [...]

[...] Design a Web 2.0 tab with Photoshop [...]

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.

[...] 47. Design a Web 2.0 tab with Photoshop [...]

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

viagra…

bie afuig…

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…

[...] Design a Web 2.0 tab with Photoshop [...]

[...] 48. Design a Web 2.0 tab with Photoshop [...]

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

[...] T [...]

Very cool. Thank you.

Excellent tutorial

Very lovely, thanks!

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

tadalafil…

oabaxuzb arax…

ultram…

utuwaq whietee…

[...] 48. Design a Web 2.0 tab with Photoshop [...]

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

[...] 47. Design a Web 2.0 tab with Photoshop [...]

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.

[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente, resultado: [...]

[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente. [...]

[...] Hongkiat.com: Genial este tutorial queda un efecto realmente excelente. [...]

franklin dictionary…

thanks, keep up the good work……

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

[...] Design a Web 2.0 tab with Photoshop [...]

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

[...] Design a Web 2.0 tab with Photoshop [...]

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

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

[...] menü hazırlama, burası, burası, burası ve burası [...]

Great tutorial !

Really useful tutorial. Keep on!!!

[...] Web 2.0 tab with Photoshop [...]

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

[...] 48. Design a Web 2.0 tab with Photoshop [...]

[...] Design a Web 2.0 tab with Photoshop [...]

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

Just Wonderful.

[...] 48. Design a Web 2.0 tab with Photoshop [...]

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

[...] 48. Design a Web 2.0 tab with Photoshop [...]

thanks for useful article

good article, thanks

[...] 48. Design a Web 2.0 tab with Photoshop [...]