Get Web Ready
Let’s face it: These days if you need to slice up an image to recombine it within an HTML table for the Web, you’re probably going to reach for Photoshop and ImageReady (maybe Macromedia Fireworks, if you’re so inclined). And why shouldn’t you? The image was most likely created in Photoshop.
But say the image is actually vector-based artwork that originated in Illustrator. You could use the steps you’ve learned from these two articles to move the artwork over to Photoshop and slice it up there, or you might want to slice up the artwork in Illustrator and finish the work in Photoshop. It’s entirely up to you since Illustrator allows you to create slices and image maps and either save them for the Web directly within Illustrator or write them into an exported Photoshop file.
Writing out slices and image maps from Illustrator is quite simple. Here’s what you do:
- Create slices and/or image maps within Illustrator. Using the Slice tool (Shift-K) and Slice Select tool, divide your artwork up into slices. To name a selected slice and set other options, choose Object > Slice > Slice Options.The process of assigning image maps is a bit more obscure as it’s hidden away in one of the less-obvious palettes. Choose a shape you wish to use as your image map and open the Attributes palette (Window > Attributes). Change the Image Map pulldown menu to either Polygon or Rectangle (see Figure 8). Enter in a Web address in the URL field to associate with your image map. Click the Browse button to check the address you have entered.
Figure 9: The most difficult part of assigning image maps is finding the Attributes palette.
- Export your artwork as a Photoshop file just as detailed above. When you arrive at the Photoshop Options dialog, select Write Slices and/or Write Image Maps depending on which you decided to create.
- Open the exported file within ImageReady to verify your assigned slices and image maps. Although Photoshop has some degree of support of slices, it has no way of displaying or editing image maps. Adobe leaves this type of Web elements left to ImageReady. The Rollovers palette (Window > Rollovers) should list all the slices and image maps found in the file (see figure 9). From here, you can continue editing your slices and image maps or build upon them by employing more elaborate Web features such as rollovers and animations.
Figure 10: Image maps and slices come over seamlessly into ImageReady. Use the Rollovers palette to locate all your Web objects and add rollovers.
Figure 11: All the information you entered in the Slice Options dialog in Illustrator shows up in the Slice palette in ImageReady.
Now What?
Well I hope from reading over this article and the previous article in this series, you get a better sense of the crosstalk capabilities Illustrator and Photoshop have available to each other. I urge you to try out all the features described in the series for yourself and experiment with what’s possible.
One of the worst feelings is being halfway through a project and realizing you probably should’ve done it in Photoshop or Illustrator. Now with these lesser-known export features in your bag of tricks, I hope those moments will be rare. Now that I have introduced you to the options available to you when exporting out of Illustrator to Photoshop, in the next article in the series, I plan to highlight what’s possible going the other way: Photoshop to Illustrator. In the meantime, start exporting those files and experimenting.
Read more by George Penston.
This article was last modified on March 15, 2022
This article was first published on March 4, 2003
Commenting is easier and faster when you're logged in!
