Rich Backgrounds for Logos and Menus - Banners
(Page 2 of 4 )
The best way to learn is by doing, so we'll start off with an example site banner for a fictional MegaCorp.
The first step in creating this banner involved selecting the background image. Unlike an art director, who spends a lot of time hunting through stock images to find just the right picture, I spent a little bit of time hunting through my snapshots for a workable picture. That's important to keep in mind: my resources are limited, so I'll work with what I have. I also spend a lot of time with my digital camera and before that, a cheap film camera, taking pictures of things that I thought looked interesting. None of these pictures are professional grade; they're just pictures that tried to capture what I want looking for. In this example, I pulled out a snapshot from a trip to Lake Michigan:
Even that image was slightly retouched. The image had color shifted over the years, owing to cheap processing and questionable film handling on my part. I used the GIMP's automatic normalizing features to correct the color, then did a little fine tuning with the image brightness to get something that looked right. I also shrank the image to a workable size, which helped to hide film grain and scanning artifacts.
Now that I have my basic image, it's time to crop it. For a banner I have a desired size, in my case about 800 pixels across and 150 pixels high. The size you choose will depend a lot on your design. 150 pixels seems pretty high and will tend to dominate the page on smaller screens. That's perfectly fine though, since I want to convey the fact that MegaCorp is a dominating power. In this image it was fairly obvious to me that the horizon was probably the most interesting part of the image and the most appropriate to what I was trying to do. I did draw my cropping rectangle to the size I wanted though and moved it around a bit, playing with different sizes, to see what would work the best. The final cropped image looked like this:
Right away I can see this particular part of the image has a strong color bias toward the reds, giving a purple cast to the clouds. Since that may be a pain in the tail later on, I make sure to keep the photograph as the background, and the other items I'll be adding will become separate layers. If you aren't accustomed to using layers in your images, now is the time to start. They're a major life saver when you are combining several separate parts into a whole.
Now we need to add our text to the banner. MegaCorp's logo should be in a strong orange, the company color. It also stands out nicely against the blue water. I chose a very simple font to convey the company's monolithic nature, and also to improve readability. Because the large company name appears both above and below the horizon, I also highlighted it with the GIMP's Xach Effect, which highlights a selection (in this case text) using both a drop shadow and a white mask. For the company motto, "Looming on Your Horizon," I didn't need to use any kind of highlighting effect because the orange letters already stand out clearly on the blue background. The results, after adding the text, look like this:
This looks pretty good, but after adding the orange text, I find the purple clouds both annoying and distracting. This is where my earlier insistence upon multiple layers pays off because I can work on just a portion of the background layer. I pull out one of my favorite tricks here: desaturation of all or part of an image. Desaturation removes all of the color from an image and leaves only the information about light and dark. That's pretty much perfect for our sky here because your brain tends to remember clouds as gray and white, and the gray sky behind isn't distracting to the eye.
The final banner looks like this:
The gray sky only serves to increase the brightness of the water and the orange logo text. Now with this as the banner on your web site everybody is going to remember MegaCorp.
Next: The Menu >>
More Web Authoring Articles
More By Clay Dowling
