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

Introduction

In Part 1 of this tutorial, you learned how to make a basic web button in its normal state. In Part 2, you learned two methods for creating a transformed mouse-over state for your button. In Part 3, you will be creating web-ready versions of your Normal and Mouse-over state images. Then I will show you how to create a basic web page in Adobe Dreamweaver, and how to add your two-state rollover button to the page. Let’s get started!

Using the Slice Tool to Create Web-ready Images

After completing Parts 1 & 2 of this tutorial, we have images for our two-state button. However, we need to create a web-ready version of these images before we can use them on a web page.

  1. Open the Photoshop file for your rollover button.
  2. Click on the Layer Comps panel, and make sure your Normal State layer comp is active.
  3. Click on the Crop tool to open the flyout, and then click on the Slice tool. You can also use the keyboard shortcut by pressing Shift+C to cycle through to the Slice tool.
  4. In the Layers panel, if you have a white or black background, click the eye icon next to the Background layer to turn it off; this will ensure the button is on a transparent background.
  5. Starting at the top left corner, click and drag the Slice tool around your normal state button. Try to get the slice boundaries as close as possible while still including the entire button. If you couldn’t quite get the boundaries right, you can press Ctrl plus the + key to zoom in, and use the small square handles to make fine adjustments. When you are done, your image should look similar to the screenshot below.

    19_SlicedImage

  6. In the menu bar, click File > Save for Web and Devices. This opens the Save for Web and Devices dialog. Your original image is displayed, along with several possible choices you can select to optimize the image for web delivery. The default is usually a JPG setting, but we need to maintain the transparent background behind the button (even if only a fraction is showing). In the top right corner of the dialog box, locate the Preset dropdown menu. Click to open the dropdown, and select PNG-24. See the screenshot below if you need help locating settings.

    20_SaveForWebDialog

  7. Click Save. This opens a save file dialog. The default save name is the name of your Photoshop file. Keep the default; you’ll see why in the next few steps. Make sure your file is being saved in the same directory as your Photoshop file, then click Save again.
  8. Open the directory or folder where you saved your Photoshop file. You will see a new subfolder named images. This is automatically created when you use Save for Web and Devices to save image slices. Photoshop saves all your slices, which means you have your button image along with all the blank white spaces which were around the button. Unless you select each slice in the Save for Web and Devices dialog and specify settings, all the slices besides your button will be in the default JPG format. For this tutorial, you can just delete all the blank white slices. The screenshot below shows an example of what you will find when you first open your images folder.

    21_ImagesFolder

  9. Change the name of your Normal State button. In my example, I changed the name of my Normal state image to “RolloverSample1_Normal”.
  10. Go back to your Photoshop file. Switch to the Layer Comps panel, and make the Mouse-over State layer comp active.
  11. Switch back to the Layers panel, and you will see that all the layers for your Mouse-over state will now be visible. You will also see that the slices you made for the Normal state are still there.
  12. In the menu bar, click File > Save for Web and Devices again. In the Save for Web and Devices dialog, select the PNG-24 preset for your Mouse-over state image, as you did for the Normal state image in step 6. Follow steps 7 & 8 for the Mouse-over state image.
  13. Change the name of your Mouse-over state image. In my example, I changed the name of my Mouse-over state image to “RolloverSample1_MouseOver”.
  14. Once you have your two state images in PNG format, you can move them out of the images folder and into the folder where your Photoshop file is stored.

Continued on Page 2…

Advertisements

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…

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…