How do you make like this....

[erikdiamond]

Hi

Photoshop fans, I am wondering if you can offer tutorial on how to create black glassy nav bar with white text links like you see at http://widgets.yahoo.com/info/

My impression is that they create bar in photoshop with glassy look, then add text using html, dreamweaver, or even photoshop so I ask you, how?? :-P

Merry Christmas

Erik Diamond

[Myz]

The white text is inputted using html. The actual bar, yes seems like it was made in photoshop. I viewed the source of this site, and the text is in html, and the style of it (color, font style) I guess is determined by an external cascading style sheet.
You can make that affect entirely within photoshop/image ready tho
Add the text as layers, as you normally would, place them where you want them. And to make them links, put the area into slices, and give each slice a link (adding a URL to it)
Many ways you can do it..you can even make something like that in flash
But yes, the bar was likely made in photoshop, called up from one of the external CSS's..and the text was added in with html.

[Lesa]

Heh... I peeked through the code and I can't find a single graphic for that nav bar. I know enough about CSS to be quite dangerous, but haven't gotten into anyting too complex yet.

Does anybody out there know enough to be able to tell if the shiny nav bar bits were created using CSS? If it's a graphic, I can't find it. I figured it was a 1 px wide x 5 px tall .gif that was being repeated in a table row or something, but I just don't see it!

[skitchsdg1]

Well I'm no guru, but I did find a graphic being used in there...

The graphic is in an external style sheet named, "styles.css", clever, I know...

Any way, you can find the reference to the external style sheet that the page is linked to in the header section of the HTML. Here's the link to that style sheet...

http://widgets.yahoo.com/styles.css

You can take a look there.

Rick M.

[Myz]

Ya, thats what I figured it was.

"But yes, the bar was likely made in photoshop, called up from one of the external CSS's..and the text was added in with html."

The image is in the external style sheet, inside nav pos. Then it's placed, position wise on the site with the div id. So when it reads "nav pos" it calls up everything from the external CSS, including the bar, and the style for the font.
I'm not a fan of external style sheets at all..im a stubborn guy haha

[Lesa]

The graphic is in an external style sheet named, "styles.css", clever, I know...
Right, I understood that part ;)

What I didn't realize was that you can call graphics in CSS. Fascinating!