How to Create & Export a Web Navigation Bar With Slices

Website navigation makes it easier for visitors to get around your site.

Many Web designs are done in a single large graphic. In order for the finished website to load faster and perform specific functions, however, the design must be sliced into smaller images. Using Adobe Photoshop, you can design a navigation bar and export the buttons as slices. The program allows complete customization for file type and design that make it easy to fit your navigation bar with any Web design scheme.

Instructions

1. Sketch the layout of your navigation bar. Determine the pixel dimensions of the bar based on the size of your Web design and make a note of them on your drawing. Write down the links that you want to include; stick with no more than five options to avoid overwhelming visitors with choices. Include any design details like button separators, colors, font specifications or graphics.

2. Open Adobe Photoshop and create a document by selecting "New" from the File menu. Change the width and height measurements to pixels and change the dimensions to match the size of your navigation bar. If you don't know the pixel size, set the dimensions in inches first, change to pixels, and round off the numbers for easy slicing down the road. Choose a resolution of 72 dpi to match the resolution of computer monitors and set the color mode to RGB. Save the file to your computer.

3. Click on the color swatch at the bottom of the toolbar and choose the background color for the navigation bar. Choose the paint bucket tool from the toolbar and click on your document to fill the background with color.

4. Create guides to separate the buttons. If your ruler bars are not showing at the top and left side of the document, show them by choosing "Rulers" from the View menu. Click on the ruler and drag out to the document to create a guide. Repeat with additional guides until you have created the sections for each button.

5. Select the line tool from the toolbar. Click on the color swatch and choose the line color that will separate the buttons. Following the guides, make the button separators by clicking at the top of the document and dragging it to the bottom along the guide line; for a vertical navigation bar, click at the right and drag to the left. Hold down the shift key as you drag to keep the line straight.

6. Choose the text tool from the toolbar. Open the text window by choosing "Character " from the Window menu. Select the fonts, colors and text size. Click on the document and drag to create a text box. Type the name of your first page into the box; repeat for the rest of the buttons.

7. Select the Slice tool from the toolbar. Click and drag on your document to create a slice, which appears as a rectangle. Follow the guides for even lines. Make one slice for each button.

8. Click on the File menu and choose "Save for Web." In the window that appears, hold down the Shift key and click on all of your button slices to select them. Choose your desired file type from the drop-down menu. Hit the "Save" button. In the pop-up box, choose "Images Only" from the Format drop-down box and "Selected Slices" from the Slices drop-down box. Select a destination on your computer and hit the "Save" button. The slices will appear as individual images in your designated folder.

References

• Media College: Photoshop Slice Tool
• Adobe: Slice a Web Page