How to Make a Rollover in ImageReady CS2
Adobe Photoshop's CS2 version includes a companion program called ImageReady that allows users to add interactivity to their graphics and optimize them for use on the Web. One of the most useful features of ImageReady is the ability to easily create rollover images and buttons. Using layers and the design features of Photoshop, ImageReady can help you create a richer user experience for your Web page or design.
Other People Are Reading
Instructions
-
Designing Your Image
-
1
Open Photoshop CS2 and create a new document by selecting "File > New." It may be helpful to choose one of the "Web" presets to get an accurate picture of what your rollover will look like as displayed in a browser.
-
2
Create the design for your rollover on your Photoshop canvass using the "Type Tool," layer styles, the "File > Place" command, or any other effects and graphics you wish to incorporate.
-
-
3
Copy the layer containing your button by opening the "Layers" palette and clicking and dragging it to the "Create a new layer" icon at the bottom of the palette.
-
4
Make any design changes you want for your rollover on this copied layer. This layer should be what you want your image to look like while the mouse is hovering over it on your Web page or design.
Shifting to ImageReady
-
5
Select the ImageReady icon, located at the bottom of the Tools Panel. ImageReady will launch in a separate window.
-
6
Select the "Slice Tool" from the ImageReady Tools Panel and click and drag a slice around your rollover image. Keep the edges of the slice close to the edges of your image.
-
7
Click on the "Web Content" palette and select your image. Select the "Layers" palette and turn off the visibility of the top layer of your image, which contains the rollover state of the image, by clicking once on the eye icon to the left of the layer.
-
8
Select the "Web Content" palette once more and click the "Create a new rollover state" icon. The default state for the first new rollover state is "Over," which is how your image will look with the mouse hovering over it. Reselect the "Layers" palette and disable the visibility of the bottom image layer this time.
-
9
Select "File > Save Optimized As" and set your desired save preferences for your rollover. Click "Save" when your preferences are set.
-
1
Tips & Warnings
You can also add URL links and names for your rollovers using ImageReady's "Slice" palette.
References
- Photo Credit search , find, help, web button, button, question image by creative from Fotolia.com
