Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Photoshop nav bar

  1. Jan 14, 2016 #1
    Hello everyone!
    I was watching a video on youtube on designing a menu/nav bar and i digested it so well but i couldn't understand how they assign links to the different menu items like "Home" or "About" etc...
    Another thing that can we design a drop-down menu from this Photoshop desiginated Nav bar?
    Thanks in advance...
  2. jcsd
  3. Jan 14, 2016 #2


    User Avatar
    Gold Member

    What do you mean by 'they assign links to menu items'?
    Are you building a webpage?
  4. Jan 14, 2016 #3
    Yes for my webpage...
  5. Jan 14, 2016 #4


    User Avatar
    Gold Member

    OK. Thought so.
    So, PhotoShop only designs the graphics. You export the buttons and menu items individually as JPGs, PNGs or GIFs. Then you must write HTML code that will reference those individual image files.

    <img id="home" src="myImages/home_button.gif"/>
    <img id="about" src="myIimages/about_button.gif"/>

    As for the dropdown menu, that requires writing either CSS or JavaScript or both.
    Last edited: Jan 14, 2016
  6. Jan 15, 2016 #5
    The photoshop psd file is only used as an image for you to make a correct measurement of every object to be built on your page e.g its margins, paddings, width and height etc. So with drop-down menus, you have to obtain the images of them when the mouse is over the main nav item in advance to create your menu stylesheet.
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Similar Discussions: Photoshop nav bar
  1. Photoshop metadata (Replies: 6)

  2. Photoshop help (Replies: 4)