Creating rollover images in photoshop

[Kurt]

I'm very new to Photoshop and Dreamweaver.

I have a comp for my website as a .psd file. It includes a navigation row, which looks like this:



Each word is it's own layer. I also made a duplicate layer of each word and changed the text to red. This will be the rollover state (see "Images" for an example).

What's the best way to prepare these layers as rollovers when I get to Dreamweaver?

I first created a New Layer Based Slice out of each layer, and saved them individually as .gifs. But the quality of the resulting .gifs were less than ideal. (Should I make a slice around the whole word, and save that slice, instead of just a slice of the text layer itself?) Or maybe I shouldn't be dealing with slices at all.

Any help is much appreciated. Thank you.

[karinne]

Best way would be NOT to use an image. It's straight text, nothing fancy on the rollover. Just use text and change the color of the link on :hover.

[Kurt]

That's good to hear (because it sounds easy). Do I need to do anything to the navigation items in Photoshop (like slice them, etc.?), or is Dreamweaver the only place I'll need to establish the :hover setting?

Thank you!

[karinne]

Nothing to do in PS ... all code.

Your code should look something like this

HTML

Code: Select all

<div id="navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Images</a></li>
    <li><a href="">Multimedia</a></li>
    etc....
</ul>
</div>

CSS

Code: Select all

#navigation {
    margin: 0;
    padding: 0;
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navigation ul li {
   margin: 0;
   padding: 0;
   display: inline;
   float: left;
}

#navigation ul li a {
   text-transform: uppercase;
   padding: 0 10px;
   border-right: 1px solid #fff;
   color: #fff;
}

#navigation ul li a:hover {
   color: #900;
}

Something like that ... I haven't tested so ...

Have a look at Alistapart's Taming List article for more info on how to styles lists for menus.

[Kurt]

Okay, I have my .psd comp now in Dreamweaver (see below), but I don't see a way to assign the individual navigation buttons as links, set their :hover properties, etc. I looked at the tutorial you posted, but those steps seemed suited for when you're using a list to create your navigation buttoms. In my situation, I've been sent a comp and the navigation items were created in a graphics program.

Any idea how I should proceed? Thanks again.

[VanessaJW]

I think the point being made was that there's no need for your navigation items to be created as graphics in this case - they are just text, so much better to just do them as text in a list.

[Kurt]

Ahhh ... I'm getting it now. (Again ... first time using DW so bear with me.)

I deleted the text layers in photoshop and created the following menu using the Spry Menu Bar widget (which has about 4 million different CSS properties).



I managed to change some of the desired CSS properties but I'm stuck on how do the following:

1. How can I move the menu bar on top of the gradiant image currently right below it (like in my previous screenshot). (The long gradiant rectangle iright below the vertical menu is actually a sliced 800 x 25 px .gif.) Both are now in the same table cell. I tried to delete the .gif from the table and set it instead as a background image of the Spry Menu, but that didn't work (I may have set the wrong CSS property.)

2. How can align the menu to the far right?

3. Which CSS property do I change to decrease the height of the pipes (actually, right borders) which separate the menu items? And I'll need to not show the last pipe (after CONTACT).

Thanks again for your continued help.

[Kurt]

I moved my post to the CSS forum since it's become more about CSS now.

http://www.webforumz.com/css-forum/5...htm#post262878

[Lchad]

Closed Thread!