Skip to main content

Creating Graphics and UI Controls with Expression Design

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

Expression Newsletter, subscribe now to get yours.

Microsoft Expression Design is a powerful illustration tool that enables you to create both vector and bitmap graphics for use in website and Silverlight projects created Expression Web and Expression Blend.

As a tightly integrated member of the Expression Studio suite, Expression Design enables you to design custom web graphics and export them as GIFs or JPEGs for use in sites created with Expression Web. You can also use Expression Design to create custom user interface controls and export them in the native XAML format for use with rich interactive Silverlight and WPF applications created with Expression Blend.

In this step-by-step tutorial, I’ll show you how to create a familiar, commonly used email icon using the drawing tools available in Expression Design. After you complete the steps, you can export the final graphic and place it in a website design created using Expression Web, or a rich interactive application created using Expression Blend.

Creating an Email Icon Using Expression Design

Open Expression Design and follow along with these steps.

  1. Create a new document by choosing File > New. In the New Document dialog box that appears, choose 640x480 from the Presets drop down list and then click OK.

  2. Double-click the words “Layer 1” in the Layers panel in order to highlight the layer’s name. Now rename the layer by typing in the words “mail icon” and pressing Enter.

  3. Press M to access the Rectangle tool. In the Properties panel, click the toggle arrow next to the words “Create Rectangle” in order to reveal the Corner Radius field. Click once over the current radius value to highlight it; then enter a value of 3-pixels.

  4. Press D to apply the application’s default fill and stroke colors (black stroke/white fill). Now click and drag along the artboard to create a rounded rectangle.

  5. With the rectangle 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 2-pixel value in the Width field in order to thicken the weight of the stroke. Leave the default Basic style chosen from the stroke style drop down list.

  6. To access the More Swatches list, click the down facing arrow to the right of the favorite swatches group in the Properties panel.  In the Categories section of the drop down list, scroll down to the Desert Camo Swatches group. As you hover your cursor over each swatch in the group, a tooltip appears to display its assigned hexadecimal code. Click on the gold swatch with the following hex code: #C88714. Doing so applies this color to the stroke of the rectangle.

  7. 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 rectangle’s fill color from white to none by clicking the None swatch in the panel.

  8. Copy the selected rectangle to the computer’s Clipboard by choosing Edit > Copy (Ctrl+C). Then paste it in the exact same position directly behind the existing rectangle by choosing Edit > Paste in Back (Ctrl+B). Click the toggle arrow next to the layer name in the Layers panel in order to view the position of each object contained within the layer.

  9. Change the copied rectangle’s fill color from None to a basic gradient by clicking the Color Gradient swatch in the Properties panel.

  10. Click the left 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. Hover your cursor over the gold swatch in the favorites group at the top of the panel to reveal its hex code in the tooltip (#FFC800). Alt+click the swatch to apply it to the selected gradient stop.

  11. Press G to access the Gradient transform tool. Click and drag from the top edge of the rectangle to the bottom edge. To constrain the angle of the gradient, hold down the Shift key as you drag.

  12. In the Properties panel, click the stroke icon to bring it to the forefront again. Now change the copied rectangle’s stroke color to none by clicking the None swatch in the panel.

  13. Expand the Effects section of the Properties panel by clicking its toggle arrow. Click the fx icon to reveal the effects drop down list. Choose Effects > Outer Glow. Enter the following settings to create a soft shadow: Size 1; Opacity 0.6; Glow Color #000000 (Black); Noise 0.

  14. Press V to access the Selection tool. Drag a ruler guide from the vertical ruler onto the artboard and position it over the center of the selected rectangle. You can use this guide to help align objects in the later steps.

  15. Lock the copied rectangle by clicking its lock icon in the Layers panel. Doing so prevents you from accidentally selecting and moving it later.

  16. Press J to access the Polygon tool. Expand the Create Polygon section of the Properties panel by clicking its toggle arrow. Enter the following settings: Points 3; Inner Depth 0; Twirl Angle 0. Now click and drag along the artboard to create a triangle. Note that any new shape that you create automatically inherits the same fill as the last selected object; therefore, the triangle now contains the same gradient fill that you applied to the rectangle in steps 9 and 10.

  17. With the triangle still selected, enter -90 degrees in the Rotation Angle field of the Action Bar. Doing so positions the triangle as shown here.

  18. Press V to access the Selection tool. Select the triangle and move it over the vertical guide until it snaps to its center point. Click and drag the left bounding box side node, then the right bounding box side node, until the triangle covers up the entire top half of the rectangle as shown. If necessary, drag the triangle’s bottom bounding box node up until the bottom point of the triangle meets the center of the rectangle.

  19. Press G to access the Gradient transform tool. Click and drag from the bottom most point of the triangle to its top edge. To constrain the angle of the gradient, hold down the Shift key as you drag.

  20. In the Properties panel, click the stroke icon to bring it to the forefront again. Click the Color Eyedropper icon and move the tool’s cursor over the artboard. Notice the triangle’s stroke color change as you move the mouse over different areas of the screen. Place the color eyedropper directly over the gold stroke that is currently applied to the rectangle. Click to apply the sampled color to the stroke of the triangle.

  21. Copy the selected triangle to the computer’s Clipboard by choosing Edit > Copy (Ctrl+C). Then paste it in the exact same position directly behind the existing triangle by choosing Edit > Paste in Back (Ctrl+B). Enter 90 degrees in the Rotation Angle field of the Action Bar. Doing so positions the duplicate triangle as shown here.

  22. Press V to access the Selection tool. Click and drag to move the duplicate triangle down until it appears as shown here. Hold down Shift as you drag to constrain your movements. If necessary, drag the duplicate triangle’s bottom bounding box node down until the triangle covers up the entire bottom edge of the rectangle.

  23. Press Ctrl+A to Select All. Then choose Object > Clipping Path > Make with Bottom Path. Doing so creates a clipping mask, which allows you to crop both triangles inside of the rectangle. Press Ctrl+Shift+A to deselect. If necessary, you can use the Direct Selection tool to select the triangles from within the clipping mask and reposition them.

  24. Now let’s add a highlight to the top edge of the mail icon. Change the default stroke setting to none by clicking the None swatch in the Properties panel. Press L to access the Ellipse tool.  Click and drag to create an oval shape that overlaps the top edge of the mail icon, as shown here.

  25. Click the fill icon in the Properties panel to bring it to the front. Click the left gradient stop and Alt+click the white swatch from the favorites group located at the top of the panel.

  26. Click the right gradient stop and enter 0% in the Stop Alpha field. Doing so creates a transparent gradient from white to none.

  27. Press G to access the Gradient transform tool. Click and drag from the middle of the oval to its bottom edge. To constrain the angle of the gradient, hold down the Shift key as you drag.

  28. Enter 80% in the Opacity field. Click the down facing arrow at the bottom of the panel section to reveal the advanced properties. Choose Screen from the Blend Mode drop down list.

  29. In the Layers panel, click the toggle arrow next to the clipping mask to reveal the objects contained inside. Move the ellipse layer so that it is positioned just below the rectangle (now the top layer in the clipping mask group). Doing so adds the ellipse to the mask, thereby cropping it inside the rectangle.

 

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.