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

Introduction

In Part 1 of this tutorial, you learned how to make a basic web button in its normal state. In Part 2, we will learn two methods for creating a transformed mouse-over state for our button.

Creating the Mouse-over State Button

Now that we have a normal-state version of our button, we need to create a different version for the mouse-over state. This is where you can get really creative. I’m going to show you a couple of ways to easily change your button to create a mouse-over state, but don’t feel limited by these examples. Your mouse-over state needs to be different from your normal state, and that difference should draw attention to the button. This lets the user know the button is active, and also increases their interest. But this difference can take many forms. You can lighten the color, put a glow around the text or symbols, transform the symbols, change the font or size of the text, add or subtract textures…the sky is really the limit. Ready? Then let’s get creative!

Method One: Using the Styles Panel

  1. Open the Photoshop file for your button.
  2. Right-click on your Button Shape layer, and select Duplicate Layer. Accept the default name for now. In the new duplicated layer, click the eye icon next to the Smart Filter to turn it off.
  3. Open the Styles panel. If you followed Part 1 of the tutorial, this should be in the same panel group as the Swatches panel.
  4. You can see that there are only a few styles in the default group. Click on the panel menu at the top right of the panel, and select Web Styles from the list of style libraries. A dialog box opens, asking if you want to replace or append the styles. Click Append. You can also append the Buttons group and/or the Glass Buttons group if you want. The style I am using in this example is in the Web Styles group.
  5. With the Button Shape copy layer selected, click the Blue Gel with Drop Shadow style. If you move your mouse over each style, the name of the style will pop up in a tooltip. With the style applied, the button should look like the screenshot below (your color may be different).

    12_StyleApplied

  6. Last, change the layer blending mode to Overlay. This allows the texture from the original Button Shape layer to show through. Now your button should look like the screenshot below.

    13_OverlayMode

Continued on page 2…

Advertisements

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…