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

  • Thread starter Thread starter Dave Ritche
  • Start date Start date
  • Tags Tags
    Photoshop
Click For Summary

Discussion Overview

The discussion revolves around designing a navigation bar using Photoshop, specifically focusing on how to assign links to menu items and the feasibility of creating a drop-down menu from the design. It includes aspects of web design and the integration of graphics into HTML and CSS.

Discussion Character

  • Technical explanation
  • Conceptual clarification
  • Homework-related

Main Points Raised

  • One participant expresses confusion about how links are assigned to menu items in a navigation bar designed in Photoshop.
  • Another participant clarifies that Photoshop is used for graphic design, and the images must be exported to formats like JPG, PNG, or GIF for web use.
  • It is suggested that HTML code is needed to reference the exported image files for each menu item.
  • There is a mention that creating a drop-down menu requires additional coding in CSS or JavaScript.
  • A later reply emphasizes that the Photoshop PSD file serves primarily as a reference for measurements and layout, and that images for drop-down menus must be prepared in advance for the stylesheet.

Areas of Agreement / Disagreement

Participants generally agree on the role of Photoshop in designing graphics for web elements, but there is no consensus on the specifics of implementing drop-down menus or the best practices for linking images in HTML.

Contextual Notes

Participants have not fully explored the technical details of CSS or JavaScript required for implementing the drop-down menu, nor have they resolved how to effectively manage the integration of images into the webpage.

Dave Ritche
Messages
70
Reaction score
6
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...
 
Computer science news on Phys.org
What do you mean by 'they assign links to menu items'?
Are you building a webpage?
 
Yes for my webpage...
 
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:
  • Like
Likes   Reactions: Dave Ritche and Silicon Waffle
Dave Ritche said:
...
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.
 
  • Like
Likes   Reactions: Dave Ritche

Similar threads

  • · Replies 2 ·
Replies
2
Views
3K
  • · Replies 8 ·
Replies
8
Views
1K
  • · Replies 10 ·
Replies
10
Views
3K
Replies
81
Views
12K
  • · Replies 3 ·
Replies
3
Views
3K
  • Sticky
  • · Replies 13 ·
Replies
13
Views
8K
  • · Replies 21 ·
Replies
21
Views
3K
  • · Replies 34 ·
2
Replies
34
Views
10K
  • · Replies 4 ·
Replies
4
Views
2K
  • · Replies 9 ·
Replies
9
Views
3K