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

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