Design A Web 2.0 Tab With P..

Design a Web 2.0 tab with Photoshop | Photoshop Tutorials http://www.hongkiat.
com/blog/design-a-web-20-tab-with-photoshop/
Advertise
Submit News
Contact
hongkiat.com
Home
Photoshop
Icons
Wordpress
Tools
Inspiration
Graphics
Web 2.0
Wallpapers
How-To
Freebies
RSS
Ads by Google Free Tutorials JDBC Tutorial Photoshop 7 Learn Tutorial
Photoshop Tutorials
Design a Web 2.0 tab with Photoshop

Advertisement
iStock Photos & Images

Over 4 Million Quality Photos Quick Search, Easy Download!
iStockphoto.com
Creating Website
Build Your Own Website Online Free to Start & Easily
Customisable
www.SocialGO.com
Open Source BPEL4People

Design Workflows with BPMN Execute with BPEL 2.0 Server
www.intalio.com
Unigraphics Free Tutorial

Free tips and tricks. Exhaustive online training.
www.myigetit.com
1 of 41 5/26/2009 12:54 PM
Design a Web 2.0 tab with Photoshop | Photoshop Tutorials http://www.hongkiat.com/blog/design-a-web-20-tab-with-photoshop/
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.
2 of 41 5/26/2009 12:54 PM
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 (ew Layer and fill the selected area with black [#000000].
Step 5
3 of 41 5/26/2009 12:54 PM
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
4 of 41 5/26/2009 12:54 PM
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
5 of 41 5/26/2009 12:54 PM
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.
Download tutorial
Related Contents Sponsors
6 of 41 5/26/2009 12:54 PM
Download Free Photoshop E-Book By SitePoint

Photoshop CS3. What’s new.
Amazing Photoshop Skills: 27 images 1 video
Take a look into the latest Photoshop CS3
Good Source For Photoshop Brushes - PSBrushes.net
Posted by hongkiat in Photoshop Tutorials , at 01.24.07
Tags: create, design, photoshop, tab, tutorial, Web 2.0
Comments
1.
Sapan January 27th, 2007
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me.
Reply
2.
Sapan January 27th, 2007
This tutorial tells itself a secret lol. May be the tutorial is not for a naive like me..
Reply
3.
Ar3s January 28th, 2007
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!
Reply
4.
annoyed January 31st, 2007
7 of 41 5/26/2009 12:54 PM
this doesn’t work.
i feel like you’ve left out details, as if you assume too much of the person using the tutorial.
Reply
5.
reem January 31st, 2007
Think you
Reply
6.
craig 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.
Reply
7.
romeo January 31st, 2007
Nice tut m8… i might use it one day.
Reply
8.
donceh February 1st, 2007
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
Reply
9.
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.
Reply
10.
8 of 41 5/26/2009 12:54 PM
b`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
Reply
11.
techconet February 3rd, 2007
Nice tutorial….
Reply
12.
Robert 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?
Reply
13.
Ryan 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.
Reply
14.
paras February 13th, 2007
i like that
good
Reply
15.
ady February 18th, 2007
9 of 41 5/26/2009 12:54 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
Reply
16.
ady 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.
“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.
Reply
17.
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.
Reply
18.
Sharingan February 19th, 2007
This is wonderful technique for rounding corners … Thx for sharing this
Reply
19.
blackj February 19th, 2007
really cool. thanks
Reply
10 of 41 5/26/2009 12:54 PM
20.
stylin February 19th, 2007
nice tutorial
Reply
21.
SvT February 21st, 2007
thanks…
Reply
22.
poesia February 22nd, 2007
Grande sito!!
Reply
23.
superman February 24th, 2007
luogo fine, sapete..
Reply
24.
nata February 25th, 2007
Desidero appena dire che e un luogo ben cotto
Reply
25.
DS 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..
Reply
26.
11 of 41 5/26/2009 12:54 PM
hongkiat 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. :)
Reply
27.
Tony Y. March 5th, 2007
What a nice tutorial! Thanks for your post.
——————————-
Nenest Web Application Framework!
http://www.nenest.com
Reply
28.
im March 15th, 2007
Excellent. will learn it now. was looking similar tutorials.
Reply
29.
Guy March 15th, 2007
nice tutorial bro,

straight forward and nice result.
Reply
30.
Roberto March 16th, 2007
the link to the psd doesn’t work? :(
Reply
31.
DS 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….
12 of 41 5/26/2009 12:54 PM
Reply
32.
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.
Reply
33.
Patrick 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.
Reply
34.
DS 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
Reply
35.
DS March 26th, 2007
By the way, made it from scratch? (i relly don´t know the word.. zero?), without using the psd.. hehehe
:P
Reply
36.
13 of 41 5/26/2009 12:54 PM
DS:Not bad :)
Reply
37.
DS March 26th, 2007
Hmmmmmmmmm…..ñ_ñ
Reply
38.
klein March 29th, 2007
hmmm very nice, i will try it on my website at http://www.designersyard.com
Reply
39.
WCW 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
Reply
40.
max April 2nd, 2007
Wow great tutorials :D
cheers, saved me sooo much time and money
Reply
41.
max April 2nd, 2007
will try it on my website. Free Stuff http://www.MyFreeStuff.co.uk
Reply
42.
14 of 41 5/26/2009 12:54 PM
gbl 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
Reply
43.
kerberoS April 9th, 2007
Very nice! :)
Reply
44.
evren April 22nd, 2007
nice tutorial, thanks…
Reply
45.
Sasha 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
Reply
46.
Michael 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
Reply
47.
Sam Zaydel May 9th, 2007
Very cool. Thank you.

Reply
48.
15 of 41 5/26/2009 12:54 PM
krish May 14th, 2007
Excellent tutorial
Reply
49.
Lacey May 17th, 2007
Very lovely, thanks!
Reply
50.
Sreejith May 20th, 2007
Amazing Tut ! 2 new tchniques i’ve learned :) .
Reply
51.
Quintin May 31st, 2007
iiiiiiiiiiii like it!
Hard to find tutorials with results of this standard.

So much rubbish out there on the web.
Reply
52.
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
Reply
53.
Amitav Roy June 9th, 2007
this is a very nice and good looking tutorial

although i took some time to understand but then i am new to photoshop
Reply
54.
16 of 41 5/26/2009 12:54 PM
Shaon June 14th, 2007
Really excellent tutorial…
Reply
55.
qyasi June 19th, 2007
Very lovely, thaaaaaanks!
Reply
56.
Alek - 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. :)
Reply
57.
Stef June 27th, 2007
Nice tutorial, and it works almost as well with The Gimp instead of Photoshop.
Reply
58.
Zhille 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
Reply
59.
Puggs July 19th, 2007
Nice tutorial. Worked great
Reply
60.
Saeko July 24th, 2007
17 of 41 5/26/2009 12:54 PM
Hello, nice site look this:

Thanks.
End ^) See you
Reply
61.
Matt 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…
Reply
62.
best price viagra August 4th, 2007
And includes a wealth of information.
Reply
63.
BekirJem September 13th, 2007
Thanks. Web 2.0 Photoshop styles: http://www.bekircem.com/web-20-layer-styles/
very good tabs..

Reply
64.
wasko74 September 21st, 2007
Great Great tutorial!!! Any chance to see another tutorial explaining how to make this tabs with
CSS????
Reply
65.
fxencore October 5th, 2007
Great tutorial !
Reply
18 of 41 5/26/2009 12:54 PM
66.
Haladdin October 12th, 2007
Really useful tutorial. Keep on!!!
Reply
67.
portrait 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.
Reply
68.
Kurye October 25th, 2007
Thanks for this informations. yararli bilgiler icin cok tesekkurler. (escuse me my english is bad.)
Reply
69.
Mark Lindberg October 27th, 2007
Thanks, I’ve been looking all over for this tutorial.

mark
Reply
70.
Zellah December 4th, 2007
Great tutorial. Really clear and concise with a stunning and simple result. Really appreciate this one!
Reply
71.
Aenugu December 21st, 2007
Just Wonderful.
Reply
72.
J January 9th, 2008
19 of 41 5/26/2009 12:54 PM
Great tutorial! Any help in getting accomplishing the development of this in CSS and HTML? Any help
would be greatly appreciated! Thanks!
Reply
73.
web tasarımı February 5th, 2008
thanks for useful article
Reply
74.
Google Reklam February 5th, 2008
good article, thanks
Reply
75.
SRINI 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.
Reply
76.
menace 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.
Reply
77.
Phil 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
20 of 41 5/26/2009 12:54 PM
effects for the secondary tabs in Flash or using Javascript.
Did you get that B’rad?
Reply
78.
PDX Guy March 14th, 2008
Sick of web 2. Found some good sites but no time to hit them all.
Reply
79.
Cd Çoğaltım March 16th, 2008
thanks your usefull article
Reply
80.
Lemps 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.
Reply
81.
Lemps March 22nd, 2008
Never mind, I just got it working, sorry.
Reply
82.
Anthony 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!
Reply
83.
hongkiat April 8th, 2008
21 of 41 5/26/2009 12:54 PM
Anthony: It looks great! But there’s a little alignment problem with the text. I’m seeing in with Firefox
:-)
Reply
84.
Mary April 17th, 2008
it must be the best photoshop tutorial i ever followed! thumbs up for you
Reply
85.
sosyal bilgiler April 24th, 2008
Looks very useful. Thanks for the tips. I have added this website to my bookmarks.
Reply
86.
Susan 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!
Reply
87.
Tasarim May 5th, 2008
Good Good thanks… :)

Reply
88.
Song May 24th, 2008
Great tutorial.
I love what you do.
TX
Reply
89.
jeetu June 24th, 2008
hey
22 of 41 5/26/2009 12:54 PM
dude
great example of the create tab navigation good keep it up.
Reply
90.
webmaster blog June 27th, 2008
thanks very nice.Great tutorial ;)
Reply
91.
Tom (Puppy Website) June 30th, 2008
I just wanted to say thank you very much for this great tutorial..
I’ve been looking for this from last week.
Reply
92.
osman July 14th, 2008
good very thanks
Reply
93.
h4run July 19th, 2008
thats so good. i hope i can do this :)

Reply
94.
John D July 22nd, 2008
thx bro
really amazing tutorial
Reply
95.
nedyasafira August 5th, 2008
good review ,very nice….!
Reply
23 of 41 5/26/2009 12:54 PM
96.
dave 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
Reply
97.
web tasarım firmaları August 24th, 2008
nice tutorial thanks, i subscribe your blog,
Reply
98.
web tasarımı August 24th, 2008
thanks for useful article,
Reply
99.
Andy August 27th, 2008
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.
Reply
100.
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,
adrian ng
Reply
101.
24 of 41 5/26/2009 12:54 PM
Brad82 September 28th, 2008
Hey b`rad - check my flash site out - you might find what you want ;)
http://bradsflash.110mb.com
Reply
102.
AngryCornflakes 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
Reply
103.
Adrian November 17th, 2008
Hello,
Very nice tabs. I love the method of smoothing out the corners. Keep on going. You do a good job.
All the best!
Reply
104.
Webagentur November 26th, 2008
Hello,
thank you, this tutorial find I very good and it has me very helped.
Reply
105.
kurye December 1st, 2008
thank you kurye kargo dağıtım hizmetleri moto kurye
Reply
106.
int2k December 12th, 2008
25 of 41 5/26/2009 12:54 PM
thank you for the tutorial
it’s very neat
Reply
107.
shootdatarget December 13th, 2008
wow.. thx man.. the menu looks alive ^_^
Reply
108.
jewelz December 15th, 2008
tanks
Reply
109.
ramadha December 23rd, 2008
this is really useful to me!
thank you very much
Reply
110.
Tim 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.
Reply
111.
reklam 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.
Reply
112.
karot beton delme beton kesme January 5th, 2009
26 of 41 5/26/2009 12:54 PM
thank you very much
Reply
113.
Skracanie linków January 8th, 2009
Quite nice and simple menu.
Reply
114.
Carina January 28th, 2009
Where did all the tutorials images go?? It’s just text…
Kind regards Carina
Reply
115.
çarli January 31st, 2009
Where did all the tutorials images go?? It’s just text…
Kind regards Carina
Reply
116.
parca kontor February 1st, 2009
Parca kontor web tasarım

Reply
117.
reklam ajans February 1st, 2009
web tasarım
Reply
118.
kervancı bobin February 3rd, 2009
Thanks for this site!
Reply
119.
27 of 41 5/26/2009 12:54 PM
firma rehberi February 5th, 2009
Thanks For You !!!
Reply
120.
Aromalar February 20th, 2009
thanks you very mach
Reply
121.
ANGELO 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
Angelo
Reply
122.
bebek March 2nd, 2009
Thank you very much.

Reply
123.
prefabrik March 12th, 2009
Thanks For You
Reply
124.
konteyner March 20th, 2009
thanks
Reply
28 of 41 5/26/2009 12:54 PM
125.
João March 21st, 2009
Thanks!!!
Reply
126.
Greg 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.
Reply
127.
gaziantep evden eve April 7th, 2009
thnaks
Reply
128.
Rahul Chowdhury April 22nd, 2009
Awesome tutorial man, really liked it.
Reply
129.
delprie May 1st, 2009
nice tutorial…
thank’s for sharing
the world just not for your own-but everyone’s own..
wait for next tutorial…=D
Reply
130.
gaziantep evden eve taşımacılık May 1st, 2009
29 of 41 5/26/2009 12:54 PM
thansk you
Reply
131.
mutfak 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.
Reply
132.
photo retouching May 12th, 2009
Great tutorial. It`s my first visit to your site and I will be coming back to browse some more.
Reply
133.
gaziantep evden eve taşımacılık May 13th, 2009
thanks you
Reply
134.
yerimde olsan May 25th, 2009
very well point. thanks.
Reply
Trackbacks
1. Xiffy's Linkdump
2. The WP Themes » Blog Archive » Design Web 2.0
3. Max Design - standards based web design, development and training » Some links for light reading
(1/2/07)
4. Technikwürze » Technikwürze 58 - Versionsverwaltung
5. pixelblog - Sebastian Döll » Web Updates (02/10/2007)
6. holdandmodify.com » Blog Archive » links for 2007-02-07
7. Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
8. Whitesquid
9. Photoshop-Weblog » Blog Archiv » Design a Web 2.0 tab
10. PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials
11. BlogZwo | Blog Archive » Web 2.0 Webdesign Tutorials
12. design 2.0 at comatags
13. Photoshop and Web 2.0 ~ Prateek’s Blog
14. Web 2.0 Tutorials Round-Up | Smashing Magazine
30 of 41 5/26/2009 12:54 PM
15. Middle School Hacks » test entry 03/11/2007

16. MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları
17. Photoshop ile Web2.0 Menü « 1 “FiKiR” Lâzım
18. viagra
19. Themes Central - free themes for Windows Vista, XP, WordPress and many more. » Web 2.0 objects:
glossy, badges, tabs.
20. 68 Web 2.0 design tutorials » A blog you can use!
21. Blog des Internetprofessor » Blog Archiv » Copyright Modelle vor dem “aus” ?
22. tadalafil
23. ultram
24. Web 2.0 Tutorials by Tekjuice.com
25. Conception Web » Blog Archive » Web 2.0. Design
26. Tutoriales para el diseño orientado al 2.0 | Kabytes
27. Tutoriales para el diseño orientado al 2.0 « Cosas sencillas
28. ¿Como diseñar al estilo web 2.0? «
29. franklin dictionary
30. Web2 tool » Web2.0 tutorial grafica
31. Web 2.0 objects: glossy, badges, tabs.
32. Design a Web 2.0 tab with Photoshop - Ayiva
33. Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri
34. Recopilación variada de recursos Web | BetaElite
35. Web 2.0 Tutorials Round-Up - Article Save
36. :: gclubstudio :: » Blog Archive » Tutorial Web 2.0
37. Ayiva » Blog Archive » Web 2.0 Tutorials Round-Up
38. Web 2.0 Tutorials | Pxdev.com
39. Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up
40. Design a Web 2.0 tab with Photoshop « Photoshop, Here, webdesign, link, resource, development,
helpful, css « Sharebrain
41. Adobe4U » Blog Archive » Web 2.0 Tools/ Photoshop Tutorials
42. April: 10 Photoshop Tutorials für´s Web | boxedfolder.com - Flex, Flash & Web
43. 2008 | Yerles.com » Adobe Photoshop Uygulamaları
44. Wie bekomme ich diese Form hin - PSD-Tutorials.de - Forum
45. Design a Web 2.0 tab with Photoshop « Photoshop, Here, webdesign, webworker, web, design, link,
resource « Sharebrain
46. 68个web2.0网站设计教程 « 深秋迷雾
47. 40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial]
48. Photoshop ile yapılan en iyi web arayüzleri » Sadece Bir Blog
49. 41+ En muhteşem web arayüz dizay dersleri | The_Wolf | Official Web Page
50. 40+ Greatest Web Interface Design Tutorials [Photoshop Tutorial] | Technically Personal!
51. 41+ En muhteşem web arayüz tasarım dersleri | Tips & Tricks
52. 41 туториел для создания сайта | Дизайн-журнал №1.
53. 41 туториал для создания сайта | Дизайн :)
54. 22 Creative Tabbed Site Navigations & Tutorials | My Ink Blog
55. AllTuts
56. Elevated Sky » Blog Archive » Photoshop Tutorials (100+) Photography & Design
57. Photoshop Tutorials A-Z
58. A’ dan Z’ ye Photoshop Eğitimi | Batuhan Bulak
59. Added by a PAL to FAQ PAL
60. Css ile Kolay Menü Yapımı | Aykut Önen
61. お気に入り » Blog Archive » Design a Web 2.0 tab with Photoshop
62. Mar-19-2009 web design photoshop links | w3feeds
31 of 41 5/26/2009 12:54 PM
63. 80+ Photoshop Tutorials: Practical Web Interface Design | tripwire magazine
64. 52 Professional Website User Interface Photoshop Tutorials | Minervity
65. Greatest Web Interface Design Photoshop Tutorials, Part I « Online Free Applications Software Tips
Tools Wallpapers
Leave a reply
Name (*)
E-mail ( * )
URI
Message
Sponsors Advertise with us
32 of 41 5/26/2009 12:54 PM
33 of 41 5/26/2009 12:54 PM
Most Popular Recent Published Active Topics
30 Nicest Apple, MacOS and iPod Wallpapers
How Web 2.0 Logos are drawn (Photoshop)
How To Access Blocked Web Sites
11 Sites To Create Cartoon Characters of Yourself
60 Most Beautiful Apple (Mac OS X Leopard)

Wallpapers
Design a Web 2.0 tab with Photoshop
13 Computer keyboards you've never seen before
Photoshop Tutorial: Create glossy button for web 2.0
49 Most downloaded Wordpress themes of all time
Best Color Tools For Web Designers
100 Keyboard shortcuts (Windows)
Vista Wallpapers Pack you should not missed
Create Carbon Fibre Pattern in Photoshop
Draw Transformers in Photoshop
Photoshop: Create Web 2.0 Button
Create a Polaroid Effect of your Photo
17 iPhone applications you should install
26 Sites That Pay You to Blog
41 Nicest Photoshop Photo Effects [Photoshop

Tutorials]
Drawing Spiderman Logo in Photoshop
20 Facebook Tips/Tricks You Might Not Know
30+ Free Flash Photo Galleries and Tutorials
60 Examples of Beautiful Night Shots
34 of 41 5/26/2009 12:54 PM
100 Extremely Creative Twitter Avatars
45 Free Useful Thumb Drive Applications
Evolution of Photoshop: 1988 - 2009
60+ Useful Photoshop Actions For Photo Enhancements
30+ Examples & Tutorials of Stunning Polar Panorama

Photos
60 Beautiful Ubuntu Desktop Wallpapers
Giveaway: (3x) FlashMint Premium Wordpress Themes

of Your Choice
Execute PHP in Wordpress post, page and

Widget Sidebar
Никогда не спорьте с умным: люди �...
вебмастеру
12 Sites To Create Cartoon Characters of

Yourself
Very cool! Another way of branding yourself. Thanks
for comp... Tom Duong

Espectacular Presidente!!!... Raul Romero
41 Nicest Photoshop Photo Effects [Photoshop

Tutorials]
Man...... awesome i was searching exactly this type of
site.... Diptej Saner

great tips there. Thanks for sharing! Never knew there
were... Janet
How To Remove Friendster Apps (Widgets)

thaks fo the info it is a big help to me... richard
Nice Clean WordPress e-Commerce Theme

For Free - Crafty Cart
Nice theme, especially if someone wants to create a
small sh... Divya
35 of 41 5/26/2009 12:54 PM
Popular Post
3D Applications
Abstract Grunge Fonts
Access Blocked Sites I
Access Blocked Sites II
Adobe Air Applications
Amazon S3
Amazon CloudFront
Apple Icons
Apple Wallpapers I
Apple Wallpapers II
Audio & Sound Effects
Audio Editors
Beautiful Blog Designs
Blank Templates
Blog Footer Design
Blogger Templates
Cartoon Characters
CD/DVD Templates
Coke Pepsi Ads
Color Tools
CPM Ad Networks
CSS Tab
Desktop Blogging Clients
Dual Monitor Wallpapers
Error 404 Pages
Error 404 Pages II
Feedburner Text Count
Firefox Resize I
Firefox Resize II
Firefox Sidebar Apps
Firefox Smart Search
36 of 41 5/26/2009 12:54 PM
Firefox Themes
Firefox Wallpapers
Flickr Tools
Free Ebooks
Free Ebooks II
FTP Softwares
Futuristic Gadgets
Googleplex
Great Workstations
High Res Logos
iGoogle
Image Hotlinking
Inspiring Ads I
Inspiring Ads II
Inspiring Ads III
Inspiring Ads IV
iPhone Applications
iPhone Games
iPhone Wallpapers
Keyboard Shortcuts
Keyboards
Leopard Wallpapers
Magazine Product Ads
Multi-Author Blogging
Nature Wallpapers
Paid Blogging
PDF Tools
Photo Managing Softwares
Photoshop Abstract Bg
Photoshop Alternatives
Photoshop Alternatives II
Photoshop Icon Design
Photoshop Photo Effects
Photoshop Photo Effects II
Photoshop Text Effects
Photoshop Text Effects II
Pocket PC Softwares
Practical Interface Design
Resize Images
RSS Icons I
RSS Icons II
Screen Capture Tips
Screen Capture Tools
Screensavers
Space Wallpapers
Spectrum Wallpapers
Tooltips
Twitter Wallpapers I
Twitter Wallpapers II
URL Shortening
USB Dives
37 of 41 5/26/2009 12:54 PM
Vector Images
Video Editing
Vista Wallpapers
Wallpapers - Ironman
Web Design Forums
Web Templates
Web Traffics
Website 10 Years Ago
Website Info
Website Monitor
Windows 7 Wallpapers
Wood Textures
Wordpress Themes I
Wordpress Themes II
Wordpress Themes III
Wordpress Tips I
Wordpress Tips II
Mini Updates
High Quality Free Web Templates
40 Cool Abstract and Background Photoshop Tutorials
80 Free PDF Tools, Tips and Resources
30 Impressive Colour Spectrum and Rainbow Wallpapers
38 of 41 5/26/2009 12:54 PM
30 Free Video Tools and Web Services
25 Really Cool ScreenSavers To Download
100 Nice and Beautiful Blog Design
3D Modeling Applications You Should Not Miss
Best Photoshop Text Effects I, II
CD/DVD Photoshop Templates
50+ Free High Quality iMac, Macbook Icon Sets
39 of 41 5/26/2009 12:54 PM
40+ Hand-picked Photoshop Icon Designs
20 Best Websites To Download Free EBooks
50 Most Beautiful Blogger Templates
Nicest Photoshop Photo Effects I, II
50+ Nice Clean CSS Tab-Based Navigation Scripts
Really Nice IronMan Wallpapers
50 Must Have Softwares for Pocket PC
40 of 41 5/26/2009 12:54 PM
50 Websites For Free Vector Images Download
Beautiful Apple Wallpapers
70+ Nice and Beautiful Firefox Wallpapers
40+ Most Wanted Wordpress Tricks and Hacks I, II
Copyright © 2009 Hongkiat.com. All rights reserved. WordPress, theme design by Hongkiat.
Contact | Advertise | Sitemap | Privacy | Back to top
41 of 41 5/26/2009 12:54 PM

Design A Web 2.0 Tab With P..

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design A Web 2.0 Tab With P..

Uploaded by

Copyright:

Available Formats

Design a Web 2.0 tab with Photoshop | Photoshop Tutorials http://www.hongkiat.

Ads by Google Free Tutorials JDBC Tutorial Photoshop 7 Learn Tutorial

Design a Web 2.0 tab with Photoshop

iStock Photos & Images

Open Source BPEL4People

Unigraphics Free Tutorial

Hold CTRL, click on

With the tab image still

You should only see the

Create a new layer, fill

Bevel and Emboss

Here are the Color stops settings.

Related Contents Sponsors

Download Free Photoshop E-Book By SitePoint

Posted by hongkiat in Photoshop Tutorials , at 01.24.07

Tags: create, design, photoshop, tab, tutorial, Web 2.0

Sapan January 27th, 2007

Sapan January 27th, 2007

Ar3s January 28th, 2007

Very nice tutorial!

annoyed January 31st, 2007

this doesn’t work.

reem January 31st, 2007

craig January 31st, 2007

romeo January 31st, 2007

Nice tut m8… i might use it one day.

donceh February 1st, 2007

very nice tutorial .

dbm February 2nd, 2007

b`rad February 3rd, 2007

techconet February 3rd, 2007

Robert Craig February 8th, 2007

THIS IS TOOOOO HARD!

Ryan Szablewski February 10th, 2007

paras February 13th, 2007

ady February 18th, 2007

ady February 19th, 2007

hongkiat February 19th, 2007

1.Create a new file with background color white [#ffffff].

3.Then my tutorials continues….

Sharingan February 19th, 2007

blackj February 19th, 2007

really cool. thanks

stylin February 19th, 2007

SvT February 21st, 2007

poesia February 22nd, 2007

superman February 24th, 2007

luogo fine, sapete..

nata February 25th, 2007

Desidero appena dire che e un luogo ben cotto

DS March 3rd, 2007

hongkiat March 4th, 2007

Hi DS, if you see this image:

Tony Y. March 5th, 2007

What a nice tutorial! Thanks for your post.

im March 15th, 2007

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

Guy March 15th, 2007

nice tutorial bro,

Roberto March 16th, 2007

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

DS March 18th, 2007

hongkiat March 18th, 2007