# Create a Realistic Vector Portrait Using Flash

Flash isn’t only about mathematics and complicated action scripts, it’s also about vectors. One of Flash’s most under-utilized options is its ability to create realistic vectors from scratch.

For all you hopeful vector artists out there who don’t have the pocket change to purchase another software application, or for those who just want to try vectoring the Flash way, this is the tutorial for you. Grab a cup of coffee and let’s get started!

## Final Result

Let’s take a look at the final image we’ll be working towards (full-size version available
here
).

## Step 1

Setting Up Your Work Space.

All artists know that setting up your work space is crucial to creating a happy working environment. As Flash makes it so easy to vector, we’ll only need a few tools for this project. Here are all the tools that you’ll use. Become very familiar with their shortcut keys so that you save yourself wasted time and unnecessary clicks.

Choosing the Right Image.

In this tutorial, we’ll discuss the method of tracing over an image to create a realistic vector. When duplicating this method, be sure to choose an image with a relatively large resolution. It’s more difficult to see the details on smaller images. I selected this image from dreamstime.com.

## Step 2

Import your selected image onto the stage (Ctrl + R). Under the properties panel, change the size of the stage to match the image’s size, then center the image on the stage (Ctrl + K). Lock that layer and rename it "reference". Save the file and be sure to save periodically.

## Step 3

Create a new layer and select the Line Tool (N). Change the color from black to another color that contrasts against your image. Using your mouse, draw a line to trace a small portion from point a to point b on the image. The line should be relatively small and the area between the two points should contain one curve. Next, select the Arrow Tool (V) and hover over the line you just drew until the arrow cursor shows a small curve icon attached to it. This icon indicates that you can curve the straight line. Do that by dragging the line in the direction you’d like to curve it, while holding down the mouse button.

You’re not limited to dragging the line only in the middle, you can also drag the line to the left or right.

You may also notice other icons appear as you create more lines and seek to manipulate them.

Continue to trace the remainder of the body, making sure that each line is small and composed of only one curve.

This ensures that your lines will look more realistic when finished. If you need to erase a selection, use the Arrow Tool to drag a marquee around the selection and press delete on your keyboard.

Name this layer "outline". Lock this layer and continue locking all others as you complete them.

## Step 4

Create a new layer for the face and name it "face outline". Make sure the line weight is 1 pixel and begin tracing the eyes, nose, nostrils and lips. Zoom into the image to capture the necessary details.

## Step 5

Create a new layer for the iris and teeth.

Select the Circle Tool (O) and click on the "no color" icon in the Color Mixer box.

Draw a circle over the image’s iris.

Copy the iris (Ctrl + C) and then paste (Ctrl + V). Move the copied iris over to the second iris.

In the Color Mixer box, change the type to Radial.

Select the inner color to be black #000000 and the outer color to be brown #412420. You can also choose the eyedropper tool to select a more authentic color.

Hover the Paint Bucket (K) over the middle of the circle and click to fill. Make sure that the inner black color mimics the appearance of an pupil, or slide the gradient displays until it suits your tastes.

Next, go to and unlock the "face outline" layer and select the eye outlines with your arrow tool. You may need to press the Ctrl key to select all of the individual lines that make up the eye outline. Copy it, delete it and then lock that layer. Return to the iris and teeth layer, right-click on the stage and select "paste in place". Delete all the parts of the iris that fall outside of the eye outline you just pasted in. Name this layer "eye color".

## Step 6

Create a new layer for the iris. Hide the "eye color" layer. Draw a circle and fill with a radial gradient with three shades of black and one gray color for the highlight. Use the eyedropper to get the exact color from the reference image.

## Step 7

Hide the iris and eye color layers. Return to the "face outline" layer and fill in the pinkish white color in the eyes.

Sample 3 colors from the eyes from the inner, middle and outer areas. Use the linear gradient in the Color Mixer. Here are three samples of colors found in the image #D5D0CD, #D3C7C7, #B5A09B. Check the realism of your work by unhiding the "eye color" and "iris" layers.

## Step 8

Create a new layer to add depth to the iris. Return to "eye color" and copy the iris outline (not the color, the outline only). Then paste the outline in place on layer 6.

Take the Brush Tool (B) and begin to draw a series of fragmented shapes around the iris. Be sure that the shapes are connected.

Fill this first layer with a color similar to #060202. Name this layer "iris detail 1". Create two additional layers, do the same, but draw a different set of fragmented shapes then name these layers "iris detail 2" and "iris detail 3". Use colors #361C16 and #452518 respectively. Move all three layers under the pupil layer.

Create a new layer and name it "iris highlights". Use color #COC2C7 at 45% opacity and the Brush Tool to draw specks of highlights in the iris.

Return to "face outline" and fill in the pink inner eye with #73372F and #8C5C4E. Fill in the eye waterline with the colors #896E67, #705C5D and #573E37.

## Step 9

Create a new layer for the eyelashes and outline them with the Line Tool and fill with Black.

View your progress by hiding the original image.

## Step 10

Create an eyelashes detail layer. Click on the outline icon in the Layers Box to show the outline of the eyelashes. Take the Brush Tool and create eyelashes with one smooth stroke each. Take the Eraser Tool (E) to tidy up the eyelashes.

Create a new eyelashes layer underneath the other eyelashes layers. Copy and paste the "eyelashes detail layer" into this layer. Change the brush opacity in the Color Mixer to 75%. Name this layer "lashes shadow". Move all layers pertaining to eyes into its own folder, named "eyes".

Create a brow layer. Use the Line Tool in black at 75% opacity to trace and then fill in with the color #563B30.

## Step 11

Create a new layer and then use the Brush Tool (B) in Black at 25% opacity to draw the individual hairs in the eyebrow.

Move all layers which refer to the eye into their own folder, named "eyes".

## Step 12

Return to "face outline" and select the outline of the lips. Copy it and then lock the layer. Create a new layer and then paste the lips in place. Referring to the base image, select the most common color in the lips, which in this case is #BE482E. Use the Paint Bucket (B) to fill in the lips with this color. Name this "lips base".

Create another layer. Change the color to #792820 and select the Brush Tool (B) to draw the creases in the lips.

Create another layer for the lips highlights. Use #DAB9B2 at 30% opacity and draw tiny dots of shimmer in the most natural places where the light would hit the lips.

Create another layer for the lips shadows. Change the color to #8F3E29 at 50% opacity. Draw a soft shadow around the lips in places where the light would not naturally fall. Use the base image as a guide, but feel free to follow your own intuition.

Create yet another layer for the lips shadow. Change color to #3516OF, still at 50% opacity. Use this to make the corners of the lips darker and give the overall mouth more dimension.

Return to "lips base" and change the color of the line to #49323A.

Create a new layer, named "highlights 2" and select the Brush Tool (B) tool with the color #DA8383 at 45% opacity to create subtle highlights over the lips. Alternate to #F3D8D8 and #F3D825, both at 45% opacity.

Create a new layer and paste in place the lip outline again. Next, draw teeth with the Line Brush (N). Select the Fill Bucket and select Radial Gradient. Choose the colors #D5C6C1, #934C47 and #A67973.

Move all of these lip layers into their own folder.

## Step 13

Return to the eyes folder. Go to the "eyelashes" layer and copy. Create a new layer named "eyelash shadow" and paste the eyelashes in place. Select all of the lashes and then change the color to #090909 at 90% opacity. Move the lashes over to the right and down with the keyboard arrow to create a realistic shadow.

Create a new layer named "makeup" and use the Brush Tool (B) with the color to #C16649 at 40% opacity. Draw the outer corner of the eyeshadow. Change the color to #E6CAB5 and brush the inner part of the eye.

Return to the outline and fill in with the color #94563D to create skin. Fill in the nails with a radial gradient using the colors #E4D1C3 and #A67973 for the colors.

## Step 14

Return to the "face outline" layer and change the nose outline color to black. Fill in the nostrils with the color #100708.

Create a layer named "nose highlights" and fill with color #DAA583 at 20% opacity.

## Step 15

Create a new layer for the highlights on the ridge of the nose and the forehead. Use the Line Tool (L) to draw the highlights’ shapes and then fill in with #DFBY97 and #D39770 at 20% opacity.

Create another layer for the face shading. Return to "face outline" and copy the outline of the face. Go back to the new layer and paste the face outline in place. Use the Brush Tool (B) in #814938 at 50% to draw a shadow along the outer circumference of the face.

Create another layer for the nose shadow. Use the same color and opacity value for nose shading. Move to the nose folder.

## Step 16

Create a lip shadow and eye shadow using #7A4B38 at 60% opacity.

Create another layer to tweak the eye makeup highlights. Use the color #E0B199 then move layer to the face folder.

Draw hair outline with the Brush Tool (B) in black.

Draw the hairline eyes.

Create curly lines with the Brush Tool (B) in #1C1817.

## Step 17

Create a new layer named "hand highlights" and use #C08D70 at 10% opacity. In another layer named "hand shadows", use #502618 at 10% opacity.

## Step 18

Create a new layer for the chest’s shadow. This step relies heavily on the reference image.

Zoom into the image with the Zoom Tool (Z) and use the color picker to select the proper color. Change the opacity to 15% and then draw shadows which mimic the natural shade in the reference image. Fill in the color and repeat.

## Step 19

Create a new layer for sparkle in the eyes, on the lips and for the nose ring. Use the color #FOE5E1 at 54% opacity with the Brush Tool (B). Move this layer to the eyes folder, above the makeup folder.

Draw the smile lines around the eyes in black at 25% opacity.

## Step 20

Delete the reference image, then resize the image by unlocking all of the layers, pressing Ctrl + A on your keyboard, then going to Modify > Transform > Scale.

Change size to 780 x 1201.8px. Resize the document properties by going to the Properties box and changing the size to match the image’s new dimensions.

Change the background color to something contrasting but complimentary, like #CC6600 and save. To save as a .jpg, go to File > Export >Export Image.

## Conclusion

That’s it! Don’t forget, you can apply this process to any image you like. I hope you enjoyed following along!

• André

Very nice result, but i think this is the kind of work for illustrator, not flash.

But thanks anyway and congratulations, a very illustrative and ease to learn tutorial.

• Mr Conde

What’s the point? Live trace. Bam Done!

• Mark Philp

What is the Point? The point is to prove to other people that you can do high Quality Vector’s with Flash Cs4 and not just Adobe Illustrator….

Very Good i like :D Will try it.

• Dick

No, I kind of have to agree with Mr Conde. This isn’t really the job for Flash (correct me if I’m wrong). Just doesn’t seem very practical to do this in Flash.

• durr

and if you don’t have illustrator ??

• justin yang

She sort of looks like she has cold sores in the corners of her mouth…

• Ta Neil

why would you make a racist comment like that?

• http://www.dsaportfolio.com.br/ Diego SA

Well, it really seems realistic, but looking in full-size, some partes reminds Paint work. But what matters is the final result, isn’t it? Very good!

• http://labs.dariux.com Dario Gutierrez

Look good, another great feature of flash. Great tut.

• flora

Thanks for effort :)

• Janet

I don’t always like the results with Live Trace in Illustrator and like to use Flash for tracing vectors as you control exactly which bits you use – great tutorial. :-)

• André

Wow, the live trace of Illustrator is very much better tham trace bitmap of Flash, in any kind of image, the final result will always be much better..

But the point is, this kind of work is job for illustrator, not flash, but people can use whatever they want…

• Rogério Barreto

Excelente. Eu gosto muito desse tipo trabalho em vetor.
Pena que levo muito tempo para executar.
Parabéns!!!

• http://www.vimeo.com/sleo sleo

Wild Style ; )

• http://www.nouveller.com/ Benjamin Reid

If you only have Flash and you want to build these figures for animation and you can do it in Flash, why would you want to fork out for Illustrator, it’s quite a hefty cost.

Sometimes I prefer bending the lines in Flash than using Illustrators curves.

• http://www.brianwiltshire.net Brian

Also prefer to draw in Flash, Maybe cuz im more used to it, but find it much easier to control the vector shapes in Flash…

• http://http://www.crearedesign.co.uk/ rory

Very good…however I was waiting for a cheeky smile to creep out as it was done it flash. I was watching the static image for ages till I realised it WAS static. You’ve done a really nice job though, never thought to use flash to draw illustrations.

• bananab

I don’t think you should use watermarked images from dreamstime or other stock photo providers as source images for image recreation or ‘restyling’ tutorials.

• http://snaptin.com Ian Yates
Staff

For the tutorial itself Jacqueline purchased the image in question. As we can’t redistribute copyrighted material in either source files or tutorial images we used the watermarked version for demonstration purposes.

Hope that clears things up ;-)

• bananab

The watermarked version is itself copyrighted, and its appropriate use is addressed specifically in the site’s Terms and Conditions:

You may not use a Watermarked Image in any final materials distributed within your company or any materials distributed outside of your company or to the public or in any online or other electronic distribution system. You may not modify, alter, or remove any visible or electronic watermark, or disassemble, reverse engineer, or decompile any Image. Except for this limited, internal testing and sample use, Dreamstime grants you no other rights, and you may not distribute, sublicense or make available for use or distribution any Watermarked Image.

http://www.dreamstime.com/terms

• http://snaptin.com Ian Yates
Staff

Fair enough, I’ve removed the main watermarked image. As credit is given and we’ve linked to the original file, I don’t imagine dreamstime will have an issue with fragmented use throughout the rest of the tut.

Thanks for pointing this out.

• bananab

I imagine they would, as the image has been modified and had its watermark removed in the final version, both of which are addressed in the above terms. It is basically a derivative work.

• http://snaptin.com Ian Yates
Staff

No it isn’t. As I said before, Jacqueline purchased a high-res copy of the file in question which granted her a Royalty-Free License. According to the terms and conditions you pointed out on dreamstime.com:

‘What Royalty-Free means is that you pay for the image only once and then you can use it as many times as you like’

They go on to say:

‘The high-resolution images that you download under the regular Royalty Free (RF) license may be used to make fine art prints, on a web site, in a magazine, newspaper, book or booklet, flyer, or any other advertising and promotional material, in either printed or electronic media

Furthermore:

‘you may use the image in a concept in as many websites as you want, for any number of clients’.

• bananab

I believe you are absolutely correct, and I apologize.

• http://snaptin.com Ian Yates
Staff

No problem, actually you taught me something important..

It turns out (after having trawled the terms and conditions for half an hour) that purchased hi-res images can be displayed on websites at anything up to 800px wide.

I needn’t have worried about a watermarked version, next time I’ll just use the original :)

• http://www.pearlofafrika.com Jacqueline

Thanks to everyone for your feedback. I hope to use your comments for my betterment in future works. :)

• Ronaldo

These kind of vector drawing are faster and easier with Flash than with Illustrator. Of course there are much more options and stuff you can use with illustrator.
Many times I do the outlines and simple colouring using flash and export to illustrator so I can use other tools (mesh tool, gradients, blends, …). It’s an awsome and effective way to handle vectors.

nice job

• Mindgirli

Thanks Jacqueline, Keep up with the innovative ways to maximize flash! I thought it was really nice to see a tut with that accented such warm tones. In vector!!! It’s rare! Loved It!

• Eric

It’s cool, and it does look good, and I think the main question here is practicality. in other words, why would one do this in flash?

As with all of the CS products, there is a lot of overlap and cross compatibility. You can obviously do this in either flash or illustrator, but the primary question is when you are done with it, what is your next step?

I feel that:

If your plan is to deploy to the web with some kind of complex user interaction and animation – DO THIS IN FLASH. Drawing in flash keeps file size down and preparing for use with AS3 will be much faster and easier.

If you are just using this for a nice display piece the DO IT IN ILLUSTRATOR. Live trace works very well when you understand all of the settings, but as someone pointed out, it does always work out so well. So you’d need to draw it by hand as the tutorial here has done. The drawing tools in illustrator are better suited for this

And when all else fails, Use what you are comfortable with and where you do your best work. This same tut could be done in AI, FW, PS, and even in AE with the new cartoon effect. Some ways easier than others, but they will all get you to point B.

As they say, more than one way to skin a cat.

But I always say, Why are we skinning a cat?? find an answer to that and you will probably figure out the best way to skin it!

• Ta Neil

Beautiful! Thanks for the tutorial

• Patsy

Look folks. It’s an artform. People paint with sponges, trowels and potato wedges, and there aren’t any people hanging about arguing over what its for or the tools used. Its a piece of art, so the point is the unique look of the picture. Which is really great by the way:)

geez

• Murugan..

its great one….Keep it up…

• Murugan..

Its great…

• http://www.vaishalimallik.co.in/ vaishali

beautiful work of art and a great tutorial!
keep it up Jac – u’ve really inspired me!

• http://www.vaishalimallik.co.in/ vaishali

beautiful work of art and a great tutorial!! u really inspired me!! keep it up!!

• Pingback: uberVU - social comments