Step 4
We need to split the menu in pieces, one for each link. My menu is now about 320px high and I'm planning on having 5 links in the menu. I subtract 40 pixels and split the remaining 280px with 5. This gives me ~55 pixels of height for each button.
I will use the measure tool from the top of the menu and draw a 55px line. I then drag a guideline from the top ruler to the tip of the measure tool's line. Do the same with each button until you have all the guidelines where each button has its bottom.
Step 5
We now need to fill in the title of the link to each "button". Create a new layer for each button and type the text you want within the button. Choosing the same font as in your header will look better than if you use a different font. Using guidelines will help you position the text where you want it.
To add the effects we used in the header double-click the text-layer, double-click the text layer in the layers panel. Then select Styles at the top of the list on the left, then click the one we created earlier and click OK. Repeat with all the text layers in the menu. The font in the header is probably bigger than the font in the menu, so you may have to adjust the settings in the used effects to make it more readable.
Step 6
In this step we're going to slice the image into separate parts. Make sure View > Extras is ON (Ctrl+H to turn on/off).Lets start with the header. We want it to be one big image. Select the Slice Tool and drag a square around the header.
If Snap is ON it should snap right in at the guideline we made to show where the header ended. This will be slice number 01 - as illustrated by the number in the corner of the slice. Now move on to the menu: drag a square around the first button. From guideline to guideline. Do the same with all the buttons and the bottom part of the menu (the one with the rounded edge).
Notice that the empty area outside the menu and header has a grey background where the slice number is. This mean that it isn't defined as a slice. In this case it's nothing at all.
Step 7
We're almost done!
Click File > Save for web. Select the Optimized tab at the top of the new window that appears. This gives you a preview of how the images will look when they are saved as normal gif or jpg images. Select all the slices we created (hold Shift + left-click the slice), not the one in the middle tho, since we don't want it to be an image.
Select either jpeg or gif. Gif is much better than jpeg on large single-colored areas. Other than that there are pros and cons with the two extensions. Select the one you feel gives you the best balance between high quality and small filesize. Remember that there are still many people out there that don't have broadband. I managed to squeeze the total filesize to 17KB with the settings you can see on the screenshot.
When you've found a balance you're happy with click Save:
File name: whatever you want it to be. Keep it short and without spaces
Save as type: Images only
Settings: Default
Slices: Selected Slices.
Click save.
The files will now be put in an Images-folder in the location you chose to save it. The images is named [name]_[slice-number], for example "img_01.gif"
Now all you have to do is create a website layout, for example with tables, that is based on the sizes of the images you just created.
If you find it hard to get started you can download the complete project. It contains the Photoshop file, the saved images and a html file with the layout.
If you used this guide to make your own website, please let me know. I'd love to check out the results :)
