My hosting is with Site5!	Please visit my homepage!

 

---

 

This tutorial is going to teach you how to make a simple yet very stylish and effective banner for your websites.

 

Head over to http://images.google.com and search for the subject of the site you are making. For this example I am going to make a banner for my local golf club website which I am working on at the minute. I searched for “golf sunset.” You want a picture where one side of the picture is free of detail. For example this is no good:

This was the image I used - page 1 in google images:

Press “D” on your keyboard to reset the colours.

Open the image in your browser and copy and paste it over to Photoshop. Go to Image: Canvas Size and change it to about 800 wide to fit all screen resolutions. You should have this:

I can immediately see that my picture is much too big so if you need to, go to edit:transform:scale. Hold down shift on your keyboard and drag one of the corner handles inwards and position the picture at the top of the canvas.

Now select the area where the banner will be by using the retangular marquee tool and go to image:crop.

Then zoom in close to the side of the image with little detail (the bit you are going to drag out to make the rest of the banner) and select a small area the full height of the image:

Zoom out a little so you can see the whole canvas and go to edit:transform:scale. Drag the middle handle out so the small area stretches out across the canvas. Hit ctrl + D to deselect the image. (Don’t worry if the image looks bad now, we are going to improve it!)

Select the blur tool and change it to 40px diameter and Strength 100%. Drag your mouse over the places where the image doesn’t look natural, eg the horizontal lines and the place where the dragged out bit starts. You might also want to use the smudge tool at about 20% for a bit more blur - just take your time with it.

I still think the detail in my picture is a little too big so I am going to resize the image again. To do this I used edit:transform:scale, then cropped the image to the correct height. I also took advantage of the black bottom to the image, and dragged it down using a similar method as before. This is where the links for the site are going to be.

The right side of my image looks a bit plain so I am going to add something to it. Back to google images this time and I found a tree silhouette which I thought would look perfect. I copied and pasted it into a new canvas (Ctrl+n) and then went to the channels tab on the layers palette:

At the bottom of that screen, click the small circle (Load channel as selection). This is a better alternative to the magic wand if you have a plain background. It takes all the areas with any colour and makes a selection around them. Go back to the layers tab, and press delete. Click the small eye symbol to the left of the background tab, press Ctrl+D (deselect) and your image should look like this:

Restore (See below) you images if necessary so you can see both of them on screen – have the picture with your additional detail on it active and drag the layer on to the top of your original image:

The image is far too big so I simply went to image:edit:scale and resized it to fit.

The next step is to add some text to your banner. Use the text tool and click and type. I added text for the club information, and also some text for my links.

I then added separators between the links and that was it finished! I am still working on the site, but at the minute the design looks something like this …

So simple, but very effective for a small website – here’s another example – Using the same technique on a different image and colour scheme.

Please email your comments, and maybe even images you have made! If you need any help with the tutorial give me a shout as well!

Please visit my homepage!

If you liked this tutorial, please help me get my free ipod!! The site has given away millions of pounds of equipment, and is even one of the Good-Tutorials sponsors! You just have to take part in an offer – there are lots to choose from, then refer some people to do the same. Its an advertising scheme – the sponsors pay for the equipment and so it costs you nothing!

My hosting is with Site5!	Please visit my homepage!