Introduction to Computer Graphics – CGS-1586C

Spring Quarter 2011Instructor: Amanda DickinsonTues/Thurs from 6:00PM to 7:50 PM

Overview for Today

Project 4 Due Final Project Tutorial – Vector Portrait in

Illustrator

Project 4 Due

Please turn in all 3 files: Word doc with works cited JPG file PSD file

Final Project

Final Project - What Lies Beneath

"You can't judge a book by its cover," warns one old adage. "Beauty is only skin deep," says another, and it's true. We tend to view things on their surface value, but often what we see in front of us is not always the full picture. If you cut away that surface you'll often find a hidden surprise.

Show us a cross-section or cut-away view of what surprises might really lie hidden behind the surface, any surface.

Due Date: June 14th

Final Project

Final Project – The rules You can use Photoshop and Illustrator 3 files named lastname_firstname_finalproject

Works cited, JPG, PSD Work must be relevant to the theme Don’t use copyrighted material The file size:

Minimum: Width 600px, Height 1000px Maximum: Width 1000px, Height 2000px DPI: 72

You have two weeks to get this done, I have high expectations from all of you.

Final Project

Tutorial – Vector Portrait in Illustrator

Follow this step by step tutorial for the making of a vector art portrait of Tron Legacy’s Quorra. Learn how the portrait is carefully traced and vectorized in Adobe Illustrator to create an interesting vexel (raster image that imitates vector) style design.

The term vexel art matches the style of this illustration, where a semi-realistic image is produced from numerous layers, but to be fully recognized as a vexel illustration the artwork has to be pixel based.

When creating this type of artwork you can go as simple or as detailed as you like. The less layers, the more stylized and ‘artsy’ the illustration becomes, much like this piece. On the other hand if you have a good few days to spare a stunningly realistic design can be created using thousands of layers.

This tutorial will test your understanding of Photoshop and Illustrator. Follow the directions carefully and be patient.

http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-beautiful-vector-portrait-in-illustrator

Tutorial – Vector Portrait in Illustrator

Tutorial – Vector Portrait in Illustrator

Step 1: The first step when creating any vexel style

portrait is to source a subject. Locate the Quarra picture in the Week 9 folder.

Open up the image in Photoshop, and add a subtle Smart Blur to remove the finer details.

Tutorial – Vector Portrait in Illustrator Step 2:

Next, make an adjustment layer and use Posterize, change the levels to 15.

As previously mentioned the more layers you create the longer you’ll be sat tracing, but the overall image will include a much deeper range of tones and will become hyper-realistic.

Duplicate the Smart Blur layer one more time and place it above the posterized layer.

Change the layer blending mode to Color to remove the ugly green and blue tones added by the posterization effect.

Tutorial – Vector Portrait in Illustrator

Step 3: Once satisfied with your

adjustments, crop the image for a closeup of her face.

Export this image for web using JPG high settings.

Bring the JPG into Illustrator.

Name your illustrator file lastname_firstname_portrait.ai

Tutorial – Vector Portrait in Illustrator

Step 4: Use the Pen Tool to trace the brightest

highlight on the cheek. Don’t worry about staying true to the exact

outline, rounding off corners and drawing a more basic shape can often make for a better final image.

Tutorial – Vector Portrait in Illustrator Step 5:

When the shape is complete, switch from the Pen tool to the Eyedropper and sample a tone from the base image.

Switch out the default fill and stroke of the vector shape for this color.

Move onto the next level; trace; then sample the next tone.

Tutorial – Vector Portrait in Illustrator Step 6:

Continue the process of tracing each subsequent layer and sampling the tones from the base image. Soon the portrait will begin to take shape.

As two areas of the design meet, you may need to alter the stacking order by moving the layers around.

Tutorial – Vector Portrait in Illustrator Step 7:

The eyes of any portrait are the most important areas, so take the time to build up as many layers of detail as possible.

Notice how the whites of the eyes are more than just white – They include a range of subtle color changes which make for a more realistic image when viewed from afar.

Tutorial – Vector Portrait in Illustrator

Step 8: As the facial features are added to the portrait the

design becomes increasingly recognizable, yet it maintains that cool stylized effect with the visible layers and shapes.

Tutorial – Vector Portrait in Illustrator Step 9:

Elsewhere on the artboard draw a wide, flat oval. Use the Pen tool to convert the anchors on each end to create sharp points.

Press the ‘new’ icon in the Brushes palette to create a new brush setting.

Tutorial – Vector Portrait in Illustrator

Step 10: Select ‘New Art Brush’ from the options

box, then change the Method to Tints. This will allow us to change the color of the

brush strokes if necessary.

Tutorial – Vector Portrait in Illustrator Step 11:

Use the Brush tool along with the new brush setting to add some extra definition and detail to the eyes.

Outlining the eye and drawing a series of eyelashes really helps them stand out.

Tutorial – Vector Portrait in Illustrator

Step 12: On a new layer use the Pen tool to roughly draw a

shape to represent the basic hair line. It doesn’t matter too much about the awkward

shape.

Tutorial – Vector Portrait in Illustrator Step 13:

Use the brush tool with a 0.25pt stroke setting to draw in individual strands of hair to disguise the ugly hairline outline.

If required, double click the Brush icon in the tools palette to alter settings such as ‘Keep Selected’.

Tutorial – Vector Portrait in Illustrator

Step 14: Subtle highlights in the hair can be created by

drawing thin 0.15pt strokes using brighter blue colors.

A graphic tablet really comes in handy here.

Tutorial – Vector Portrait in Illustrator

Step 15: Draw a few layers of highlighting strokes,

then change the transparency mode to Overlay and alter the opacity of each layer to tone down their prominence.

Tutorial – Vector Portrait in Illustrator The portrait itself is now complete.

If we have time, we can now add a background to it. If not, put in the course folder for grading.

Tutorial – Vector Portrait in Illustrator

Step 16: Draw a rectangle to enclose the design and

send it to the bottom of the layer stack. Add a radial Gradient fill using soft blue

tones from the portrait.

Tutorial – Vector Portrait in Illustrator Step 17:

Using a range of vexel style contour shapes in the background helps complement the style of artwork used in the portrait.

Change these shapes to 15% opacity to tone down their prominence so they’re hardly noticeable.

Tutorial – Vector Portrait in Illustrator

Step 18: A simple line of text finishes off the design nicely.

Here we can add the name ‘Quorra’ in ulralight Helvetica Neue with super high tracking, neatly underlined with a thin border.

Tutorial – Vector Portrait in Illustrator The whole process can

be a little tedious, but with patience it can be relaxing to get your head down creating simple shapes for hours on end.

The final artwork makes it all worth it, especially if you take the time to create a super realistic design with numerous layers.

Put the finished design in the course folder for grading.