Step 4) Coding in ImageReady~

Once you select a slice, you can view the slice information. (If you don't see it, bring it up by going to Window > Slice )

I selected my 'about' button and typed in the URL for the link. Repeat for all the slices that are going to be linked to something.

---

Step 5) Roll-overs

They only work if the viewer has Javascript enabled, but here's how to make them in ImageReady.

Go to the web-content area and click that button. It then makes an over-state, as shown on the right.

Now with the over-state highlighted (as pictured above), go down to the layers panel and turn on the layer that you want visible when the mouse is over said slice. Clicking the eye turns on visibility.

Make sure that the roll-over layer wasn't originally visible during the normal state. If it was, go back and select the normal state and turn it off/invisible.

Repeat this step for every slice that has an over-state. When you're done, all the buttons should be linked up.

Save the .psd file and then go to File > Save Optimized As

This will automatically create an images folder wherever you saved it, and each slice then is saved as an image.

 

>> Next: Dreamweaver & Preparing the Website for Content

Wah! I don't have Dreamweaver! Then follow along and pay attention to the orange text. You'll have to manually insert code.

<< Previous: Slicing it up~