Pardon me if you have already seen similar tutorials of Sheppard Fairey’s famous Obama Hope poster. But I just can’t help it, I need to do one for this blog. I have been wanting to do this for a very long time. Until the other day, I thought about creating one for my Twitter page. Instead of putting an ordinary photo, I’d put a posterize one instead. So after doing mine, I need to do one for GDFR tutorial. I chose to create one for a similarly noble person who 25 years ago died a hero fighting for a good cause. For Ninoy. By the way, there is also an “iamninoy” campaign launched last year tributing Ninoy Aquino’s 25th death anniversary as Philippine’s martyred national hero. You may visit their website at http://www.iamninoy.com. And for my own tribute to Ninoy, here’s the final image preview.

Let’s get it on!

For the color palette. We will be using four colors and a pattern.

• Red – #E7000A
• Light Blue – #4F919F
• Dark Blue – #01253D
• Beige – #FBDE8E
• Line Pattern – Alternate colors of “Beige” and “Light Blue”

Step 1: First, you need to find a portrait style photo. Looking around, I found this one rare photo of Ninoy to work on.

Step 2: Next step after finding your image is to open it in Photoshop. We will extract four threshold images from photoshop and work on it in Adobe Illustrator to vectorize and create our final vector poster.

Step 3: Before we can extract our thresholds, we need to “Posterize” our image. Go to Image > Adjustments > Posterize, then enter “5″ for levels, click “ok”.

Step 4: Now we’re ready to create our tresholds. These threshold images will serve as our pattern guide in Illustrator to create the vector layers. Go to Image > Adjustments > Threshold. We are going to create four patterns with the following threshold values: 195, 170, 125, and 60. Now these threshold values are not necessarily the same for all kinds of images. You just need to create four distinct patterns from darkest to lightest. Below are sample threshold previews for 195 and 170 values.

It’s up to you how you do all four thresholds. What I did was apply each threshold then save it as a separate psd file, and then undo the threshold applied, then apply the next threshold and save it again in psd. So you’ll end up with four psd files for each threshold value.

Step 5: Before we start working on our vectors, we need to create our own color palette in Illustrator. Open Illustrator and create a new document for the line pattern. Create a 4 px by 4 px size document. Color the upper half of the page light blue (#4F919F) and the lower half beige (#FBDE8E). You do this by creating two 2×4 rectangles similar to the image below. Then select the two reactangles or use Select All command (Crtl+A), and drag it to the Swatches Palette.

Create the rest of colors and you’ll have a Swatches Pallete similar to this:

Save your custom Swatches Palette by selecting the icon on the lower left portion of your Swatches window, then select Save Swatches and name your palette anything you want, I named mine “posterize-obama”. Close the line pattern document.

Step 6: Now it’s time to create our main document. Create a new document in Illustrator and size it appropriately. I used a 400px by 600px size document.

Step 7: Create four layers for the four threshold files. Import (Place) each threshold psd file placing them on each of the four layers. Start off from the darkest pattern (195) to the lightest (60).

Then you can now create four more layers on top of each pattern layer. These four new layers will be our outline or vector layers. You can also name each layers appropriately like I did.

You can also lock the pattern layers so they won’t be accidentally moved or misplaced while working on your vector layers.

Step 8: Before working on the outlines, we need to load our custom swatches file from the library. To do this, select “other library” from the Swatches Menu in the Swatches Window. Then locate and load the swatches file you previously saved.

Step 9: Now we can start tracing our patterns to create our vectors. You may temporarily use a colored stroke with no fill ( I use red stroke) so you could see your outline clearly against your pattern. Grab the “Pen Tool”. This is the most tedious part. If you are not yet familiar with using the pen tool, you may need some time to get used to it. The key here is to just average the outline, so don’t follow too closely on the edges of your pattern. Just roughly do your outline and smooth it out later. You can start of with the darkest layer working upwards.

Trace the main outline of threshold 195 first and then work on the white part inside.

Step 10: After outlining the first pattern (threshold 195). Apply the line pattern swatch to the main (outer) figure and beige color on the white (inner) figures. You beige-line-pattern layer should look something similar to the image below.

Step 11: Now work on the rest of the layers upward doing the same thing. Threshold 170 will be colored light blue, threshold 125 will be red, and lastly, threshold 60 will have dark blue.

Light blue layer:

Light blue and beige layer combined:

Red layer:

Beige, Light blue and Red layers combined:

Dark blue layer:

All color layers combined:

Step 12: Create another layer below all layers, this will be our background. Cover the layer with one whole beige rectangle, then put red and blue vertical halves on it. Create another layer on top of all layers, this will contain our text below. Create a dark blue rectangle on the bottom and type in your text using light blue color. I use ITC Avant Garde Gothic for the text font. On the original Obama Hope poster, they say Fairey used “Gotham” font. I think Avant Garde Gothic is close enough. Lastly, I made this vector button type of the Philippine flag similar to the Obama logo Fairey’s poster had.

Once more, here’s our final Ninoy Aquino “Obama-Fairey” inspired poster.

Related Posts

• 10 Easy to Follow Adobe Illustrator Vector Tutorials
• Vector Tutorial: Creating Your Own Vector iPhone
• Vector Tutorial: Creating A Killer 3D Pie Chart in Illustrator
• Vector Tutorial: Creating a Realistic 3D Beverage Can
• 166 Free Fractal and Abstract Photoshop Button Styles
• Early 2010 Best of Vector Tutorials in Adobe Illustrator
• Free Vector T-shirt Designs: Eastern Mystic and Oriental Martial Arts
• Free Vectors: Four Seasons Sale Announcement Posters
• 30 Astonishingly Fresh Examples of 3D Typography
• January 2010 Calendar Desktop Wallpapers