How to Create Two-State Rollover Buttons for a Web Page (Part 1)

Introduction

To make a web page more interactive and dynamic, you can create buttons that change their appearance when you mouse over them. These are known as “rollover buttons”. This tutorial will show you how to create two-state rollover buttons using Adobe Photoshop and Adobe Dreamweaver. The first part of this tutorial will focus on creating the buttons in Photoshop. The second part of the tutorial will show you how to make them work in a web page, using Dreamweaver. Before we get started, you should know that I have Adobe Creative Suite 5 Design Premium. Some of the steps may work in CS4, but if you have an earlier version than that, the steps may be significantly different, and your package may not have the features my version does. All these steps should work fine in CS6 as well as CS5.

Setup

There are specific features of Photoshop CS5 that we will be using in this tutorial. So it will be helpful for you if you set up your workspace before we begin. Start by switching to the Design workspace. You can do this by clicking on the Workspace section of the menu bar, or you can click Window > Workspace > Design in the menu bar. The Design workspace has the Styles panel open in the same panel group as the Swatches panel. We will be using the Styles panel later in the tutorial.

In the menu bar, click Window > Layer Comps to open the Layer Comps panel. You can move this wherever is most convenient. I usually add it to the Layer/Channel/Paths panel group, but use whatever configuration seems most comfortable to you. Okay, let’s get started!

Creating the Button Shape

  1. Click File > New to open the New dialog box. Type in a name for your file. Use the Web preset. Choose 640×480 for the size, 72 pixels/inch for the resolution, and RGB for the color space. I chose White for the background, but you can choose Black or Transparent if you want. These settings are all shown in the screenshot below.

    01_NewDialog

  2. Click the Shape tool to open the flyout, and select the Rounded Rectangle tool. You can also use the keyboard shortcut by pressing Shift+U until you cycle to the Rounded Rectangle tool.
  3. Draw a rounded rectangle shape 125×125 pixels in size. You can eyeball it using the rulers, or you can open the Info panel to check the Width and Height values as you draw. The Info panel should be in the Swatches panel group. If you don’t have rulers turned on, you can do so by going to the menu bar and clicking View > Rulers. My shape is shown in the screenshot below.

    02_RoundedRectangle

  4. Once you’ve drawn your shape, you should see a new layer in the Layers panel. It has a color swatch, and the shape is actually drawn on a layer mask. To change the color of your shape, double-click on the color swatch to open the color picker.
  5. Right-click on your shape layer, and select Convert to Smart Object. This is not essential to this tutorial, but converting your layer objects to Smart Objects offers several advantages. By double-clicking on the Smart Object, you can open just that object and manipulate it independently of the rest of your layers. It has its own change history, which means it is easier to revert to an earlier state without losing changes you made to other parts of your composition. This allows you to experiment with a wider variety of options in a non-destructive way.
  6. Change the name of your shape layer to “Button Shape”. You can do so by clicking twice in the layer name area, or by right-clicking the layer and selecting Layer Properties.

Continued on Page 2…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s