Exercise: Car Dealer Layout Buttons Rollovers ________________________________________
This is a template / layout for a car dealer website, I’m going to show how you can make Buttons Rollovers:
See the Final Result at the end...
1- After you finish designing this template, select the Buttons (Shape’s) layer, in Layers Window, one by one and go to menu Layer ==> and click on the option New Layer based Slice, as you can see in the following image:



2-After doing that, Save the work that has be done and go to Imageready, so click on the following button to be transferred to ImageReady:

3-As soon as you get in Imageready, go to menu Window ==> and click on the option Rollovers. It will open a Rollovers Window. Select the first Slice layer, and right click on it. In the menu that opens, click on Add Rollover State, as you can see in the image:


4- It will add Over State(Rollover State), as you can see in the next image. Let it be selected, and go to Layers Window, and see which Shape layer is selected, and reduce its Opacity to 50%... as you can see in the following image:
So, what did you do ??
In the normal State, that button will have 100% Opacity, and in Over State it will have 50% Opacity…


6- So, now do the same with other buttons. First Add Rollover state, in Rollover Window, and then select it, and in the Layer Window, reduce the Opacity of the selected Shape’s layer to 50%.
Keep saving the changes. So, now you’ll have, the following image in Rollover Window, and all buttons with Over State.



7- Now you’ve to test it, so for you click on the Preview Document button in the main Toolbar …as you can see in the image:
Or, you can click directly on Internet Explorer icon to see in your Browser…you decide…


8- After previewing the effects, just go to menu File ==> and click on Save Optimized as… and it will save HTML, images….and will generate Javascript for the Rollover effects….
So, you can see… it’s not difficult to create Rollovers button effects in Photoshop + ImageReady… what do you say??

__________________
-
-