|
|
| |
30) Photoshop is not very useful if you want to create rollover effects for your buttons. However, you need to first
create a rollover state and automate the process using ImageReady. ImageReady allows for multiple rollover states and complex changes to multiple slices.
Now create the image of a pill button Photoshop and Using Image>>Add canvas and add canvas to the right of the bar. |
| |
31) Create a new button by copying the layer and dragging it to the folder icon at the bottom of the layers toolbar as
shown in figure 26. Move the new metallic button to the right of the original using the move tool. |
| |
|
| Figure 26. |
| |
32) Select the button shape layer and add new color overlay effect. Change the blend mode to color so that we can
toggle between these effects to create the rollover effect as shown in figure 27. |
| |
|
| Figure 27. Click here to view larger image. |
| |
33) Now open ImageReady using the button at the bottom of the Photoshop tool bar as shown in
figure 28. |
| |
|
| Figure 28. Click here to view larger image. |
| |
34) Using the slice tool, now draw a box from edge to edge around the first button. Draw another slice around the
remaining area. The slices should touch in the middle and extend from edge to edge. |
| |
35) Now open the web interface Palette and click on the first slice and then click on New rollover button. This will
create a new state for the slice and will be indented a little. Now go to the first layer group and turn off the color overlay visibility for both the
buttons and the highlight. That’s it! The rollover effect has been created. Now preview the whole in the preview mode. Save the file as PSD so that changes
can be made to it later. |
| |
36) Export this to a real web page along with the javascript to swap the images by going to
File>Save optimized. |
| |
|
|
|
