Untitled Document

Web Hosting by Netfirms | Free Domain Names by Netfirms

Untitled Document

Simple Rollovers in Image Ready 3.0
This is a very simple tutorial which will teach you how to do simple mouse overs in imageready 3.0. No longer is it neccesary for you to know any javascript to do mouse-overs. Their are many programs for doing mouse-overs, but image ready is one of the best. If you are experienced with photoshop read this tutorial anyway, maybe you will find my way different and possibly faster then what your used to. If you have any questions or dont quite understand one of the steps feel free to e-mail me.

Step 1
First off open up photoshop6 and pick out the file that you want to use. For this example I am using a photo that I made for a previous tutorial about making gradient buttons. Make sure that the file is a psd file and that the text you want to make into a mouse-over is a seperate layer. If it is not then this tutorial wont work very well. If you dont have a psd file that will work, just make a new blank document and put some text on it, and go to the next step. Once you have your document open then click on the bottom icon on the toolbar, which is the quick jump which will open image ready 3.0

Step 2
In this step we are going to begin adding the mouse-overs in image ready. Once you have the image loaded in imageready you will see the toolbar which is similar to the one in photoshop. Image ready is similar to photoshop, but has some changes in it. Be carefull to pay attention to the tools, they do different things. We want to select the slice tool which is on the toolbar and looks like a knife. Make sure you have the slice tool and not the slice select tool. To switch between the two tools hold down the left mouse button on the slice tool. Once you have the slicing tool selected draw a slice around the text on the document. It does not matter how much bigger you make the slice, but the closer to the text size, the better.

Step 3
As soon as you make the slice you will notice there is now a yellow rectangle around the text, the size depending on how big of a slice you made. Now you want to select the text layer in the layers toolbar, and then click on roll-over on the animation bar. Then click on the new button to create an over state for the roll-over. Look at the picture to see what the different toolbars look like and how I did it. It is very important to have the text layer selected when you click on the rollover toolbar and hit new. If you dont your roll-over state wont be for the slice you just made for the text.

Step 4
This next step is going to add the mouse-over color. Click on the text layer if you dont already have it selected, and make sure you have the over state for the roll-over selected. Now all you need to do is right click on the text layer, click on layer style and then click on color overlay. Once you select color overlay by default photoshop 6 makes the color red. To change the color just click on the color you would like to use on the layer options menu. Thats all their is to it. Now you have done it. To see what it looks like in your default browser hit ctrl-alt-p. I put mine below so you could have a look at it. I chose yellow because it looked nice with my graphic.

This is a very quick 1 minute method of doing a very basic text mouse-over. I literally did this mouse-over in photoshop6 in less then 30 seconds.

Ridler Designs: This tutorial was prepared by Mike Ridler of Ridler Designs. Ridler Designs is a relatively new design firm that provides top notch Adult Website designs. We do everything from website design to banners and flash work. Our prices are lower then all of our competition and our designs speak for themselves. Contact me to today to get your own custom quote. Visit our site