Another Political (Obama) Poster Vector Tutorial

24

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 as a tribute for a Filipino hero who died fighting for a good cause 25 years ago. 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.

ninoy-poster-final

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.

ninoy-aquino

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”.
posterize-5

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.
preview-threshold195

preview-threshold170

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.
pattern

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

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).
ai-layers

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.
ai-layers2

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.
ai-trace1

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.
ai-beige-layer

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:
ai-liteblue-layer3

Light blue and beige layer combined:
ai-beige-lblue

Red layer:
ai-red-layer

Beige, Light blue and Red layers combined:
ai-beige-lblue-red

Dark blue layer:
ai-dblue-layer

All color layers combined:
all-layers

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.

ninoy-poster-final

24 comments

  1. Graphire 6 March, 2009 at 09:39

    Thanks Glenn. btw, I still owe you your logo. I hope it’s not rush :). Been busy with a lot of things these days. I’ll just let you know when I’m done.

  2. Douglas Crisler 20 March, 2010 at 08:20

    Great post, I read this a while ago and, since then . I was wondering… can I translate your post into portuguese – with link to your original post, of course?

  3. Arootin 13 November, 2010 at 21:56

    When I use the pen tool, my made path is so linear and not like your enough wavy. As you already know I am new to the pen tool!

  4. Joan 25 December, 2010 at 02:49

    Nice tut! I’m trying to do it and I find problems when I have to “empty” one path to let the fillings below appear. For example inside the glasses in the dark blue layer to let all other layers appear.
    Anyone knows? Thanks!

  5. Mark 25 July, 2012 at 00:37

    I am having similar problems to Joan. How do you let the other layers come through? When I color the outline that I have drawn it just overlaps all of the outlines on the inside.

  6. Graphire 27 July, 2012 at 13:08

    You can temporarily hide top layers to show covered layers below. In the layers palette, show or hide a layer by clicking the eye icon next to each layer. HTH.

Post a new comment

Recommended for you