Rich Backgrounds for Logos and Menus - The Menu
(Page 3 of 4 )
Now that we have a banner, we need to create menus. Many of the same techniques that served us well for the banner will serve for the menu. There are a couple of extra considerations to keep in mind though. The most important is that a menu repeats. This means that any background image must either be tilable, if it is to be repeated for each menu item, or a single background image must be used for the whole menu.
For the background image, I selected this shot of wet sand that I took right after a rain storm (only a small segment is shown, since it's all much the same):
I'm intending this menu to be on the left hand side of the page with the menu items arranged vertically. 200 pixels makes a pretty good width, so I cut out a 200 pixel wide section on the left hand side. Since one section of sand is pretty much like any other, I'm just going to repeat the same bit of sand for each menu item. There is a very faint pattern which emerges, but it's not too distracting and doesn't looked particularly tiled. If you're a real stickler though, or you choose a background that doesn't tile smoothly, you can select an image the full height of your source image. That's how I started out with this project.
Now I want some nice looking details to make my menu pop a little. By playing around with my plugins, I discover a nice rounded corner plugin that takes my image, cuts some nice round corners into it, and adds a drop shadow:
I experimented with that quite a bit, and it made a really excellent menu, with no risk of tiling effects. It might look even nicer with some strongly textured material such as raw silk or leather. Sand is what we have at present though, so sand is what we're going to use.
Next: Adjusting the Menu Background >>
More Web Authoring Articles
More By Clay Dowling
