Tutorials / photoshop-template-2
The remarkableTemplates.com Photoshop Template Tutorial 2
Creating rollover buttons with Photoshop (ImageReady) 
( Please make sure that you've downloaded and upacked the sample files from here )
So you're here again and you want to define your own rollover button with Adobe Photoshop, right? Fine, here we go:
1.) Open a new file in Adobe Photoshop with file 
new from the main menu and choose the values like shown in the following
picture:
2.) Select the type tool from the tools palette, and click onto your free workspace:
Now type in some text, I assume that you'll follow me and type the word "Button":
3.) You can format your text by double-clicking the little "T" in the layers palette:
The text is now selected, and you can change the settings of your text (typeface, size, color etc.) in the options palette:
4.) Now let's duplicate the created text layer. To do so, rightclick on the name of the text layer and choose "duplicate layer". A new window opens, click ok. You can change the name of your text layer by double clicking onto the name of the layer.
5.) Now that we have two text layers looking the same, let's define some styles like a drop shadow for them. Doubleclick right beside the name of your text layer and a new window opens:
Adjust the values like shown in the picture above.
Now you can set another style for the other text layer (different color etc.):
6.) Now make a selection with the select tool from the tools palette:
And crop the image so that there are just the text layers in the file:
7.) Now comes an important part: Switch to Image Ready:
Image Ready is a program which is already installed on your computer when you have Adobe Photoshop installed.
Notice: You could have built the rollover button completely in Adobe Image Ready alone, but as this is an Adobe Photoshop tutorial, so we're doing it that way this time. If you follow these steps, you'll learn some functions of both programs. Later on, when you're more experienced you'll instantly know which program is right for which task.
8.) First you have to toggle the slices visibility in the tools palette of Image Ready:
9.) Now select the slice tool from the tools palette and draw a rectangle around our text layer, so that the whole word is covered by the rectangle.
In the rollover window (window
rollover) a new slice appears.
10.) Click on that new slice and then on the white sheet of paper, to create a new rollover status:
Now the status "Over State" appears. Click on it and change the visibility of the text layer in the layers palette. (The other text layer should now be visible)
11.) You can play around a little with that to test if your rollover is working now: when you switch between the to rollover states by clicking on them in the rollovers palette the visibility of the two text layers should switch from one the the other.
12.) To save your button you have to export
the different rollover states as seperate files (.gif, .jpg). To do so choose
file save optimized
as:
in the next window choose the settings like in the following picture:
13.) Now the files are saved in the folder images:
Congratulations, you've just created your first rollover button with Adobe Photoshop and Adobe Image Ready.
---
Click here for awesome web hosting solutions from just $8.95/month!