Drawing an Emoticon in Expression Blend 4

Following the steps you will be introduced to the Blend Workspace, Panels, Tools & Graphic Element Creation. In this tutorial, we will be creating an "Emoticon" or "Smiley" face from scratch.

Step 1: Start a New Project

Open Blend select file ->New Project.

Select Silver light 3 Application + Website  & name the project "Basic Drawing".

After hitting OK, the new project will be created  & main page will be open on the Art Board.

Fig 1.png

Step 2: Draw a Circle -> Select ellipse tool from tool box on the left side of the blend workspace.

Right-click on 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 Art board holding the Shift key.

Step 3: Use of  Brush -> 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 & change the Brush type from Solid to Gradient by selecting the Gradient Brush icon found in the Brush Type menu below the Brushes.

Step 4: Fill Color -> #f2663c

To make the emoticon look round change to a Radial Gradient by clicking the icon below the gradient bar in the Brushes section.

Select each gradient stop to modify its color & 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%  &  #DEAE32: 100%.

Set the Stroke below the Fill Brush.

Fig 2.png

Note: The same Brush Types are available for Stroke, for our emoticon  the default Solid Black Brush is perfect. To add more, change Stroke Thickness  found in the Appearance section from 1 to 5.

Step 5: Draw an Eye -> Select the Ellipse Tool (L)  &  draw a smaller circle to represent an Eye.

To reposition or scale the circle use the Selection Tool (V).

Change the Fill gradient to  #FYFFE: 84.5,  #545454: 100%  to look like an eyeball.

Draw a smaller Ellipse with a dark Solid Color Brush to act as the pupil.

To add some light refraction, draw a smaller Ellipse with a Solid White Fill  &  no Stroke, positioned in the upper left of the pupil.

Fig 3.png

Fig 4.png

Step 6: Grab the Eye Parts -> Select the three Ellipses representing the eyeball, pupil & light refraction by holding the Shift key down & 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 Art board & holding the mouse down while dragging.

Step 7: Copy & Paste the Eye -> Right-click the selected elements or go to Object -> Group Into & select Grid.

In the Objects panel , name the grid Right-Eye by double-clicking on it or right-clicking & selecting Rename.

With Right-Eye selected copy & paste to create a new eye.

Rename Right-Eye Copy to Left-Eye & reposition the new eye next to the first one.

Fig 5.png

Step 8: Add an Eyebrow -> In the Right Eye grid  select the large circle representing the eyeball.

Copy the circle & Paste a new circle positioned slightly above the original.

Select "Convert to Path" option from the Object Menu -> Path -> Convert to Path.

The highlighted blue colored points appears. Then accordingly design the Eyebrow by stretching the points.

Fig 6.png

Step 9: Draw a Mouth -> With the Layout Root grid selected, click the Rectangle Tool (M) & draw a rectangle below the eyes.

Change the Radius X & Radius Y, found in the Appearance section of the Rectangle to 10.

To remove the worried look on the emoticon's face right-click the Rectangle & go to Path -> Convert to Path.

Now with the Direct Selection Tool (A) pull the bottom two points down & closer together to make a smile.

Fig 7.png

Step 10: Final Image

Fig 8.png


Summary : With the help of this Article you can learn basic use of tools of Expression Blend.

Up Next
    Ebook Download
    View all
    View all