From Adobe Illustrator to Expression Design

Author: Ted LoCascio
Web Site: http://www.tedlocascio.com

Expression Newsletter, subscribe now to get yours.

Visit the Expression Gallery to download the files associated with this tutorial: http://gallery.expression.microsoft.com/SudsyLogo

With this step-by-step tutorial, you will learn how to work with an .AI file (the native Adobe Illustrator file format) in Expression Design. You will also learn how to add some 3-D transparent graphics to the illustration. After you complete the steps, you can export the final graphic and place it in a Website design using Expression Web, or a user interface created with Expression Blend.

Let’s start out by opening the Sudsy.ai document that was provided by our client. Choose File > Open, or use the keyboard shortcut of Ctrl+O. In the Open File dialog box that appears, browse to the Sudsy.ai file and then click Open.

It’s important to understand that many of the effects that are available in Adobe Illustrator are not available in Expression Design. Therefore, if any of these effects happen to be saved in the .AI file, they may not translate properly when opening it up in Expression Design. Certain Illustrator masks, transparencies, and various other effects will not appear the same, or may not appear at all.

In this instance, our client provided an .AI file with text already converted to paths, so we don’t have to worry about font compatibility. The text objects, as well as the ellipse positioned behind them, contain multiple fills and strokes. These were applied in Illustrator using the Appearance panel. Although Expression Design does not allow you to add multiple fill and stroke attributes to a path like Illustrator does, it does a nice job of converting Illustrator Appearance panel attributes into separate paths. For this graphic, Expression Design also maintained a similar layer structure (without the group), and the same colors, some of which were the result of overlapping transparencies and blend modes.

Appearance panel and Layer structure in Adobe Illustrator (click image to zoom)

Appearance panel attributes converted to layers in Expression Design (click image to zoom)

Thankfully, our client’s AI file didn’t contain any effects, masks, or transparencies that Expression Design couldn’t understand and easily convert. It’s always a gamble, but as a rule of thumb, the simpler the Illustrator graphic is, the better the chances are that it will open up in Expression Design without any problems.

When your clients send you an AI graphic that you’d like to work with in Expression Design, make sure they also send you a JPEG, PDF, or TIFF version of it that you can use as a preview to compare to, just in case you don’t have Adobe Illustrator installed on your system. You can use the sample graphic to help you identify if something in the AI file doesn’t convert correctly, or not at all.

Now that we know we can use our client’s AI graphic in Expression Design, the next step is to add some 3-D transparent graphics to it. Our client has requested that we add some soap bubbles to the existing Sudsy logo. Although Expression Design does not contain a 3-D filter effect, you can still create the illusion of 3-D space. You can create a sphere by drawing a circle and applying a radial gradient fill. Then by lowering its fill opacity, you can see through the shape to the Sudsy logo behind it. Here’s how it’s done:

1. Click the New Layer button located at the bottom of the Layers panel. Doing so places a new layer above the Sudsy layer in the Layers panel. Double-click the words “Layer 2” in the Layers panel in order to highlight the layer’s name. Now rename the layer by typing in the word “bubbles” and pressing Enter.

   

2. Press D to apply the application’s default fill and stroke colors (black stroke/white fill). Press L to access the Ellipse tool. Hold down the Shift key and click and drag anywhere on the artboard. Holding down Shift allows you to constrain proportions as you draw and create a perfect circle.

   

3. With the circle still selected, click the stroke icon in the Appearance portion of the Properties panel. Doing so brings the stroke color settings to the forefront. Now enter a 0-pixel value in the Width field and click the None swatch. This removes all of the stroke attributes from the selected circle.

   

4. Click the fill icon in the Appearance portion of the Properties panel. Doing so brings the fill color settings to the forefront. Now change the fill color from white to a basic gradient by clicking the Gradient Color swatch in the Properties panel.

   

5. Click the right gradient stop in the Properties panel. When you do, the tip of the gradient stop fills with black, indicating that you now have it selected. Enter the following values into the neighboring RGB fields: R 27/G 176/B 208, or enter #1BB0D0 into the hex code field.

   

6. Click the left gradient stop in the Properties panel. Alt+click the white swatch to apply it to your selection.

   

7. In the Properties panel, click in the gradient ramp at about 75% (directly under the eyedropper icon). Doing so adds a third gradient stop.

   

8. Click the Radial Gradient button located to the right of the gradient ramp.

   

9. Notice the midpoint sliders that are positioned at the 50% point between each color in the gradient. Click the midpoint slider that is positioned between the two cyan gradient stops and drag it to the right until it is at about 75%. You can identify the percentage by hovering the cursor over the midpoint slider and referring to the tooltip.

   

10. Click the other midpoint slider and drag it to the left until it is at about 30%.

    

11. Press G to access the Gradient Transform tool. Position the cursor between the center of the circle and the circle’s edge. Click at about 2 o’clock and keep the mouse button held down. Drag diagonally to about 8 o’clock until the cursor is positioned just before the edge of the circle. Release the mouse button.

    

12. Enter 90% in the Opacity field of the Properties panel. You can now see through the sphere.

    

13. Press V to access the Selection tool. Hold down the Alt key and click and drag the circle. Doing so allows you to create a duplicate of it.

    

14. With the duplicate circle still selected, hold down the Shift key and click and drag any corner node. Doing so allows you to scale the circle proportionally.

    

15. Reposition the duplicate circle so that it overlaps the original. Continue duplicating, resizing, and repositioning circles all around the Sudsy logo.

    

Now that you’ve completed these steps, be sure and save the final graphic in the native Design format (.design). You can do so by choosing File > Save As (Ctrl+S). In the Save As dialog box that appears, choose a filename and save location and then click Save.

When you’re ready to use the graphic in a Website or a user interface design, choose File > Export (Ctrl+E). In the Export dialog box that appears, choose the proper format settings, such as GIF or JPEG for a Web graphic, or XAML Canvas for a UI graphic. Choose the various options associated with each format; then choose a filename and save location, and click Export All.

Ted LoCascio is a professional graphic designer, author, and educator. He served as senior designer for the National Association for Photoshop Professionals (NAPP) for several years, and his designs and illustrations have been featured in several national newsstand and trade magazines, books, and various advertising and marketing materials. Ted is also the author of numerous software training books, including Expression Design On Demand (Que Publishing). He has also authored several training videos at Lynda.com, including Getting Started with Expression Design. For more info about Ted, please visit www.tedlocascio.com.