How to Make a Small Business Website Banner

The first step in creating a collage is to create your document, and then copy a series of images into it. (Click for larger image).

A custom banner image for a small business website or blog immediately sets your small business website design apart from the crowd. It’s not difficult to create your own, and it gives you an opportunity to showcase your small business products and services. Think of it as visual Web marketing.

In this column, I’ll show you how to create your own Web banner using Photoshop, Photoshop Elements or any other photo-editing program that supports layers.

Set Up the Document

Although a Web banner image is typically quite small, it’s a good idea to work on a larger document and then resize it when you’re done. Not only does this give you more image data to work with, but you can save a larger version of the project in case you need it for a future purpose such as a flyer or letterhead.

Your website design will dictate the banner size, so start by creating a new image that’s about four times the size of the banner you need to match the website design. For example, if you want your final image to be 720 x 120 you’ll need an image that’s 2880 x 480 pixels.

In a program like Photoshop Elements you can blend the layers by erasing unwanted parts with the Eraser tool. (Click for larger image).

Choose the Images

You’ll need around six images in the collage, so open eight or ten images to give yourself some choice. Include a mixture of subjects and detail; choose some close-up images and some shot from a longer distance so the image subjects vary in size.

Now flatten the images to a single layer by choosing Layer > Flatten Image.

Select the Image Pieces

Target the Rectangular Marquee tool and drag over an area of the first image that you want to use. Select more than you want of the image as you need — around 25 percent overlap between images so you can blend them together.

Choose Edit > Copy, then switch to your new empty image and choose Edit > Paste. You can now close the original image. In the banner image, press Ctrl + T then Ctrl + 0 (Command + T, Command + 0 on the Mac) and size the image to fit your banner.

Use the Move tool to move the image into place. It doesn’t matter if the image extends beyond the canvas. Repeat this process until you have filled the banner canvas with a series of overlapping images.

If you’re using Photoshop, you can use masks to blend the layers so the results can be edited in future. (Click for larger image).

Blend the Images

Look at the banner and think about how you might want the images to blend into each other. Then, starting on one side of the banner, select the Eraser tool and a soft or textured brush, and begin to erase around the edge of an image that overlaps another image to reveal detail in the layer below.

Work carefully to blend the images into each other — if you’re unsure how to do this, removing the background of an image so only the subject remains is a good start.

Masking in Photoshop

If you’re using Photoshop, you can use a mask instead of the eraser tool. Doing so will let you edit the blending later on — something you can’t do if you use the Eraser tool. In Photoshop, select the layer to “erase,” and click the Add Layer Mask icon at the foot of the layer palette to add the mask.

Target the mask, select a soft paintbrush and black paint and paint with black to hide the unwanted parts of the image. If you make a mistake, paint with white on the mask to undo the effect.

Save a full-size version of the image complete with layers so you can edit it later, and then save a flattened resized version for the Web. (Click for larger image).

Blending Workflow

Work across your banner blending the images into each other. You may need to rearrange the layers to change how they overlap. To do this, select a layer to move in the Layers palette and drag it to a new position in the layer stack.

Finishing Touches

To add text, click the topmost layer of the image and type the text. Add a contrasting drop shadow by choosing Layer > Layer Style and choose Drop Shadow to make the text easier to read.

When you’re done, save the document at its full size as a Photoshop .PSD format file — this saves your layer information. By doing this you can come back at a later date and make changes to the image if desired.

To use the banner on the Web, flatten the image by choosing Layers > Flatten Image. Choose Image > Image Size, and set the size for the final banner, such as 720 x 120, and save the image as a JPG file.

Once the banner is complete and saved you are ready to upload it to your server and incorporate it into your blog or small business website.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com