How To 001 - Creative Use of Background Images - Radiant

The Radiant Blog

I would like to start this week by talking about one element that really can make all the difference for your site, which is the background. If you use the background creatively you can create something really unique.

There are two sites I have designed that have backgrounds that I think are particularly good examples for this “How To”. The first is the West London Alliance Youth site and the second is a nature-themed template entitled, Beautiful Nature.

What makes them good examples is the fact that I was able to create backgrounds that feel large but really are small/medium sized repeating backgrounds. You may have seen in the AM backend that we recommend you keep file sizes below 100kb. Using a repeating background is a great way to have a site that feels very full and designed and stays under that recommended size. I will admit that at times I cheat on this size by going over and so can you, just consider where you are and what kind of internet service is available to your audience. If you are a small rural church you need to keep your site size down for those on lower bandwidth. If you're in a city you can loosen the reigns on that standard because typically, your audience will have high-speed connections.

West London Alliance Youth background

Beautiful Nature background

The West London Alliance Youth site background image is only 66kb, while the Beautiful Nature background is 188kb. Why such a big file size difference for two graphics that aren't that different in height and width? The first background doesn't contain many colours and variations - it is mainly black and grey whereas the second background has many variations in colour meaning the file has to store more information than the other.

Now I will run you through the steps that I would take to create one of these backgrounds.

  1. Create a new Adobe Photoshop document that is 1920 pixels wide by whatever height you want. The width 1920 is based on the largest screen resolution for common wide screen monitors. A pet peeve of mine is seeing sites with a large background that doesn't go edge to edge on a wide screen monitor. Designing at 1920 wide will ensure your site looks complete and full.
  2. Next I start putting guides on my page that will help me see the width of site proper (the actual real estate of the screen that will be devoted to the site content and functions. Let's say this site will be 900 pixels wide. First I place a vertical guide at the centre of my document then I will put a guide 450 pixels away from centre on both sides which defines a space of 900 pixels. Then I always put a horizontal guide at about 560 pixels from the top of the page which helps me remember where the viewable area is for the user on the “first fold” of the site (the area of the site that is immediately viewable for the user without scrolling).
  3. Beyond this, your design is up to you. However, let's look a little more closely at the Beautiful Nature example I provided. What makes this background special is how I created the illusion of columns by repeating the background vertically.
  4. The paper edges, texture, map and wood were all separate items that I “comped” together in Photoshop.
  5. Depending on the complexity of what your are trying to create, it can be a real labour of love. The nature background was pretty time consuming trying to make it seamless and feel like it isn't repeating at all. I wanted the paper rip to feel real and that wouldn't have been accomplished if I had just carelessly mirrored one side to the other or taken a short rip and repeated it many times. The key to this one was to make it long enough that the eye doesn't really catch the repeat at all. So I made the rip unbalanced and somewhat unpredictable despite the fact that it is indeed repeating.
  6. When I think my graphic is done I save out my JPG for the web and I upload it to the file manager and test it in the CMS and preview it on the web to see if I like what I have. If not I make adjustments and repeat the process of testing.

Things for you to take away:

  1. Good backgrounds aren't obviously repeating. If they are, they will be distracting.
  2. Use the repeating options creatively. You can repeat something vertically, horizontally or both.
  3. Backgrounds can be used to create column designs.
  4. You can forgive yourself for cheating on file size if your audience can handle the download time. (We're talking 2-3 seconds difference here)

Example of a bad background


Here is a sample of what I consider to be a bad repeating graphic. It's supposed to be knots in wood but it almost doesn't even look like that anymore because of the frequency. I think that is the essence of the rule that I am communicating. You can have a background made up of repeating geometrical shapes but when you get into textures of photographic objects you need to take care. The eye will always pick up on what is unnatural and focus on it. So if there is a large, repeating, unnatural background framing your site, you're not starting off on a good foot.