How to Create a NAV Bar in Photoshop
When creating a new website it is important to have a web page layout that looks professional, especially if you want to get repeat visits. One aspect of a professional appearance is the design of your navigation bar. Every website has to have a way for visitors to move around the pages of the site, and the navigation, or NAV, bar serves this purpose. Navigation bars are usually divided into clickable buttons like "Home" and "About Us." When clicked on, these buttons take visitors to the requested page. Many people turn to others to create all aspects of their website, but if you have access to Photoshop you can create these navigation buttons yourself.
Other People Are Reading
Instructions
-
-
1
Sketch out your ideas for your NAV bar on paper before you start working in Photoshop. You will need one navigation button for each major subpage that your home page should link to. Decide what kind of appearance you want the button to have. For example, you might want beveled buttons that are slightly transparent against the web page background.
-
2
Open Photoshop. Select "File" and click "New." In the new document dialog that opens, enter the width and height in pixels that you want for your NAV bar. Make the resolution 72 and the background "Transparent." Click "OK."
-
-
3
Click on the "New Layer" icon at the bottom of the "Layers" panel. Select the "Rectangular Marquee" tool and use it to create the area on the canvas where you want the navigation button (usually this is the Home button).
-
4
Change the "Foreground" color at the bottom of the toolbar to the color you want for the first button. Select the "Paint Bucket" tool and fill the selection with the chosen color.
-
5
Click on the "FX" icon at the bottom of the "Layers" panel. From the options, select "Bevel and Emboss." In the dialog box, choose the bevel style and size you want to use and click "OK."
-
6
Select the layer in the "Layers" panel and reduce the opacity to 70 percent.
-
7
Select the "Text" tool and type in your text for the button.
-
8
Repeat Steps 3 through 7 to create all the navigation buttons for your NAV bar.
-
9
Select the "Slice" tool and use it to create slices around the buttons. Right-click on each slice and name it.
-
10
Select "File" and click "Save for Web or Devices." In the dialog box, choose GIF as the file type, click "Save," name your file and click "Save." You will now have a folder containing the slices as separate images that you can load into your web page editor and add the subpage hyperlinks to.
-
1
