SEMA Conference, September, 2000
John Kundert-Gibbs, Director
Digital Production Arts
Clemson University
Creating Interactive Images and Text:
The Wilton Diptych
While creating rollovers like the ones you can see on the example pages--examining the Wilton Diptych--may seem a very complex task, thanks to the tools available to web developers today, it is a fairly straightforward task to create rich textual and graphical interactivity that magically appears when a student moves her or his mouse over the artwork or document. While I don’t go into complete detail below, the outline of how I created the Wilton Diptych pages should give you a firm understanding of how you (or an eager student!) could create pieces like this in a relatively short time.
Find the images you want, and get the text you want to include ready too. This may sound easy, but (if you don’t have the material handy) can be the longest part of the job!
Take all of the text you will be using (unless it is very minimal, in which case you can just type it in as you go) and place it in a single text document for later copy-paste use.
If your images are in hard copy and need to be scanned, you will need to refer to your scanner manual on how to scan into Adobe Photoshop. If your scanner is already hooked up, simply go into Photoshop and choose File>Import>Twain (or Twain_32):
In Photoshop, open all the images you will be using for your project. For this example, I will show how I created the rollovers for the left panel of the diptych, so I opened the main image of the panel, plus scans I had made showing the details of the saints, Richard II’s head, and his hart collar. In a separate word processor, I typed out all the text I would use to describe each detail, though this could be done directly in Photoshop as well.
Resize the main image to be less than 800 pixels wide by 600 pixels high. Not only will this save you on file size (making the web pages smaller), it will also make the images viewable on smaller computer screens, which is important. To resize an image, move it to the front, then choose Image>Image Size.... This opens up a dialogue that allows you to resize the image to any size you wish. As this image is taller than wide, I made the height 600 pixels, and clicked the “constraint proportions” box (as well as the bicubic resample box) to force the width to adjust properly.
Now you need to copy your image into a new document that contains some white space in it (this is where the details and text will go). In this case, as the panel is about 400 pixels wide, I created a new document that was 600 pixels high by 800 wide (about as big as you should go for web pages!). Next, go back to your original image, select the whole picture (ctrl/command-a, or Select>All), then use copy to copy the picture, select your new (blank) image, and paste the picture into it. Holding down the control (command on Mac) key, move the picture over to one side, so the new document looks like this:
Save
your new document--it’s good practice to do this often!
Now it’s time to add our details and text to the image (this won’t be animated yet, but we’ll place the images where they will appear now). Find the picture with the first detail you wish to add (Richard’s head in this case). Using the marquee tool,
select the area around the head you wish to copy by drawing a box around it, then use copy-paste to paste the image into your “master” document. Move the image where you want it to be, and you’re set!
You will notice, if you look, that you have created what is called a new “layer” when you paste your new image into the document.
Every new text item or image you place in your document shows up in a new layer; we will use this fact later to animate the rollovers.
Now select the text
tool from the tool palette, 
and click over on the white portion of the document. Either type or copy text
into the text box the text tool brings up, then select a nice color (like black)
and font for the text.
After you press OK, you can move the type layer like any other to a spot that pleases you.
Repeat steps 5 and 6 for as many images and text as you wish to insert into your document.
If you wish, you can also create text that indicates a return to a previous page (in this case, a return to an image of both panels).
Turn off (or hide) all layers besides the background (white) layer and the main image by clicking on the eyes in the layer palette.
Save the file, and quit Photoshop if you wish. You are now ready to open ImageReady (a separate piece of software that comes with Photoshop 5.5 or later) and create your rollovers!
Launch ImageReady and open your master document file. It should look just the same as it did in Photoshop (with most of the layers hidden). The first thing we need to do is create “slices” to indicate where rollovers should occur--in other words, when the mouse rolls over what portions of the original image should one of the details appear?
As you consider where to place your slices, be sure none of them overlap (they can share edges, but don’t try to place one on top of another!). Also note that slices can only be rectangles, so you are limited to those shapes for your rollovers.
Choose the slice tool
and draw a box around an area to create a slice. You will note that ImageReady also produces other slices automatically, so the entire image is made up of slices now.
Continue creating slices for your “hot spots” until you are finished (again, ImageReady adjusts other slices as you go). Note that I created a large slice at the top, which I’ll use as a “back” button to return to the two-panel view.
Now it’s time to actually create the rollovers. With the slice select tool (just to the right of the slice tool in the image above), select the slice you wish to add a rollover to--in this case, Richard’s head.
Be sure the slice/rollover palette is showing (if not, choose Window>Show Rollover), and click the Rollover tab.
Now click the button at the bottom (that looks like a piece of paper), and a new rollover state will appear (named Over by default).
Go over to the layers menu, and turn on (unhide) the detail image you wish to use, as well as the text associated with it. You will note that the images appear in your document.
That’s it--you’ve created a rollover! To test it, click the “normal” state in the rollover palette, and the detail and text should disappear. Click the “over” state, and they should reappear. (If this doesn’t work, erase the rollover states by dragging them to the trash can in the palette, and create new states over again, following the above steps carefully).
Note: to preview how your pages will look in an actual browser, choose File>Preview In>and choose the web browser you prefer to use. That web browser will launch, showing a working version of your document (along with diagnostics listed below it that won’t appear in the final version).
Repeat this step for all of your slices, including the back button (if you use one), and your page is ready for prime time!
The last thing you need to do is export your document to html pages and move it to your server. Before you export your work, however, you may first wish to optimize the images to balance the quality of the pictures versus their size (and thus their download times). First, select all slices by choosing Select>All (or Control/Command-a). Then go to the Optimize palette, and choose jpeg as the compressor (this is best for most photographic work), and try different quality level settings.
To get an idea of what the final image will look like, you can create a side-by-side view of the original and compressed images by going to the document window and clicking the 2-up tab.
When you are satisfied with the settings, choose File>Save Optimized As... To bring up the following dialogue:
Here you can set many options for how to save your work. In general, the default options (shown above) work best. The file name you give your document will be the name you will need to call up from your web pages (in this case, LeftPanel4.html). A note to Mac users: you must place a .html (or .htm) at the end of your file name. Windows will do this for you, but the Mac won’t. Also note that the images associated with your document will end up in an “images” folder--you will need to copy this folder, as well as the html file onto your server.
To get the files you have created onto a server, you need to use ftp (or file sharing) to “upload” the files. This is generally an easy process, but you may need to contact your computer help people to walk you through the process the first time.
When you finish, you should have a very useful and beautiful set of web pages to use for your class!