Skip navigation
Currently Being Moderated

How to use PSD as Nav bar

Apr 22, 2012 3:36 PM

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

  • Currently Being Moderated
    Apr 22, 2012 4:03 PM   in reply to Ayetti957

    Can you show us the menu you're hoping the use?





    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists

    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 6:14 PM   in reply to Ayetti957

    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.



    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 7:54 PM   in reply to Ayetti957

    Ok - good, the layout presents the rollover effects for you.

    Did you check to see if any slices are already in place?



    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 8:52 PM   in reply to Ayetti957

    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.



    Mark as:
  • Currently Being Moderated
    Apr 22, 2012 10:18 PM   in reply to Ayetti957

    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.



    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points