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

Jazzing Up Your Button and Creating a Layer Comp

  1. We now have a perfectly serviceable button. However, I’d like to jazz it up just a little. Select the Button Shape layer. Click Filter > Filter Gallery to open the Filter Gallery dialog box.
  2. I decided to add a Grain texture to the shape. You can experiment if you wish. For instance, in addition to changing the Intensity and Contrast for the Grain filter, you can choose a different Grain Type from the dropdown menu. Playing with the Filter Gallery is a lot of fun. You can see the settings I chose for my example in the screenshot below.


  3. Once you have chosen your Filter settings, click OK to close the dialog. If you look at the Layers panel, you will see that Photoshop applied your filter as a Smart Filter. You can turn the Smart Filter effects off and on, or add another filter. This gives you a lot of flexibility to experiment with different effects. The Smart Filter is shown in the screenshot below.


  4. We are going to stick with this for now. This is the normal state for our rollover button. The last thing we need to do is set up a Layer Comp for this state. Use Ctrl+click to select the Button Shape, text, and Arrow Shape layers.
  5. With your layers selected, click on the Layer Comps panel. Create a new Layer Comp by clicking the NewLayerCompIcon icon at the bottom of the panel. In the dialog box that opens, type in “Normal State” for the name. Make sure that Visibility, Position, and Appearance are all checked. Click OK to close the dialog. We now have a Layer Comp that preserves everything we did for those layers. When we make changes to create the mouse-over state, we will save that as a second Layer Comp. Then we can switch back and forth between the two easily, to see the differences between them. Cool, huh?

In Part 2 of our tutorial, we’ll create the Mouse-Over state for our button. We’ll take a look at the Styles panel, to see how you can use preconfigured Styles to speed up your workflow. We’ll create a second Layer Comp for the Mouse-Over button state, and you’ll see how Layer Comps allow you to switch back and forth between different designs and compositions quickly and easily.

In Part 3, we’ll open Dreamweaver, create a simple web page, and create a working rollover button using the two button state designs we created in Photoshop. Thanks for reading!


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s