In a scenario like this, it would be important to know the language in order to determine whether this soldier was threatening you or someone else. At the same time, we'll learn the Latin terms for some common body parts. So let's get started. Click the image at the bottom of the page or here to see the final project.
So, to start, we're going to want to create "hot spots" over the various parts of the body we'll be using. For example, we'll need to select the eyes, ears, mouth, legs, etc. and tell the program that when we move the mouse over those areas, we'll see a little speech balloon with some Latin words in it. Then, when we click on those pots, we'll see an English translation.
Our first step is to get a royalty-free image of a Roman soldier, which I happen to have. Royalty-free images are bad for artists, but, on the positive side, they're usually quite bad. Next we make a generic speech balloonone big enough to contain our largest phrase. We can do a custom balloon for each phrase, but you'd be torturing the people visiting your site because these complex rollovers are quite large. The fewer elements the better.
Now we bring both the soldier and the speech balloon into ImageReady. We'll create a white background at Layer 0, put the soldier on Layer 1 and place the speech balloon on Layer 2. (Simply pasting the images in ImageReady will automatically generate new layers for each element.
The background, in this case white, should be visible, as should the soldier. But do not yet make the speech balloon visible. You can turn it off in the Layers palette by clicking on the "eye" icon to the left of the layer preview.
Now we're good to go.
slices and adding rollover states
Now, within the Slices palette, click on the Rollover tab. Then create a new rollover state by using the menu in the palette or by clicking the New Rollover State button.
This will create a second preview within the palette and will automatically be an "Over" state, meaning that whatever changes we make to the image will appear to the end user when his or her mouse moves over the area. In our case, the speech balloon and Latin phrase will appear.
In the Layers palette, turn on your speech balloon. Now select the Type tool and type your Latin phrase. I want the phrase "Gallum cum ocillis meis video" to correspond with my eyes, so I type this in the upper portion of the speech balloon. I give the type whatever look I want and then deselect it.
Now, within your Rollover palette, create a new rollover state, as before. This will automatically create a "Down" state, which means the changes will show up when the user clicks on the area. In our case, the user will continue to see the speech balloon and the Latin phrase, but, when users click, they'll see the English translation. To add the English translation, we just type it in. (A new layer will be created automatically when you start typing.) My particular translation for this phrase is, "I see a Gaul with my eyes." The Gauls were a group of Europeans occupying what might roughly be called France. Surprisingly, they did not get along well with the Romans and fought them, unsuccessfully, quite often. Some historians believe the Gauls were quite snooty, but I find this hard to believe.
When you're satisfied with all of your rollovers, you're ready to export the project for the Web. In the File menu, choose "Save Optimized as," and save your files. ImageReady will create several images for you and put them in a folder called "images." To make things easy for yourself, make sure the images folder will reside in the same directory as your final HTML document. Otherwise you're going to have to go in and change your code manually, and there can be a lot of code involved.
ImageReady also generates an HTML file. Just copy out the parts that go in the header section of your final HTML document and paste them there. Then copy the parts that you where you want your final image to appear and paste them there. You're done! If you want, you can compress your files further in another program like Fireworks, but the process can be excruciating, especially with a large number of slices.
Post a message in the Creative Mac World Wide User Forum!
Find out more in the Adobe Photoshop User Forum!
For more tutorials, click on the images below or visit our Tutorials Page.