Home arrow Web Authoring arrow Rich Backgrounds for Logos and Menus

Rich Backgrounds for Logos and Menus

The average Joe can give his site or application a little professional polish using photos he takes himself and a few simple design techniques. Rich banners and menu backgrounds are easy to design into your site and don't require purchasing anything you don't probably already have for your computer.

Author Info:
By: Clay Dowling
Rating: 3 stars3 stars3 stars3 stars3 stars / 28
August 31, 2004
  1. · Rich Backgrounds for Logos and Menus
  2. · Banners
  3. · The Menu
  4. · Adjusting the Menu Background

print this article

Rich Backgrounds for Logos and Menus
(Page 1 of 4 )

As a web application developer, I generally find that I'm responsible for not only the web application but the appearance of the public side of the site, even if the project theoretically has a designer. I developed these design skills as a defense against blocky, bland sites and applications that turn prospects into other people's customers. If a programmer like me can learn these tricks, then nearly anyone can.

My basic technique is to start with a photograph for the background, perform some alterations to adapt it to my needs, then composite the altered background with foreground text and any foreground images I might want. I discuss the details of each step below.

Getting Images

I start with a background photograph. The reason is fairly simple: shooting a photograph is a matter of a few minutes, while drawing something suitable will take hours. The photograph will also look considerably better than anything I'm likely to draw.

I looked into using commercial photographs from art download sites, but I could never find anything that struck my fancy. What I turned to were photographs that I had taken myself. Because I had taken them, they all matched up with something that interested me. For your images, scrounge around in your snapshots, or if you've got a digital camera, find something remotely interesting looking and take a quick picture. Try to get several pictures to choose from, because what looks right at the time might not look right when you get back home.

The images that work best for backgrounds are going to be a matter of personal preference, but generally landscape images work the best. I've also had very good luck with photographing surfaces that had an interesting texture or pattern. If you're trying to capture texture, lighting is key. The more closely parallel your main light source is to the surface that you're photographing, the more the texture will be highlighted. The point is to cast shadows of the texture, because that's what's going to show up on camera.

The really important thing is not to spend too much time worrying about getting just the right picture. Professional graphic artists and art directors agonize about such things. That's what they're paid to do. You almost certainly have something better to be doing, like producing a website.


Here's where you're going to do exactly what the professionals do. Professionals only use the part of an image that interests them.  You're going to crop this image to the right size, and use only the portion that is interesting and appropriate to your purpose.

When photographers are cropping a picture, they frequently block off bits they don't want with pieces of paper. On the computer you can do the same thing by drawing your crop rectangle with your cropping tool, then dragging the frame around until you like the bit that it's displaying. You may have to experiment with size a little bit, but you'll come up with something appropriate.

blog comments powered by Disqus

- Top WordPress Plugins for Social Media
- How to Install WordPress on WAMPP
- More of the Best Wordpress Plugins for Comme...
- Top Wordpress Plugins to Fight Spam
- More of the top Drupal modules for SEO
- Top Drupal Modules for SEO
- More Top Wordpress Plugins for SEO
- Website Optimization Tips
- Backup and Restore a Drupal Website and Data...
- 5 Best Web Font Services
- Web Font Embedding Services
- Joomla Site Administration
- Create PHP Pages that Use WordPress Templates
- Top Joomla Extensions for Social Networking
- Drupal Modules for Site Navigation

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials