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

  • Thread starter Dave Ritche
  • Start date
  • Tags
    Photoshop
In summary, the conversation discusses designing a menu/nav bar using Photoshop for a webpage. It is explained that Photoshop only designs the graphics, and HTML code must be written to reference the individual image files. The possibility of creating a drop-down menu from the Photoshop designed nav bar is also mentioned, which would require the use of CSS or JavaScript. However, it is clarified that the Photoshop PSD file is only used for measurements and obtaining images for the menu is necessary.
  • #1
Dave Ritche
70
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
  • #2
What do you mean by 'they assign links to menu items'?
Are you building a webpage?
 
  • #3
Yes for my webpage...
 
  • #4
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 Dave Ritche and Silicon Waffle
  • #5
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 Dave Ritche

1. How do I create a nav bar using Photoshop?

To create a nav bar using Photoshop, you will need to first open the program and create a new document. Then, use the shape tool to create rectangles for each button in your nav bar. Next, use the text tool to add the text for each button, such as "Home", "About", and "Links". Finally, use the layer styles to customize the appearance of your nav bar.

2. How do I make my nav bar responsive?

To make your nav bar responsive, you will need to use the slice tool to divide your nav bar into sections. Then, you can use the "Save for Web" feature to export your nav bar as HTML and images. This will allow you to use CSS to make your nav bar responsive to different screen sizes.

3. How can I add hover effects to my nav bar buttons?

To add hover effects to your nav bar buttons, you can use the layer styles in Photoshop to add effects such as drop shadows or gradients. You can also use CSS to add additional hover effects, such as changing the color or size of the text when the cursor hovers over a button.

4. Can I use images instead of text for my nav bar buttons?

Yes, you can use images instead of text for your nav bar buttons. In Photoshop, you can use the "Place" command to insert images onto your nav bar buttons. Just make sure to use images that are appropriate in size and format for web use.

5. Is it possible to add a dropdown menu to my nav bar?

Yes, you can add a dropdown menu to your nav bar. In Photoshop, you can use the shape tool to create a rectangle for your dropdown menu and use the text tool to add the menu options. Then, you can use the layer styles to customize the appearance of your dropdown menu. In HTML and CSS, you can use the <ul> and <li> elements to create a dropdown menu and style it as desired.

Similar threads

How Can Eddy Current Drag Be Minimized in AC Generators?
    • DIY Projects
Replies
10
Views
2K
Design Fixed Nav Bar: Steps & Tips to Create One
    • Programming and Computer Science
Replies
8
Views
1K
Rant about working in the tutoring lab: How should I deal with this?
    • STEM Educators and Teaching
3
Replies
81
Views
4K
Four bar linkage odd behaviour? (Simscape Multibody)
    • Mechanical Engineering
Replies
3
Views
2K
  • Sticky
Getting Started With Computers and Programming
    • Programming and Computer Science
Replies
13
Views
4K
Applied A question about mathematics textbooks for physicists
    • Science and Math Textbooks
Replies
28
Views
2K
Current and Future AI Threats to Humanity and the Human Response
    • Computing and Technology
Replies
10
Views
2K
Starfield: New First-Person Epic Role-Playing Game by BGS
    • General Discussion
Replies
9
Views
972
Winding Direction Consideration (Proper Winding)
    • Electrical Engineering
Replies
6
Views
2K
Certificate program in IC design or Master's in IC design?
    • STEM Academic Advising
Replies
4
Views
2K

Hot Threads

Recent Insights

Back
Top