1 [IR]ImageReady Tutorial Creating Rollovers in Image Ready Tue Sep 21, 2010 8:29 pm
Admin
Admin
1. Create the Pill Button from this tutorial
[You must be registered and logged in to see this image.]
2. Open your pill button image (PSD) in image ready.
3. Open the Rollover panel by clicking window=>show rollover.
[You must be registered and logged in to see this image.]4. The first image displayed there is the image you imported from your PSD file. Click the Duplicate image button on the rollover panel.
5. Turn off the effects on the text layer by clicking the eye on the layers panel for the effects on your text layer only.
6. Set the opacity on the lower white shading layer, layer 2, to 50%.
7. Click on the slice tab. Type in the link you want the button to go to.
9. Click on the preview roll over button on the tool bar. mouse over your image. When you have your image adjusted the way you want it, it is ready to save.
10. Open the optimized palette and select the file type and your best guess at settings for your buttons. Remember transparency only occurs in GIF images.
11. Click on the 4up panel of your mouse over images. Compare quality and size of images for best quality for least size.
12. To save this image and get the html needed for the rollover to work click File=>save optimized. Select HTML and Images and click ok.
The images and the HTML code will be saved to the same folder the PSD is in. Use the HTML code you created in your webpage document when you insert the first image.
[You must be registered and logged in to see this image.]]
[You must be registered and logged in to see this image.]
2. Open your pill button image (PSD) in image ready.
3. Open the Rollover panel by clicking window=>show rollover.
[You must be registered and logged in to see this image.]4. The first image displayed there is the image you imported from your PSD file. Click the Duplicate image button on the rollover panel.
5. Turn off the effects on the text layer by clicking the eye on the layers panel for the effects on your text layer only.
6. Set the opacity on the lower white shading layer, layer 2, to 50%.
7. Click on the slice tab. Type in the link you want the button to go to.
[You must be registered and logged in to see this image.]
9. Click on the preview roll over button on the tool bar. mouse over your image. When you have your image adjusted the way you want it, it is ready to save.
10. Open the optimized palette and select the file type and your best guess at settings for your buttons. Remember transparency only occurs in GIF images.
11. Click on the 4up panel of your mouse over images. Compare quality and size of images for best quality for least size.
12. To save this image and get the html needed for the rollover to work click File=>save optimized. Select HTML and Images and click ok.
The images and the HTML code will be saved to the same folder the PSD is in. Use the HTML code you created in your webpage document when you insert the first image.
[You must be registered and logged in to see this image.]]