One of my least favorite things in web design are all graphical css menus. I utterly despise them, and the reasons are endless.
- Depending on what is involved, they can be a real pain to make accessible at times.
- They tend to require a strong foundation in CSS or a significant learning curve.
- By their image based nature alone they are going to bloat the page size and drop loading speed.
- They most often are found attached to a design concept that is already heavily graphical and already has a huge loading time.
- I dislike dealing with designs whereby a client is so set on having a specific font that they are willing to sacrifice an extreme amount of loading time to have it.
These kind of things fall into my category of – ‘the prettiest websites no one ever saw’ (meaning that they are beautiful works of art, but they take so long to load that no one sticks around to see it).
All that aside – you might some day decide to make one for a client, and it is in your best interest to know how.
Herein, you’ll find Step 1 of a tutorial on exactly how I create graphical horizontal menus. People vary in methods, and hopefully you’ll find your own way to do it.
In fact, this tutorial is going to show you one of the worst kind of graphical horizontal menus. A ‘worst case scenario’ sort of tutorial. The menu we are dealing with will be:
- Used in a fixed width design.
- On a heavily graphical site.
- Mildly transparent to the background of the page.
- Include separate ‘on’ and ‘off’ rollover images on the main menu.
- Include a sub-menu that is also somewhat transparent.
- Include a sub-menu that is entirely graphical and has separate ‘on’ and ‘off’ rollover images.
- All custom fonts used.
- Important Note: The menus must be accessible. The images need to be background images. No Javascript for drop-downs.
- We’ll have to do a unique solution for IE6 and lower.
Sound like fun? Well, either way, let’s get going.
I created a little mockup in Photoshop of a menu design we’re going to use. I’m not going to teach you how to do the rest of the layout. Only the menu. You will need to have access to Photoshop or Gimp for this sort of project, or you will need to have all the individual images given to you by your client ahead of time. You can download the PSD of the mockup if you want to follow along.
Stop here and take a good look at the menu, then try to anticipate what elements might be problematic. It’s always a good idea when starting a new project to look for potential pitfalls so you can work out solutions ahead of time.
If you’re lucky, the graphic designer (or yourself) has labeled all the image layers in your graphics program really well. If you are making this yourself, you probably know how easy it is to get lost in your own design layers. If you get a poorly labeled one, go in and fix the labels so that it can be easily understood. You’ll save yourself time in the long run because good labeling is essential.
Okay, first things first – we have to get this menu ready to be used.
Go through your layers in Photoshop, and toggle the visibility (the eye graphic on/off) until all of your top level menu links are in the ‘off’ position.
Let’s select the menu portion of this design, like so:
Don’t worry about selecting the menu perfectly yet. With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a new untitled window popped up that just shows the menu area.
Now, grabbing your new Untitled window by the title bar, move it off to a corner for now, and bring the full design to the front by clicking on its title bar. We’re now going to go back to our layers and switch all of the menu names to ‘on’ instead of ‘off.’
With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a Second untitled window popped up that just shows the menu area.
At this point, you can close your large image PSD (for the time being at least) and work just on your pieces of the menu for a bit.
Stack your untitled images so that you can see them well. Then go to your first Untitled image (should be currently named Untitled-1), and try to carefully select only the green menu area rectangle. Then go to:
Image -> Crop
There is a crop tool, but I feel this method is a bit more forgiving. Work with whichever you are most comfortable. You may have to do a couple of passes at this to get it cropped perfectly. You want only the green leafy rectangle and the links on it for this one. We’ll do the second one a bit different, so don’t jump ahead 🙂
Go to Untitled-2, and select all but the bottom portion below the green horizontal bar. You want to still be able to see where the sub-menu needs to come in from.
Then crop the image just as you did the previous one, until your images look like this:
Right click on the title bar of the second image, and click on Image Size. Jot down the height in pixels for this image. In this example, the height is 58 pixels.
Then click on the first untitled window to select it, and do:
Image -> Canvas Size
This will bring up a pop-up window. Toggle the height and width to show the values in pixels, and in the box with arrows you want to click the middle arrow in the top row. That will pin the canvas up by the middle top. Now you want to add some canvas space, just enough for our second image. That means we need 58 extra pixels in height.
My Untitled-1 original is 46 pixels in height, so I want to change that number to 104 pixels. Then click OK.
Your canvas should be expanded now by that additional 58 pixels, and they should be only on the bottom portion. Now you can go ahead and select the entire of Untitled-2, then:
Edit -> Copy
Click on Untitled-1, and:
Edit -> Paste
Move your new section around in there until it’s just perfectly below the top one.
You can now close (don’t need to save) the Untitled-2. All we need now is the joined menu. Then go save that menu (as a PSD) with a name you can recognize. I’m very simply calling mine, HorizMenu.psd.
Alternately, you can download my HorizMenu.psd file.
If you’ve ever worked with combined graphics, you might have an idea where we’re going with this. Either way… that’s enough for one sitting.
~Nicole
