Creating and Exporting Web Navigation Bar with Slices

We start with a blank canvas. In this tutorial, we will be using a small canvas to demonstrate just the navigation bar, but in a real world example, you'll probably design the whole website in PhotoShop on a larger canvas.

The first thing we will do is to outline our nav bar. Make a selection like so:

Then goto Select > Modify > Smooth, and choose around 5px. This will give us a nice rounded selection:

Next, create a new layer and fill with the color of your choice - or a gradient. A nice gradient to use would be something like this:

Next, rename this layer navbg, and create a new layer. With the selection still around the navbar, right-click it with the selection tool and choose stroke, about 2px, doesn't matter what color - we will change it with layer styles. This should create a thin line border around the navbar, like so:

Now open up Layer Styles and choose Gradient Overlay. Perhaps something like this:

Rename the new layer navborder. It should now look something like this:

Now we can add text for our buttons. Each button should be on its own layer:

Now to get them lined up, we can Ctrl-click the navbg layer to make a selection, then choose the Move tool (V). Now select all text layers by Ctrl-clicking each one, and then on the Move toolbar options, select Align Vertical Centers and Distribute Horizontal Centers. We should have the following:

You'll notice that the Blog is too high because of the letter g. We can fix this by Ctrl-clicking the Home layer, and then select the Blog layer. Then using the Move tool again, choose the option Align Top Edges:

Another effect we can add to the bar is to Ctrl-click the navbg again and then select the navborder layer. Choose the brush tool change opacity of the brush to 50% and size to around 3px. Make vertical lines between your buttons. Because we are painting on the border layer, our brush strokes should take the layer style of this layer also, looking like this:

We can also add Layer Styles to the text to make them look a bit fancier:

Next, choose the Slice tool () and make selections around our buttons, like so:

We made the slices around our buttons (in blue), and PhotoShop fills in the gaps. Now we can goto File > Save for Web & Devices. If you then click the Save button, you will be able to change the Save as type to HTML and Images. This will save each slice as its own image and generate the HTML for you. If you just want the images split up and you're going to implement them into HTML yourself, you can choose Images Only. Furthermore, before you click the Save button, you can click on each slice in the preview and choose the filetype and compression settings for each slice.