Expression Design: Step By Step Designing my Dragon icon

Posted on October 2nd, 2009 by alfredo

kick it on DotNetKicks.com

This article is not exactly about programming or photography. Is about a tool that i enjoy a lo when designing icons or creating UI interfaces for XAML and silverlight. Or simply a vector image. I’m going step by step through the process i followed while creating this draconic symbol when i was imagining a logo for myself. First step open expression design this is what the program looks like:

1

We are going to continue by drawing a black square on the board by selecting the square tool and dragging the mouse it should look like this:

2

Now we draw the shape that we want to cut from the square to begin giving it shape in order to cut the shape from the box in order to start making the design you want to end up with. In my case I’m trying to remove a part of the square to create a snout for the dragon icon. I made the shape then go to Object > Path operations > Back minus front. It ended up looking like this:

3

I repeat the step to create the small bump on the dragon head it starts to look as follows:

4

In the next steps i want to design the left side of the design my idea is to make it look like butterflies wings to make an E like the one in the middle name and be connected to the back of the dragon. The first step of this was to do a circle in a color that contrast with the color I’m using for my design. I elongated the circle to look like the top part of the wing using the direct selection tool the white arrow in the tool box and select an anchor to elongate it and make it look like below:

5

In order to create the bottom of the wing i selected the shape and made a copy of it afterwards i reflected it horizontal and align them then removed the circular parts of the shape using a square and the Object > Path operations > Back minus front. This is what i ended up with6

For the next step we wanted to hollow the wings in order for it to look the way that i envision it. I copied the wings and change their size to fit the one i wanted. At this point it looked like this:7

To Remove the red filling we use the same technique as before Object > Path operations > Back minus front. Making the wing look as follow:

8

With the wings ready we need a back of the dragon in order to attach them. I created shape using the pen tool that would cut the way i wanted it looked like this:9

I repeated the step before until i got the back that i wanted and it ended up looking like this:10

Now it is ready to attach the wings to the back in order to do this i grabbed the wings objects and place it in the position that i want it. Afterwards pressed Object > Path Operations > Unite. To make it all into one image it ended up as follows:

11 

After this i decided to work on the eye i created a circle again of a color contrasting with the background then using the direct selection tool made it have the shape of an eye by placing the circle inwards toward itself.

12

Next i wanted to give the dragon piece the shape of A therefore i needed to cut the innards on that shape. After creating the original shape it went like this :13

I used the direct selection tool to make it exactly the way that it would cut. This was the way that it look:

14

After this we needed to shape the bottom and it was done in a similar fashion, Created a new shape and distorted till it would eliminate the bottom in the shape. It looked like this at this point:

16

The next steps was to create the claw of the dragon shape procedure like the one used in the steps before was followed and it looked like this :

19

Afterward we created the last leg by cutting and uniting again and ended with the final product that was the following :

23

Hope that this helps anyone interested in starting to use Expression Design.

Tags: personal projects, programming

Categories: Personal project, Programming tutorial

2 Responses to 'Expression Design: Step By Step Designing my Dragon icon'

  1. jalculley says:

    Great blogpost, good looking website, added it to my favs.

  2. alfredo says:

    Thanks for the comment.

Leave a Reply

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera