Sunday, May 6, 2007

Fun Ways to Create Rollovers in Adobe Photoshop

If you are a Photoshop owner, you are probably interested in every possible application that will help you get your money’s worth from the software. Well, don’t worry, there are so many fun and exciting applications you can use on Photoshop, you are sure to be satisfied. However, it is hard to try out all of the cool stuff you can do in Photoshop if you don’t know that it is there. Don’t buy a bunch of extra plug-ins for applications that you can perform with your standard Photoshop software. Rollovers are one of those things you can make in Photoshop that some people think they need another program for. Before you spend your money, make sure you know all of Photoshop’s little secrets.

Photoshop is one of the number one choices of designers and laypeople alike. Just about all of us are more than happy to spend hours creating and designing creative images in Photoshop. If you have designed a web page or are considering make one, odds are you will probably at least consider using a rollover. You will be in good company because rollovers are all around the web these days.


Rollovers appear to be on just about every Web page menu. Rollover images give site visitors with a great way to navigate through the site. If you see the image change on mouse over you know that there must be a link there. Mouse over is a better sign than the little hand that is occasionally there.

Some of you may already have a good idea about how rollovers work. Others may not be so clear, so let’s go over how rollovers are created. An easy Javascript code gives the browser information to show a different image when a mouse is passed over the initial rollover image. The size and content of the images used in a rollover is unlimited. You can even use an animated GIF file as the rollover image. If you use this technique with a light hand, you can add a lot of spunk to your web page. Visitors typically enjoy the rollovers more than the boring hand.

ImageReady has slicing and automatic rollover capabilities that can make creating rollovers easier. However, you can make rollovers in Photoshop without ImageReady. You can make them by working in layers and use the Save for Web features. The job can be completed with a little more work than you would have to do in ImageReady but not much. Once you have created one rollover you will be used to the steps and rollovers will be a piece of cake.

Create a new layer with perfect alignment. You can make rollover effects using layer styles. This includes color overlay to change the color. The way that you make the effects is not the part that matters. What is important is how precise it is. Take the time to be sure that all of your dimensions are correct before you continue.

To change the color of a rollover image add a color overlay layer style to the initial image. Make the initial image. Double click the layer that has the content you want to change. Go to the Layer Style window and click on Overlay options. Pick the color and opacity you want and click OK to go back to the document. The rollover image is complete now. If you want to turn the effect off to show the original image you can. You can also activate the effect for the rollover image.

To make rollover effects using different layers, make the initial image on a separate layer. Name the layers as you make them so you can keep track of them. Be sure you like what you want created before you move on because changes to the rollover layer will have to be made separately.

*****

For a huge range of products and services visit the Authors Library

Photoshop Watercolor Secrets Revealed covers everything you need to know about how a real watercolor looks like and explains in a step by step demonstration how to manipulate a few Photoshop filters and tools to achieve the desired results in many of your photographic images.

Download directly from the publisher