If you have followed along through Step 1, then you have the HorizMenu.psd file to continue with. To refresh your memory, we left off with our HorizMenu looking like this:
Now, you may be wondering why that extra space is there at the bottom. Why we didn’t simply crop all the bottom off. The answer is that we want to see where the sub-menu comes in. This could be positioned differently if we were using a repeatable background on the menu bar, but since we aren’t, and in this fixed width design the text is influenced by the menu and the background, we have to work with what we have and be precise.
Open up your HorizMenu.psd (if you don’t have this file, click here to get it).
Using your slice tool, create three box slices dividing up that menu, and a fourth that is the bottom area. If you simply create boxes around the menu items, the fourth area will create itself. Make sure you are precise, and as you can see I’ve tried to center the submenu in the ‘About’ area.
Now that you have the menu sliced, you can crop out that bottom area.
After you’ve cropped the HorizMenu.psd to consist of only the menu items, then go ahead and save the PSD.
From this point, we’re going to save the slices as individual files.
File -> Save For Web...
I suggest looking at the 2-Up or 4-Up tabs to really compare what you want to save your images as without sacrificing quality. I’ve chosen to save these as JPEG with 60 quality, as shown here:
Simply click on the area showing the one you like the most, then click the ‘Save’ button.
Another box will pop up as shown:
Make sure that your selections in the drop down boxes are saving the images only, and as slices.
When you have saved them, check in the area you saved them to. You should see a folder with three new image files, each numbered and prefaced by what ever you put in the File Name box (in my case, HorizMenu).
If you don’t have these three files, or think you might have messed up somewhere, you can download them here to follow along on the next step.
That’s enough for now, and thankfully we won’t be touching Photoshop for a little while at least. I know, I know, most people don’t think that people who code websites deal with the graphic art software – but they end up quickly disabused of that notion. Even if you aren’t a graphic artist, if you put sites together, you need to learn how to work with the kinds of files that a graphic artist provides to you. After who knows, after a while… you might find yourself creating mockups in Photoshop just to do random tutorials 😉
The next step is coming soon!
~Nicole
