Adobe Photoshop Tutorials

Photoshop 9 through CS6 Tutorials



Simple Rollovers for the Web - ImageReady CS Tutorial

Vikki Olds

March 15, 2004


Home Store Resources Links About Us Contact
Mouse over the tabs above to see the rollover effect


1 Creating simple rollover effects in ImageReady CS is really easy. You can make the rollovers as simple or complex as you like and this tutorial will hopefully get your started in that direction.

One of the really nice things about ImageReady CS is that you can work on a very large canvas and then scale it down to the size needed for your web site.

I started work on a blank 800 x 600  canvas which is the standard size for web sites these days.

I drew a tab on my canvas which will be the first button. I also added the borders as shown below using the rectangle tool.

I also added a drop shadow using the styles button at the bottom of the layer palette. You must have your button layer selected when choosing the style button.

2 Next place some text on your button.

3 Select the button so we can create the rollover effect for this button.
4 On the Web Content palette click the Create Layer-based rollover button which is shown with a red square around it below. ImageReady CS adds the necesssary rollover state. Highlight the rollover state.

5 Click on the style button from the layer palette again and set a style for the rollover. I did just a simple red overlay with an inner shadow. That will make my button look depressed when moused over.

6 Once you have the first button set up, go  ahead and create the rest of your buttons following the same instructions above for each button.

My final set up is shown below.

7 My first design for the rollover just had the effects named above.

8 Before changing my rollover effect I added the link and name information for each button. You must click each button and then add the information in the palette shown below.

9 Below is a preview of the design in it's original state.

10 As you can see below, I altered by rollover buttons to move down when moused over. To change a rollover effect just highlight the over state in the Web Content Palette for the button you want to change and then change it.

11 Once  you have everything done you can if you'd like change the size of your interface. One reason you might do this is if you wanted a precise look and wanted to cater to different browsing resolutions.

Go to Image>Image Size and change the size to whatever you want.

12 You can also set the HTML output. This is a very nice feature.

13 When you're ready to save the files go to File>Save Optimized As and save the files to your hard drive. ImageReady CS creates all the graphics, script and html for you.

This is really cool as all you have to really think about is graphic design!

Have fun!


Copyright 2004, Vikki Olds, All Rights Reserved

Designer Today Photoshop Tutorials

 You can get our tutorial DVD for only $19.95! Contains: discreet 3ds max, Adobe After Effects, CorelDraw, Adobe Illustrator, Adobe InDesign, Natural Media, Corel Paint Shop Pro, Corel Painter, Corel Photo Paint, Adobe Photoshop and Web Design. Click here for details.
In the Designer Today tutorial section you will find graphic design and graphic arts tutorials, techniques, tips and tricks covering many graphic software applications including: Adobe Photoshop, Photoshop CS, Photoshop CS 2, Photoshop CS3, Photoshop CS4, Photoshop CS5, Photoshop CS6, Adobe Illustrator, Illustrator CS, Illustrator CS 2, Illustrator CS3, Illustrator CS4, Illustrator CS5, CorelDRAW, PhotoPaint, Paint Shop Pro, Flash, Painter, Web Design, After Effects, Fireworks, 3D graphics, natural media and other misc. graphics tutorials.

Groupon Getaways


Follow Designer Today on Twitter and Google+

Designer Today tutorials cover all versions of 3D, General 3D, 3dsmax, After Effects, Cinema4D,  CorelDRAW, Flash, Illustrator, InDesign, Maya 3D, Paint Shop Pro, Painter, PhotoPaint, Photoshop, Premiere, Web Design and other design and photo editing software.

3ds max   After Effects  Cinema 4D  CorelDraw  Flash 
Illustrator  InDesign  Maya 3D  Misc   Natural Media   Painter   Paint Shop Pro   PhotoPaint   Photoshop  Poser   Premiere   Texturing   Web Design   Xara Xtreme

Designer Today is the Graphic Design Magazine for 2D and 3D graphic designers. We have thousands of graphic design and graphic design software tutorials, product reviews and design articles available.

Copyright © 1998-2015, GMP Services, Inc. of Statesboro Georgia, All Rights Reserved

Visit our other websites
Poser World - Poser & DAZ Studio 3D Models
3D Dojo - 3D FBX Format Models
Awe 3D - Custom 3D Model Services
Golf Done Right
Statesboro Business & Lifestyle
Allen Harkleroad | Favorite Recipes 
Beat Debt Collectors in Court 
Sue Abusive Debt Collectors