• Starting Photoshop 5.5.
• The Workspace
• What is a Banner?
• Creating a new document.
• Applying colour to your background.
• Applying text to your banner.
• Saving your banner for the web.

Close the two windows that contain History/Actions/Brushes and Navigator/Info/Options, we shall not be needing them for this tutorial.

Your workspace should now look like this.

Along the top is the Menu Bar, down the left hand side is the Tool Bar, on the right is the Layers Pallet, along the bottom is the Status Bar.

What is a Banner?

A Banner is an image or graphic that is found at the top of web pages, it displays the title, name and/or logo for that page or pages, it is often the first thing a viewer sees when they arrive at the web page so it should be attractive informative and help to convince the onlooker to stay on your site.

Creating a new document.

In Photoshop go to File>New. The New Document window appears.

Type the name of your banner in the 'Name:' field (you can leave it 'untitled' for the moment if you wish).

Decide on a size for your banner (or use the sizes shown here).

Set the Resolution and Mode as shown here.Click> OK. Your New Document appears in the Workspace.

Your workspace should now appear like this

.

>Tip< Save your file at the very start, and at regular points during the design process, if you have a disaster or you are just experimenting and lose track of what you are doing' you can go to File >Revert, to put you back to the point where you last saved the document. To save your file go to File>SaveAs, chose where you want to save the file to and make sure you save the file as a PSD (photoshop document).

Go to View>Actual Pixels. To see your banner at its actual size, you may need to stretch the frame to allow it to fit.

In the Layers window you will now see a highlighted section called Background, this represents the Active layer in your document, only active layers can be worked on.

Applying colour to your background.

Select the Paint Bucket () icon from the Tool Bar.

Now click on the Colour Picker in the Tool Bar and choose
a colour that you would like for your project.

Move the Paint Bucket tool over your banner and click to apply the colour.

>Note< The background colour can be changed later, so you don't need to be to fussy about your choice of colour just yet.

Applying text to your banner.

Select the Type Tool () icon from the Tool Bar and click on your banner.

The Type Tool window appears.

Type in what you would like to see written on your banner and then highlight it.

>Note< You should now be able to see the type on your banner, if you can't, its because it is the same colour as the background. So change the colour of the type in the Type Tool window.

When you have text on your banner, close the Type Tool window.

Your work space should now appear similar to this.

Click on the Move Tool () in the Tool Bar, place the cursor over the text in your banner, click and move the type. Use this to position the text where you want it.

>Note< the layer you want to move must be active.

Notice that you now have an extra layer in the Layer Pallet with your type in it, the blue layer is the Active layer that can be worked on (in this case its the background). To work on the text layer just click it to turn it blue in the Layers Pallet.

If you wish to edit the size, colour or change the font of your text, double click the text layer to bring up the Type Tool window and edit the text from there.

Experiment with fonts, sizes and colours on different colored backgrounds, try adding more text layers and overlapping the text on the banner by moving them around. Opacity of layers can also be controlled to allow text to become transparent, adjust the Opacity from this pallet using the slider in the Opacity drop-down menu.

When you are happy with your design move on to the next step.

Saving your banner for the web.

Now you are happy with your design its time to save it for use on the web.

>Note< Images that are to be used on the www need to be of a small file size in order for them to download and upload quickly, files are made smaller by compressing them, but compression causes them to lose some quality. It therefore becomes a trade off between speed and quality so the design of the whole web page should be taken into consideration, if you use lots of images on your page you need to think hard about compressing them, if you only have a couple of images on your page you may be able to get away with better quality images that take a little longer to download.

Go to File>Save for Web, The Save for Web Window appears.

>Note< Ensure the 2-Up tab is checked to enable views of both the original and compressed versions of the banner.

In each of the windows there is information about the size of the document, one is the original the other is the compressed version, this allows you to see any deterioration in image quality as you compress it.

Adjust the settings as shown here first.
Click the drop down menu In the Colors field and try changing the number of colours, each time you change it, look at your image information and the quality of your image.

Example: This tells us that we have a GIF file that is using 8 colors,
the size of the file is 10.22K and it will take 5 seconds to download using a 28.8Kbps modem.

When deciding on how much to compress your image you should consider how long the viewer (or yourself) would be prepared to wait for the image to appear on the web page, aim for a maximum download time of around 8-10 seconds at the most, any longer than this and it is likely that the viewer will leave your web page.

When you are satisfied with your image click OK and save the file.