Design Nav Bar with Photoshop: Home, About, Links Tutorial

[Dave Ritche]

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...

 

[DaveC426913]

What do you mean by 'they assign links to menu items'?
Are you building a webpage?

 

[Dave Ritche]

Yes for my webpage...

 

[DaveC426913]

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.

 

[Silicon Waffle]

...
Another thing that can we design a drop-down menu from this Photoshop desiginated Nav bar?
...

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.