Ever since Adobe Illustrator gained the ability to edit the clipping paths of an imported Photoshop EPS, communication between these two powerhouse applications has steadily improved. Both applications have even gained a handful of capabilities that until recently were reserved for their counterpart. Photoshop now offers vector features in the form of Shape Layers and Vector Masks and Illustrator has the ability to include raster (a.k.a. bitmap) effects such as feathering, blurs, and soft-edged drop-shadows, to name just a few. While each has matured into versatile applications in its own right, there still is a call to use both in concert to create artwork, thereby exploiting the strengths of each.

Part one of this article, "Share and Share Alike with Illustrator and Photoshop" provided an overview of the fundamental export possibilities available in Illustrator 10 in order to preserve elements of your artwork such as layers, transparency, blend modes, and text. In this second part, I will go over more advanced options: writing compound shapes, slices, and image maps for the Web. So if everybody is ready, let's begin.

Compound Shapes to Shape Layers
In order to take advantage of shape compounds in Illustrator 10 and move them over to Photoshop, we must first understand what they are. Shape compounds are rather new in both Illustrator and Photoshop. Unlike the original Pathfinder operations that have been around in Illustrator for some time now, compound shapes allow you to apply modes such as add or intersect to two or more shapes but keep the underlying shapes intact and editable (see Figure 1).

In Illustrator 10, Pathfinder operations result in compound shapes by default. Holding down the Option/Alt key when invoking a Pathfinder operation will result in shapes ultimately combined into a single shape (a la the classic Pathfinder operations). Adobe refers to this as "fully expanded." The best way to think of compound shapes is as live Pathfinder operations that provide ultimate flexibility to change the basic underlying shapes that make up the compound shape.

Figure 1: This is what a compound shape looks like. Selected (left) you can see this compound shape is made up of two circles while unselected (right) it shows its real form, a crescent. These circles can be edited at any time and the compound shape will update.

Now that we covered what compound shapes are, it's also important to point out that Photoshop's shape layers and vector masks (layer clipping paths) are types of compound shapes. These types of layers can be imported into Illustrator as compound shapes and then edited further from there. On the flipside, you can export your compound shapes out of Illustrator to Photoshop.

Let's try putting this to the test:

1. Within Illustrator, create a compound shape by creating two basic shapes. If you wish the shapes to have strokes, be sure to change the stroke join type to Round in the Stroke palette (see Figure 2). Otherwise, you will not get the option to write compound shapes when exporting.
   

   Figure 2: If you want to have a stroke on your compound shape, set the join to Round in the Stroke palette.

2. With the shapes selected, click one of the four Shape modes (Add, Subtract, Intersect, and Exclude) in the Pathfinder palette (see Figure 3). Make certain the resulting compound shape lives on a top-level layer as opposed to a nested sublayer, which Illustrator supports but Photoshop doesn't (see Figure 4).
   
   

   Figure 3: The compound shape modes reside in the Pathfinder palette.

   

   Figure 4: Be sure your compound shape lives in a top-level layer so that it exports properly.

3. Choose Export from the File menu and then select Photoshop (PSD) for the Format. Decide on a location for the exported file and click Export. A subsequent Photoshop Options dialog should pop up (see Figure 5).
   
   

   Figure 5: Illustrator's Photoshop Options export dialog lets you specify Write Compound Shapes.

4. If all went well, the option to Write Compound Shapes should be available. Check this option and click OK. If this option is grayed out, read over the some of the other caveats below.
5. Now that the compound shapes are exported into a PSD file, open the file in Photoshop and review the results. Your artwork should come up vector-crisp (see Figure 6). The compound shape appears in Photoshop's Layers palette with the nested information appearing as a Layer Style (see figures 7 and 8). Now you can continue working with it in Photoshop.
   
   

   Figure 6: Open the exported file within Photoshop. Your compound shape should open flawlessly with all transparency and blend mode settings intact. Will wonders ever cease?

   

   Figure 7: Here's the compound shape now in Photoshop's Layer palette. The layer structure has translated into a Layer set (Layer 1) and Layer Style (Stroke).

   

   Figure 8: The assigned stroke has been converted to a Layer Style Stroke.

This is the best way to bring compound Illustrator shapes into Photoshop, but you can also copy-paste between applications, although be warned that copying-pasting compound shapes does not transfer over color, blend modes, or transparencies. If this is okay by you, just select your compound shape, copy it, and then paste it within Photoshop. You'll need to have the AICB option checked in the Clipboard section of Illustrator's Preferences (Files & Clipboard...). Selecting between Preserve Paths and Preserve Appearance does not seem to make a difference in this situation.

There are a few more things to note when exporting compound shapes. Along with having the stroke set to Round Join, compound shapes must not have any brushes, dashed strokes, or styles applied to them if they are to export successfully. If you do choose to have a basic solid stroke applied, be sure the stroke weight is a whole number (points or pixels), otherwise the compound shape will be rasterized when exported, defeating the purpose of keeping your vector artwork intact.

We started with basic shapes here to keep the process simple, but now that you know the steps, there's nothing stopping you from creating rather complex compound shapes in Illustrator and moving them over to Photoshop.

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:

1. 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.

2. 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.
3. 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.