Quick Tip: Rapid Vector Portrait Process

This Quick Tip tutorial will guide you through the process of making a vector portrait rapidly. A picture will be used as a guide for black and gray paths. We’ll review some shortcuts that will allow you to achieve good quality results with few steps and minimum fuss.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Photoshop CS4 and Illustrator CS4
• Difficulty: Beginner
• Estimated Completion Time: 1-2 hours

Step 1

Take a picture of yourself or of an other person.

Step 2

Open the photo in Photoshop, unlock the layer. Using the Pen Tool, create a path around yourself. After the path is completed, with the Pen Tool still active, right-click it within the image and select Make Selection. A new menu will pop up, set the Feather Radius to 0 px and press OK. Now you have the selection, and while it is still active, press the Add Layer Mask button, which is under the layers panel. Now the background of your photo should be white.

Step 3

Press the button Create New Fill or Adjustment Layer under the layers panel and then select Threshold. Now you will be creating the guides for black and gray paths in Illustrator. You will need one image with strong threshold settings and one with lower. Decrease the threshold lever until you have settings that you like. Then go to File > Save As and save the image in JPG format. Go back to Threshold and now increase the threshold settings so that you would get a much stronger effect and save out an image as well. And you are done with your work in Photoshop! Let’s jump back to Illustrator.

Step 4

Open up both of the images in Illustrator. Now select one of the images and copy it. Go to another image and press Command + B to paste it in the exact position.

Now select one of these images again, and in the top menu press the triangle located to the right of the Live Trace button (shown below). Select Tracing Options. A new window will appear, be sure to put a tick on Preview so that you can see how different settings affect your image.

I used these settings: 4px Blur, 4px Path Fitting, and 1000px Minimum Area. And, after you are satisfied with the results, press Trace and then Expand.

Do the same for other image as well.

Step 5

Create a rectangle path and fill it with color, then just place it in the bottom of all the layers as your background color. You should now have two groups, make one of these invisible by unchecking eye next to it. Now, in the visible group, delete all the white paths, as they won’t be needed. Again, you will need to repeat the process for the other group.

Step 6

Select all of the paths of the group which had a higher Threshold Level and change their color to gray. Make sure this gray group is under the black group. Grab the Pen Tool, draw a new path around the face, and fill it with white. Place this path above the background layer.

Step 7

This step will be the most time consuming and the most creative one. You will need to select each path and clean it up. I started with the black paths. Best way to clean them is to Grab the Pen Tool and delete unnecessary points in the paths. With less points, paths will be way easier to control. I also created a new path for the nose, except I didn’t use any fill color, instead I applied a stoke fill. After the black the group was finished, I did the same for the gray group.

Step 8

All you have left to do is to add a few details to your vector portrait, like the white path for the eyes and the lips.

Conclusion

Using this technique, you can create a lot of realistic vectors rapidly, and they don’t have to be black and white, you can add as many colors as you like. Using exactly the same technique, I have created a t-shirt as well.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.