Rich Backgrounds for Logos and Menus - Adjusting the Menu Background
(Page 4 of 4 )
Even white lettering was a little hard to read on this sandy background, so I came up with a little cartouche to mark menu items. I took a smaller section of sand and copied it out to its own image. I applied my rounded corners plugin again to keep the shape in line with the shape of the menu. I removed the drop shadow and white background layers as being excess baggage. To make it stand out, and give my lettering something to be seen on, I added a color only layer above the sand and picked the dullest yellow-brown I had available. I merged all of the layers together so I would have a single object to work with.
A proper cartouche needs a good outline. I grabbed the magic selection tool and opened the selection range up so wide that all colored areas were selected. I then converted the selection to a path and selected the smallest fuzzy edged brush I had available. I stroked the path using the same color I had selected for the color layer, giving me a distinct but soft edged border around the cartouche. The final cartouche looked like this:
There are a couple of ways to get this cartouche onto the menu. It could be made a background to each menu item via cascading style sheets. This is your only option if you are using a single large image as your menu background. If you are using a repeating image behind each menu item, you can graft it on to the item background image, and use cascading style sheets to position the text properly over the cartouche. Because the sand tiles smoothly and because I wanted a flexibility in my menu height, I chose the later route. My individual item tiles now looked like this:
I combined this with trimmed bits from the top and bottom of my large rounded sand image. The cascading style sheet to display them looks like this:
div.menu {
width: 230px;
}
div.menu div.item {
width: 230px;
height: 50px;
text-align: center;
vertical-align: middle;
font-family: verdana, sans-serif;
font-size: 12pt;
background-image: url(sand-shadow-item.jpg);
}
div.menu div.label {
background-image: url(sand-menu-top.jpg);
font-family: tahoma, sans-serif;
font-size: 18pt;
font-weight: bolder;
color: #ffcc33;
height: 30px;
width: 230px;
text-align: center;
}
div.menu div.bottom {
background-image: url(sand-bottom.jpg);
height: 45px;
width: 230px;
}
div.item div.text {
color: white;
width: 100%;
height: 100%;
padding-top: 15px;
text-align: center;
}
With that style sheet, our menu becomes a very short block of HTML:
<div class="menu"><div class="label">Menu</div>
<div class="item"><div class="text">Home</div></div>
<div class="item"><div class="text">Products</div></div>
<div class="item"><div class="text">About Us</div></div>
<div class="item"><div class="text">Contact</div></div>
<div class="bottom"> </div>
</div>
The combined images, style sheets and HTML yield up the following menu:
My favorite thing about this menu? I got the cool graphic menu, but I didn't have to create my text as images. That makes my site just a little more search engine friendly, and that makes me smile.
Conclusions
The two examples here have shown some relatively nice looking site graphics that were easy to create. A professional can probably do a lot better, but if you're reading this, chances are that you're not a professional designer. For a developer or average Joe building a site, these are a huge improvement over bland, blocky menus.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
