Creating a Banner Image

I’ll take you through the steps I followed in creating the poinsetta banner image and explain how I chose the colours for the ‘Atypical Christmas’ WordPress Theme.

The only tool I used was The Gimp. I edited the Cascading Style Sheet using the WordPress admin panel and edited the theme ‘live’ (look under Presentation->Theme Editor->Stylesheet).

Step #1:

I chose the image. This is the what the original image looked like. If you would like to follow the tutorial, you can view the image in our gallery you should be able to save the image to your computer.

Step #2:

If you have a newer version of Windows, you should be able to right click on the image in Windows Explorer and Open With… gimp-win-remote. This will open the image in GIMP. If you do not have that option on your context menu, then you can open GIMP and open the image using Open on the File menu. Unless you have a monitor with a much larger resolution than mine, GIMP will set the zoom on the image to 50 or 66%. It will look something like this:

A quick note I’ll make here is that if you make a mistake in GIMP, it is no big deal. You can back out of any operation by pressing Ctrl-Z (or using undo on the Edit menu).

Step #3:

Notice that there is a low spot of the background in the top right of the red poinsetta and high point in the background where the poinsettas come together at the bottom. To maximize the area of the photo available to be included in the banner, it would be nice if we could crop a rectangle out of image on an angle. GIMP doesn’t allow us to do that. BUT, it does allow us to rotate the image. So, that’s what I did. I rotated a -10 degrees. You can find rotate under the Tools menu (Tools->Transform Tools->Rotate). The resultant image looked like this:

The checkerboard looking area in the top left corner is the area of the new image which is transparent. This is because the original image was rotated off of that area.

Step #4:

Chose the top left corner of the portion of the image that you want to be your banner image. The point I selected is shown with the white diamond in the red poinsetta in the image above. You can see it’s position in the bottom left corner of the screen shot. It was 220 pixels from the left of the picture and 400 from the top.

To make that point the top left of the image, I resized the image canvas under the Image menu (Image->Canvas Size…). Here you have to do a bit of math. The original canvas is 1600 pixels wide by 1200 high. I wanted to crop 400 off the top and 220 off the left. So, the new canvas width is 1600 – 220 = 1380 and the new height is 1200 – 400 = 800.

Once in the canvas size dialog, the first thing to do is click on the button that looks like it has 3 links of a chain on it. That button locks and unlocks the maintain aspect ratio option. The aspect ratio is the ratio of the width to the height. If the aspect ratio is locked then the new size of the canvas must have the same ratio as the original canvas size (4/3). Since the final size of the canvas from this operation is not going to be 4/3 then we have to unlock the ratio.

With the aspect ratio unlocked enter the new width in the X (1380) and Y (800). Below those 2 settings are the offset of the X and Y. You can use these to position the top left corner of the new canvas. To move into the image use negative values for the X and Y of the offset. Enter the new X (-220) and Y (-400) offset. The canvas size dialog has a preview area which will show the resulting canvas using a thin rectangular line.

Complete the operation by clicking the Resize button. The result looked something like this:

Step #5:

In the above image, there is the checked area in the bottom right of the image. It is transparent for the same reason as the top left was earlier in the tutorial.

If you look toward the right of the image, I’ve marked the bottom right corner of the area that I wanted to include in the banner with a black diamond. This time the canvas resize is much easier because I wanted the finished canvas to come from the top left of the image. As it turns out, the banner size is 1250 pixels wide and 250 high.

Go back into the canvas resize option, unlock the aspect ratio and enter the new canvas size X (1250) and Y(250). Do not enter anything in the offset X and Y. Just click the resize button.

The resultant image looked something like this:

Step #6:

The last thing I did with the image is resize it. I wanted the banner to be 200 pixels high. I found that option under the image menu (Image->Scale image). To produce the image below, I changed the Y size to 200 pixels. GIMP automatically changed the X to 1000 pixels (because the aspect ratio is locked). In the banner at the top of the page, I believe I unlocked the aspect ratio and just scaled the image in the Y direction to 200 pixels. This produced a longer banner image.

Step #7:

The last thing I did was choose colours to be applied to the style of the web page. I used GIMP to find those colours. GIMP has a colour picker tool. The button for it is shown here:

I’ve circled the areas of the image that I chose the colours from:

I spent 10 – 15 minutes picking colours until I found ones that I liked and went well together. The important thing to remember is that what brings a web page style together is to choose colours from the images that are shown on the page. If you have watched professionals in interior design shows, they almost always pick 2 or 3 items to choose their colour palette from.

That’s basically it.