Hi there. Ive been on this site\forum for a wile now, and i took some time to browse through the ubar library, and most of the userbars looked really flat.

i decided to share my "technique" with you on how to give UBar a 3D effect.
first, make a userbar.

as you can see it looks flat. all it is is a gradient, text, and stroke.
now to make a userbar more 3d-ish all i need to do is to add bevel/emboss.
here's how you do it:
1) Right Click on a layer that needs to be in 3d(Usually its a background image layer), and click on blending oprions. you dont want to make all your layers in e3 because your userbar will look like a bubble.

2) Then, in the new window you need to put a check onn on "Stroke" "Pattern" and "Bevel and Emboss".
as you can see your userbar already got a 3d shape, but its a little squarish.
3) In stroke Select 1px inside and black color.
4) in pattern instert a usual userbar pattern (3x3px(or 5*5) with 3px(or 5) diagonal black line.
5) in bewel and emboss leave everything as it is except "Size". if you make it too small 3d effect will either be squarish or invisible at all. make it bigger, it will be more bubble-like(thats what you need). too much and it will be flat again. i use 40-50 pixels.

you can also mess around with the light, and shadow color, but it like to keep it all by default.
6) Press OK, and now you got a userbar with a 3d effect!

7) Add some gloss, and you got a 100% complete userbar.



Here's a side-to-side comparison of B4 and After effects:

Before:


After:




PS: Fill and Gloss were removed so that you could see the difference.

This is a great tutorial. Although I can get thee bevel and emboss to coloured like yours, mine is white. Do you have to set the background colour first and then use the bevel and emboss, because I tried to change the colour of the bevel and emboss and nothing happened.

Anyway here one I made with your technique.

ill make my own how to make a userbar tutorial showing all the techniques i'm using.
but to answer your question, i didnt change any colors. your bewel&emboss looks exactly like the one on my example which means that you've done everything right. if you're talking about the green\blue transition, then its just a regular gradient.
also, try to mess around with the light source(that circle thingy in the SHADING part of bewel\emboss window), because you got too much shadow on the bottom of your userbar, or you could go with more than 50px structure size. dont always stick with 43. i never use exactly same ammount of structure size. in some ubars i can even go 30, or 60. depends on the userbar color scheme.

a lot of people know to user bevel...can't be called a tutorial, rather an idea.

Great tutorial,good explanation,nice with screenshots and all.I like it!

@Athan:It's a big world and there's a lot of newbies out there

i agree, but when i first started with photoshop, i used bevel to give 3D effects, but then i saw it's not so cool and started to search for tutorials

i'm a noob and this is an interesting piece of info for me. while elipse-white fill-opacity gives a glossy 3d efect to a chosen side of the userbar this feature makes userbar look like a (3d) stick or a tube

It don't work for me now.
I do all of the steps correctly but it never comes 3D.
I also use B&A at 10 pixels;)

What I made of it, I like the result. Thank you very much!!

dont use anti-aliasing for visitor and it will be fine

This is only for photoshop, right?

I think so.

Thanks very much your tutorial is really very helpful and very illustrated keep more tutorials coming thanks.