Drawing an emoticon in Expression Blend

First steps in getting to know the tools and workspace in Blend

Drawing vector-based elements provides a simple and familiar introduction to Expression Blend. Following the steps in this tutorial you will be introduced to the Blend workspace, panels, tools and graphic element creation. You will also about different available Brush Types and how to save Brushes for reuse.

In this tutorial, we will be creating an emoticon or “smilie” face from scratch. Using various techniques demonstrated you can decide the composition and expression of your emoticon.

Tools Time Download
Expression Blend Silverlight 30 minutes
30 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 Start Drawing

Open Blend and go to File -> New Project. Select Silverlight 3 Application + Website as your project type and name the project BasicDrawing. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.

02 Draw a Circle

Find the Tools panel on the left side of the Blend Workspace. Left-click the Rectangle icon to open the sub panel for more shapes. Click the Ellipse icon or use shortcut key L to select the Ellipse drawing tool. Draw a large circle in the middle of the Artboard. Hold the Shift key while drawing to constrain the width and height to remain equal.

03 Change the Brush Type

With the circle selected, look at the Properties panel to the right of the Workspace. At the very top you’ll find the Brushes section. Locate the Fill Brush and change the Brush type from Solid to Gradient by selecting the Gradient Brush icon found in the Brush Type menu below the Brushes.

04 Add some Color

To make the emoticon look round, change to a RadialGradient by clicking the icon below the gradient bar in the Brushes section. Select each gradient stop to modify its color and position. Click on the gradient to add a new stop. Double-click a gradient stop to remove it. The gradient shown in the image has three stops: #FDF365: 34.9%, #FEE834: 71.1% and #DEAE32: 100%.

05 Set the Stroke

Find and select the Stroke Brush below the Fill Brush. Notice that the same Brush Types are available for Stroke, for our emoticon though, the default Solid Black Brush is perfect. To add more definition change StrokeThickness, found in the Appearance section from 1 to 5.

06 Draw an Eye

Select the Ellipse Tool (L) and draw a smaller circle to represent an eye. To reposition or scale the circle use the Selection Tool (V). Notice the Fill and Stroke Brush default to the previous style used. Change the Fill gradient to #FFFFFF: 84.5, #545454: 100% to look like an eyeball. Draw a smaller Ellipse with a dark Solid Color Brush to act as the pupil. And to add some light refraction, draw a smaller Ellipse with a Solid White Fill and no Stroke, positioned in the upper left of the pupil.

07 Save a Brush to Use Later

Select the Ellipse representing the eyeball and click the small white rectangle icon next to the Fill Brush. From the menu that pops up, click Convert to New Resource and name the new Resource EyeBallBrush. Resources are similar to CSS classes or saved Styles in Photoshop and can act as a single reference for multiple elements.

08 Grab the Eye Parts

Select the three Ellipses representing the eyeball, pupil and light refraction by holding the Shift key down and clicking the last three Ellipses found in the Objects panel. Alternatively, you can draw a rectangle around the Ellipses with the Selection Tool (V), by clicking on the Artboard and holding the mouse down while dragging. Since the head Ellipse is underneath the eye parts it will be selected too. To toggle selection of an element, hold the Ctrl key down and click on it.

09 Copy and Paste the Eye

Right-click the selected elements or go to Object -> Group Into and select Grid. In the Objects panel, name the grid rightEye by double-clicking on it or right-clicking and selecting Rename. With rightEye selected, copy and paste to create a new eye. Rename rightEye_Copy to leftEye and reposition the new eye next to the first one.

10 Test the Resource Brush

Now that we have two eyeballs we can test how the Resource EyeBallBrush works. In the upper right, select the Resources panel and show the available Resources by clicking the arrow icon to the left of [UserControl]. Click the gradient next to EyeBallBrush to open the Brush Editor. Change the gray gradient stop to a light red to make the emoticon appear stressed or tired. Notice both eyes change because they are linked to the same brush. Undo the color change to make the emoticon appear healthy again.

11 Add an EyeBrow

In the rightEye grid, select the large circle representing the eyeball. Copy the circle and Paste a new circle positioned slightly above the original. Paste another copy positioned much higher than the original. Select the lower copy first and then select the higher copy, then from the context menu choose Combine -> Subtract. You can now scale and reposition the newly created Path like any other element.

12 Color with the EyeDropper

Select the new eyebrow Path and change the Fill Brush type to Solid. Find the EyeDropper icon on the Brush Editor tab in the lower-right corner of the color picker and Select the Color EyeDropper tool. The color of the Fill Brush will now change to the color of the pixel you click anywhere on your desktop. In the image shown, the pupil was clicked with the EyeDropper.

13 Add the other EyeBrow

With the leftEye grid selected, click the Pen Tool (P) and draw a new path to be used as the other eyebrow. Points can be added or removed using the Pen Tool (P). Points can be selected and modified with the Direct Selection Tool (A).

14 Draw a Mouth

With the LayoutRoot grid selected, click the Rectangle Tool (M) and draw a rectangle below the eyes. Change the RadiusX and RadiusY, found in the Appearance section, of the Rectangle to 10. To remove the worried look on the emoticon’s face, right-click the Rectangle and go to Path -> Convert to Path. Now with the Direct Selection Tool (A) pull the bottom two points down and closer together to make a smile.

» Next Step

Now that you have a handle on basic drawing techniques, let's take a look at Element Transformations.

To continue learning about drawing in Expression Blend read this Drawing shapes and paths article on the Expression Community site.

blog comments powered by Disqus