• Starting Photoshop 5.5.
• The Workspace.
• What is a Rollover Button?.
• Creating the button states.
• Applying colour to the button states.
• Applying text to your button.
• Saving your button for the web.
• Applying your button in Dreamweaver.

Starting Photoshop 5.5.

To find and open Adobe Photoshop 5.5 go to: Computing Services Delivery> Applications> Photoshop 5.5> then double click the Photoshop (eye) icon.

The Workspace.

When you start Photoshop you will see the main Workspace window and several smaller Windows.

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 Rollover Button?

Rollover buttons are normally found in menus or navigation bars, they consist of two images, as the mouse passes over the image it is replaced or swapped by another. This action normally indicates that the button provides a 'link' to another page or to other information somewhere on the website, in order to create a rollover you need two images that represent each stage of the rollover animation, they are 'mouse over' state and a 'mouse out' state.

The finished button appears as:

Creating the button states.

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

 

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

Decide on a size for your button (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>Save As, 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 button at its actual size, you may need to stretch the frame to allow it to fit.

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

You now need to create two layers to provide each of the rollover button states.

Right click the mouse in the active Background layer and chose 'Duplicate Layer' and name it 'Over'.

Repeat this action again but call the new layer 'Out'.

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 the 'Out' state of the button.

 

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

>Note< You will not be able to see the colour because the 'Over' layer is covering it, but you will notice that the thumbnail in the layers pallet shows that it is there, click on the eye next to the 'Over' layer to hide it if you want to see it in your workspace.

Now select the 'Over' layer in the layers pallet and apply a different shade of the same colour (or a totally different colour) and apply it in the same way as before.

 

Your layers pallet should now appear something like this, it shows the colour for the 'mouse over' state and a the colour for the 'mouse out' state.

All of the layers are visible so you will only be able to see the 'Over' colour in the workspace, if you click the eye on and off to enable you show and hide the 'Over' layer, it will give you an idea of how your button will look in operation so fine tune your colour choice now.

 

Applying text to your button

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

The Type Tool window appears.

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

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

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

You should now have a workspace similar to this.

 

Click on the Move Tool () in the Tool Bar, place the cursor over the text in your button, and click to move the type. Use this to position the text where you want it. Use the up/down/left/right keys on your keyboard for more accuracy.

>Note< Remember that the type layer must be active in order for it to be moved.

 

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. 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 again and edit the text from there.

Experiment with fonts, sizes and colours, when you are happy with your design move on to the next step.

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.

In order to create rollover buttons using Dreamweaver you need to save the two button states as two different images with different file names.

State 1: Set the layers pallet so the text and the 'Over' colour are visible in the workspace.

 

 

The layers pallet should appear like this.

Only the top two layers will be visible 'About Us' and 'Over', this will give us the 'Over' button state.

 

 

 

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.

>Important< Name your two files and add the state it refers to at the end e.g.: 'about us button over' and 'about us button out', it makes then easier to identify and find them later.

State 2: Set the layers pallet so the text and the 'Out' colour are visible in the workspace.

 

 

The layers pallet should appear like this.

Only the 'About Us' and the 'Out' layers will be visible in the workspace this will give us the 'Out' button state.

Now save the file following the same process as you did in stage 1 to save the 'Out' button state.

 

 

Applying your button in Dreamweaver.

With your cursor at the point you wish the button to appear on the page, click the 'Insert Rollover Image' icon'
( ) on the tool bar.

The 'Insert Rollover Image' window appears.

Locate the appropriate image files that we have just made in Photoshop 5.5. using the browse buttons and select a URL you wish to point the button at, click OK and the button appears on your page.

>back to top<