Draw Your Self Portrait

---

Take a Photo of Yourself

I have an old 3 megapixel Powershot S200 Digital Elph. I sat against a solid colored wall, held the camera up, and snapped a photo. This photo below will serve as the basis of my Illustrator Self Portrait. It worked out alright. The shadow behind my head isn't ideal. The wrinkled shirt is distracting. There isn't great contrast. My eyes are too closed. And the lighting is a little dim. Being that we are converting to vector though its good enough. We can make changes that we want to in Illustrator.

The Pen Tool will be Our Best Friend in this Tutorial

Almost all the shapes made in this tutorial will be created with the pen tool. I love using basic shapes, but sometimes nothing beats the pen tool.

Setting Up Your Document and Workspace

I created a new document 600px by 600px. I want my portrait to be a perfect square because I'm planning on using this as the basis for a series of Gravatars. Go to site.gravatar.com for more information on setting up some Gravatars. My photo is a rectangle. I don't want to crop it so that means I'll have to extend my shoulders a bit.

Create a box 600px by 600px and make sure it is centered. Then create crop marks out of the box. With the box selected go to Object > Crop Area > Make. Now create a box about 630px by 630px. We make it a little big to give us some bleed area. I've found that if you don't give some bleed then you might get 1px highlights on your edges. Then fill the box with a neutral color. I used the Eyedropper Tool (I) and clicked on the background in the Photo. This gave me the fill color for my background. I used this Eyedropper selection technique a lot in this tutorial. Now center your box. You should have something similar to the image below.

Working on the Large Shapes First

A good technique for creating this type of illustration is to work from largest shapes first and then add in details in layers. We will work from the back to the front. The large shapes in this illustration are the face and shirt. Grab your pen tool and lets get to tracing. Below You can see the shape I created outlined in blue. You can see the areas that are carefully traced. You can also see the areas that don't need to be exact. The hair line on the top of the head can be overlapped because the hair will cover that up. Same with the goatee down by the chin. The shirt will delineate the line of the neck. It will rest on top of the face. So the neck doesn't need to be defined when drawing the face. It can just overlap into the shirt area. Then I used a gradient fill for the skin of the face. Its not exactly the color of the skin in this photo. I just estimated what my skin would look like if the lighting was a bit brighter.

Next we are going to draw the shirt. We need to extend the shirt out to the dimensions we have set up. Go ahead and overlap past the crop marks without a concern for your line work there. Though be careful to define the shoulders and the neck well. I used a very light gray to a white gradient for the shirt.

Adding In the Hair

Next I turned off the face and the shirt. I traced the hair. My strategy is not to trace exactly, but rather to create a good balance between smooth shapes and rougher hair looking shapes. Take the top of the head for example. Its smooth up top, but the hair is defined with jagged edges on the bottom side. I turned the face and shirt back on in the image below. You can see a similar strategy was used in creating the goatee and eyebrows.

Making the Lips Rock

I gave my self some rockin' Mick Jagger lips. In the zoomed in version you can see the four shapes that make up the lips. One large upper lip. A large lower lip. And two smaller shapes that define the space where the lips meet. You can see (below left) that you don't need to draw this perfectly as it will look fine at the size we are using it at (below right). Also notice how the gradient gives some dimensionality to the lower lip. There are four colors used in the lower lip gradient. The gradients in the middle section are set up opposite each other to excentuate the meeting point of the lips. There is a highlight on the bottom left and a strong shadow making up the shape above.

Time to Add in Some Sight

From the screenshot below you can see I used a similar strategy with creating the eyelashes that I used for creating the hair. I have some areas of smooth rounded edges that counter the jagged representation of eye lashes. I made the eye lashes on the left first. Then I copied and flipped them. By going to Object > Transform > Reflect. Then in the Reflect Window I selected a Axis:Verticle and hit Copy. Then I made some point by point modification with the Direct Selection Tool (A).

I turned on our reference image so you can see what I was tracing. It is a bit pixalated at this zoomed in view. The eyes are made up of three shapes. The whites of the eyes have pink at each side giving it some dimensionality. My eyes are colored blue and my pupils are black. I also used the same Object Reflection technique described above and then moved the shapes around a bit.

Shading

The Nose is defined with the use of shadows. So, the nose is made up from the negative space. The shadows are all made with gradients that go from the skin color to a darker brown. Then I set the Opacity to a range of somewhere between 15 percent and 80 percent. The dark shadow side of the face is set at 50 percent. Under the Eyes is at 20 percent. The light side of the face and the neck shadow are set at 15 percent. The nostril is set at 80 percent.

Use the same shadow techniques to build up the ears. Below you can see the details of the shapes used to create the details of the ears. The same kind of shadow opacity techniques are used here. I kept it light. The shadows range from 10 percent to 20 percent.

I also used the same kind of technique to add some minor details to the shirt. I kept it really light here. But I added some light gray to separate the arms and chest. I also added some light gray around the neck line.

Drawing My Glasses Will Add the Finishing Touches to This Illustration

I'll review the process of making this from left to right, which is the order I created it in. The part that goes over the ear is a separate shape and has a gradient that goes from very dark on the left over to a highlight on the right. Then I drew the main stem of the left side. I drew the shape that connects the stem to the main lens separately. There are also a couple little screws sticking out. The larger left part of the frame is made with a gradient as well.

Then I drew the nose pad. Its set made up of rounded rectangles. I rotated them to put into position and gave them an opacity so they wouldn't stand out. The nose pads on my glasses are actually translucent plastic so it made logical sense to make it transparent as well. Then I filled in the lens with a brown color and gave it an opacity of 15 percent.

To make the right side I copied the left lens and frame. Then I flipped the copy around. With both the lens and frame still selected I used Free Distort to get the angle correct on the lower right portion of the lens. I went to Effect > Distort & Transform > Free Distort and I moved the lower right corner in a bit and hit OK. See the image below.

Then I connected the frames across the bridge of the nose. And I added the stem behind the right lens. And the small connecting piece on the side. The final glasses are pictured below.

The Layers

After the Illustration is all done the image below shows how all the layers look. Nice and organized. The image on the left is at 100%. Compare it to the Gravatar size below.

The next thing I did with this Illustration was create a set of Gravatars with the same basic Profile Self Portrait of me, but I brand the background and shirt based on my different websites. That way when I comment on blogs that use Gravatars my different branded Portraits show up. Its a way to promote my different projects while retaining a similar identity. Its a way to brand myself.

I'll be writing a post over on Blog Elephant about the use of the Gravatars for the purposes of branding shortly. I'll leave a comment when that is up. I may also be using this Illustration on my different website's about pages. I haven't decided on that yet though. And honestly I'm sick of looking at myself. I don't think I'll be looking in the mirror this week. I need a break from my reflection.

View the final Illustration at a Gravatar size of 80px square. Compare it to the 600px square shown above that we have been working with. You can see a lot of the shading is lost at the Gravatar size, but overall a nice and crisp vector image. If I decide to use this image for my website's about pages at a larger size the shading will show up more. Let me know if you have any questions in the comments.