Trendy Side Bars

[Determin3d]

I came across a really trendy side bar at CA.to (http://www.christinaaguilera.to). I don't know when the webmaster will change the layout, so I took a screen cap of the bars (http://www.PageProducer.com/users/webgoodies/sidebars.jpg). Any idea on how to do it? I'm referring to the top of each bar.

[Harp2]

Hello Determin,

I'd like to help, but you need to be more specific about what part of the sidebar you want to do, or, is it the entire sidebar?

Harp!

[fever]

Do you mean like the menus and how they are set up?

[hightop]

try to be more specific for what you want

[last breath]

Hey guys, did you noticed she got a link to the cap. a screen "cap of the bars" click the bars, I suggest why not have a different color for a link, so we won't be confused.

I think that can be done, in Photoshop, I think you need to do a square marquee, and later fade it using the eraser tool, or add layer mask, and use the brush tool, and fade it, according to the screencap.

About making that curve at the upper left hand corner, I don't know how, or have the slightest idea.

I hope help a little.

Last breath..

[daedal.]

The curve can be made be replacing a corner of a square with a circle.

In example, create a 200x200pixel square and fill it in.
Now make a 20x20 square and erase a corner. Replace it with a 20x20 Ellipse and fill the blanks. That'll leave you with a nice rounded corner.

http://www.onusart.org/temp/gf_corner.gif

[Determin3d]

I apologize for not being specific. I didn't want to edit it, but, I drew a red line around the part I was referring to. Click here (http://www.PageProducer.com/users/webgoodies/sidebars.jpg) to view it. To be even more specific, I was referring to the top of the bar where it's as if the text "side bars" was placed on the top pressing the bar's borders down making it uneven.

However, daedal. did answer a question I had, on accident. Thanks ;)

[last breath]

I see.. but I can't seem to understand daedal instruction on having a rounded corner, anyone has a better tutorial for this. Thanks.

[oic]

You can also try to pixel it, i think thats what he did ;)

http://oic.maxi4u.de/1.jpg

[last breath]

Oh I see. I try that thanks

[Determin3d]

No, guys! I'm not talking about the round borders...ahh nevermind =/ I'll just try it and see what I come up with.

[r0yksopp]

i know what you mean.... where the text breaks the line and moves it down?

I believe what's been done is the bar itself is on a seperate layer. Originally, it was a perfect shape. The part covered by the text is selected, cut out, and moved down. The text is then added on a new layer, and where the shape meets the text the blur tool is used to soften the line.

Hope that clarifies it a little...i can make some example images if you like to explain it better.

[Determin3d]

Yup, that's exactly what I'm talking about :)
Thanks.

[last breath]

Oh lol I know my reply about the rounded corner, is kind of out of track.. But I would like to learn about the rounded corners too (:.

And it was unsuccessful.. :(

[Mitchacho]

You can try a number of different things. I used the pen tool...
http://www.praank.co.uk/dump/penbox.jpg
hopefully that'll give you an idea of how to do it... just stroke the line, add a gradient to the background, and add your text et voila! =)

[Determin3d]

Thanks!!!!!!!!!!!!
Ok, now we're talkin! LOL

[r0yksopp]

all you need is ppl with intelligence ;)

[Determin3d]

LOL Yup, something I lack...very much :(

[last breath]

Haha sounds like you are hinting at something r0yksopp :P

[Determin3d]

Yeah, I think so, too @ last breath
Don't hold back...just call me stupid if ya want :(
lol

[r0yksopp]

i wasn't calling you stupid, i was talking about the doofus' going on about the curved line etc.

[last breath]

Hey hey, it's an inside joke, or a joke rather. I was not on my right mind, don't worry you guys really help a lot :) esp r0yksopp :D

[Determin3d]

LOL alright :)
I'm not offended or anything.
I second what last breath said!