// November 18th, 2008 // 2 Comments » // Digital Marketing, Web Design
One of the best ways to advertise online is to make banner ads. I’m going to show you how to create animated banner ads using Adobe Photoshop CS3. This is a tutorial based on part of the shortcourse I teach at the University of Bolton. I have made a banner ad to advertise the Photoshop Enhanced shortcourse. http://data.bolton.ac.uk/dan/banner this banner advert uses animation to get the message across. Initially we will create a static advert and later we will introduce some animation.
We will be creating a banner advert to advertise Open Days at the university, or alternatively if you have specific theme you want to try then please do that. http://data.bolton.ac.uk/dan/banneradvert.zip Download this file it has the associated files.
First, open Photoshop and make a new document ‘File/New’ or [CTRL + N]
468 pixels wide and 60 pixels high.
These dimensions are the traditional size for banner ads. I want a 1-pixel line running around the edge of the ad, so make a new layer ‘Layer/New’ or [Shift + CTRL + N] and select the Rectangular Marquee Tool [M]. Now drag over the whole document so that the entire banner ad is selected. Pick a nice foreground colour [I used black] and use Edit > Stroke. Use a width of 1 pixel and under Location select “Inside”. Rename this layer ‘outline’ and make sure it is on top of all the other layers that you will be creating.
The beginnings of a banner ad.
Next we want to make sure people know who the advert is about. So we will include a logo. At this point you can download a logo off the internet or use the university logo provided. Go to ‘File/Open’ and select ‘logo.jpg’. You will notice that the logo is far to big to fit on your banner. So if you go to ‘Image/Image Size’ and give it a height of 40 pixels. This will make it small enough to fit nicely.
Now using the move tool you can drag and drop the logo on to your Banner Advert. This will place the logo on a new layer on top of your outline layer.
Now we need to fill in the background. For this we are going to use a gradient fill. A gradient fill is created using the tool that sits with the paint bucket tool.
To do this;
- First we need a new layer to put the fill on, so go to ‘Layer/New/Layer’. There is also a little icon at the bottom of the layers palette that will create a new layer too.
- Select the Gradient tool (Sits with the Paint Bucket).
Now you will have a new set of options along the top options bar, that look like this.
From here you can select different preset gradients, or create your own. Please click on the gradient dropdown box, to see your options.
Please experiment with different gradients, you can move the little colour icons along the colour bar at the bottom. Try changing the Gradient Type, this will give you the option to randomise the style.
Once you are happy with your selection, click ‘OK’ and on your new layer you need to;
- Click and Hold your left button down, towards the left side of your canvas.
- Drag out a line and let go of the mouse button at the point at which you want the gradient to finish.
- You probably won’t get this the way you want it straight away, just click CNTRL Z to undo, then try again.
Now you will find that everything has disappeared. This is because your new layer is on top. Simply click and drag your new layer underneath the ‘outline’ layer. Also rename the layer ‘Gradient’.
Now you will notice that the logo has a white strip across the top of it, in order to delete the white strip we are going to use the Magic Wand.
When you click with the magic wand it automatically selects everything similar, you can change its tolerance on the top bar, ’0′ tolerance will select only the exact same colour as you clicked. ’10′ will select a few shades around it too. Zoom in on the logo first and then use the magic wand to select the white area, ’0′ tolerance is probably best to begin with.
Click delete, and you will see something similar to the above. Then you can use the wand to select the thin white line that is still there and delete that.
There will be bits of white left behind. To delete these we need to deselect, just click off the edge of your canvas to do this. Then you need to zoom in a lot more, and then use the Eraser tool to delete the last bit. Your Eraser tool needs to be set to 1 pixel in size, with 0% hardness.
When using the eraser you will notice that it gradually deletes the white, it actually brings in different shades of blue, so you can leave some of those in. Zoom back out again (CTRL -) to see how it looks. You may have to zoom in again to just tweak it a bit more until you are happy.
Now for some text. Initially we need to say ‘Open Days’. So simply select the Text tool, click towards the left of your canvas and type ‘Open Days’. It’s up to you which font, colour, and size you use. Just make sure you have space for some other smaller text.
With my text I have also used the extra font options which appear if you click the last icon on the font options bar across the top.
This gives you more control, and allows you to change the tracking, leading and style. I have change the AV or tracking to bring the letters closer together.
Now you can add the rest of the text yourselves, something similar to this;
Now we can also add some imagery to this, and I have saved some artwork in a Banner Advert folder. You can use this or go on the Internet and download something.
For this tutorial I will open PavedCircle.jpg, so go to ‘File/Open’ and select that file, or one of your own choosing. At this point you will have two windows open in Photoshop. Whilst working in Photoshop you can have virtually as many windows as you like open. This is useful when creating complex designs or images. So now using the move tool you can drag and drop the photograph on to your banner advert. If you use PavedCircle your image will look like this;
So currently your image is too big for the space, also you may not want to use all of it, so we are going to do 2 things which will help you with working with other images. First we will resize it.
- With the move tool selected go to ‘Edit/Free Transform’ then hoolding down shift, click and hold one corner of the image and drag inwards to make it smaller.
- Double Click in the middle to Apply the changes, and then select the Eraser tool.
- Make the brush size of the Eraser fairly big, say about 150px, and make sure the Hardness is very low.
- Now single click near the people in the image, but not to close because you will delete them.
- Keep single clicking until you are happy with the effect.
You will notice that in the image above I have dragged the ‘Everybody is Welcome’ text above the image layer, and also I have applied a drop shadow just to make it stand out. The final thing to do to this is to sharpen the people walking slightly. We do this with a ‘Filter’. With the image layer selected go to ‘Filter/Sharpen/Unsharp Mask’.
This is now a finished static Banner Advert, obviously there is a lot more you could do, apply more filters, effects on the text etc. And please do experiment. Finally we will run through saving it.
Simply go to ‘File/Save’ to save the original with all your layers intact. Then to save a flattened JPEG ready for use in a webpage go to ‘File/Save for Web and Devices’.
The default settings will usually be fine, just ensure it is set to JPG, and the quality is set to about 70%. If you click ’4up’ at the top of the window it will present you with a number of options.
Finally hit save, and place in a webpage in Dreamweaver to test it.
Now it’s Your Turn
Right time for you to pick another subject. You could be advertising a new film, a new album by your favourite artist, an event, anything that might need advertising. Now create your own Banner advert, it needs to contain all the elements we have been working on. You can try different shapes aswell if you so wish. For more examples of Banner Adverts, just type ‘banner adverts’ into Google Images.
http://images.google.co.uk/
