I got a cool nav bar from graphic river, and I would love to use it, but I am having trouble figuring out what the best way to utilize it is. It is a psd document and I can hide all the bars I don't want, but I am not sure what to do about the hover graphic on each individual section. Is there a way to import it as a smart object or something, or do I need to slice up each section?
Thanks for all your help, you guys save me all the time ![]()
This isn't the exact same one, but it is one I had open (considering it on another project) http://graphicriver.net/item/highly-detailed-navigation-menus/1838676? WT.ac=category_thumb&WT.seg_1=category_thumb&WT.z_author=Aloisc
They just come as a PSD with all the layers editable.
Hi Ayetti957,
Without a look at the PSD file, all of this is just a guess.
Perhaps this will get you going in the right direction.
First thing you want to do is look for an external readme file or any notes from the designer on how to use the psd file.
Try Menu: View>Show>Annotations to see if there are any instructions embedded in the PShop file.
Also, look to see if there is a text only layer (normally turned off) with instructions in it.
There's going to be some slicing involved - one way or the other.
Hopefully, the nav bar designer already did the slicing for you ![]()
Menu: View>Show>Slices (That's the way it works on my PShop CS3)
If the slices show up then most of the work has already been done.
Next, you have to figure out how the designer implemented the rollover effects in the PShop file.
Take a close look at the layers and layer groups.
Do any of them look like rollovers or does the name imply a rollover effect?
Take a close look at the layer styles.
If any are off, try turning them on (one at a time) and see if the effect looks like a rollover.
~codeDawg
The way this PSD is set up, it has four menu bars each with a different section being rolled over (It is not made up in the way were I can slice it up just based on hovered or not)
Here is a screenshot of what it looks like
<a href="" target="_blank"><img src="http://i197.photobucket.com/albums/aa312/ayetti957/Untitled-12.jpg" border="0" alt="Photobucket"></a>
Yup - time to start slicing.
It's also time to do a little forward thinking.
(Lots more to it than what I mention here, but this should get you going in the right direction.)
For a static html site:
Change the text for the buttons to what you need for your site.
Set up your slices for each "button".
one for "normal", one for "hover" and one for "current page".
For a non-static CMS type site you will have to slice things up differently.
(The menu is typically an unordered list and the menu text can be dynamically changed.)
CSS is used to "dress up" the menu and your slices will be used for background images.
~codeDawg
Perfect, thanks for helping man really appreciate it!
The site is static, I think I am going to modify the bars so that there is one that is all hovered buttons and one that is all non hovered and then slice those up.
How should I setup the code in dreamweaver so it will show the hovered vs non hovered?
You're welcome!
I'm using an old version of DW (CS3) and I've always used the DW supplied javascript code:
MM_swapImgRestore() MM_findObj(n, d) MM_swapImage() MM_preloadImages()
Here's a link to a tutorial on how to use them.
Be advised though, there may be a more current Dreamweaver-way of doing rollovers right now.
~codeDawg
North America
Europe, Middle East and Africa
Asia Pacific