Creating a banner image for a website in Photoshop

Tutorial 1

Creating a banner image for a website in Photoshop CS4.

A Banner image for a website usually conforms to a specific width and height unless it has a repetitive structure or it fades into the natural background colour of the website. Creating a banner of a set size can be tricky, but with Photoshop you can get the perfect banner quickly and easily everytime.

For this example we’re going to make a "crop" from an image that we’ve found online. It will become the header for the whole site. Below you can see the starting image:

The crop tool can be found on the left side of the screen usually, it looks like this:

  Select the crop tool from the tool palette and look just below the menubar at the top of the window for the crop properties. You should see something similar to the screen below:

We’ll need to set the crop (the section we want to cut out) to the dimensions we are looking to fill on the header for our site. For this example we’re aiming for a header with a width of 850 pixels and 200 pixels high.

Now that we have specified the dimensions we need, we can click and drag a crop across the section of the image we’d like to fit in the space we have available for our header. When you’ve identified the section of the image you’d like to include in your header, draw a box around it with the crop tool. Start at the top left and drag down to the bottom right. You’ll notice the bounding box is constrained, this is to ensure that the box can be resized precisely to the dimensions you’ve specified.

You can confirm if you’re happy with the crop or whether you would like to try again by accepting or rejecting it. The toolbar to the right of the Crop properties will display Icons that look like this:

After accepting your crop you should have a perfectly sized crop ready to be used with your header image.

Now lets add some text indicating the name of the company and the general nature of the website

1. The text tool from the toolbar.
2. The font you would like to use.
3. The font weight or style to apply.
4. The point size of the font to use.
5. The colour to apply to the font.

Enter some text using these tools and save the image. Below is our first version:

Now that you have the perfect crop for the website, it’s time to take into consideration the size of the image. Presently all web connections are not equal, so a huge image is going to make the site unattractive to those with slower connection who will have to wait whilst it downloads. There are also considerations with Search Engine Optimisation now that Google has determined that page load speed is a multiplier in their page ranking algorithm. There are also bandwidth considerations when it comes to your hosting plan, a lot of visitors viewing these images could well take your site down.

So, what do we do? We optimise!

Thankfully this is very straightforward in Photoshop CS4.

Optimising images for the Web

To store the image in a web-ready format, you’ll need to make use of Photoshop’s "Save for Web & Devices…" option. You can access this through the File menu, just like the other Save options.

Below you can see the optimisation dialog. Ensure that you’re viewing with the "2 up"view selected and if necessary zoom in a little (bottom left of dialog) to observe the effects discussed below:

1. JPEG artifacts can be seen in the image – this is where the compression of the image has led to distortion.
2. The Quality of the JPEG can be adjusted to balance between quality and the size of the image.

There are a number of preset image types (and levels) you can experiment with. Each of the options will display the original on the top and the image as it will become when saved on the bottom. By comparing the two and experimenting with the options available in the optimisation dialog, you should get a well balanced outcome for your image. The size of the image before and after are at the bottom left of the preview screens.

When you’re happy with your quality/speed/size optimisation, click save and store the image in your Dreamweaver site for ease of inclusion as the header.