We are met once again, dear friends, not for what I would prefer we talk about, but what we must. This week I would like to take apart a well know recognizable logo and not just see whats under the hood, but analyze how one could go about reconstructing it. We start Here:

I don't know if Cyan has enough experience.

This is the iconic letter from a certain presidential campaign, we have seen it around somewhere…mO’cain? Maybe.

This is a beautiful example of Illustrator generated logo, with only gradients for colorization. It is a simple execution, but looks remarkably interesting for basically 3 colors in 2 gradients. First a Blueprint. Lets start with a letter O, not from a font, but just 2 ellipses. Using Phi, we can make a guess where the inside and outside ratio may lie.

Using the Golden Section as a starting point.

With little doubt this is intentional. The internal circle is perfectly between the two variations in the ratio. Either the designer(my bet) or the typographer made a conscious decision to split the difference. When we look at the form again for the foreground shape, it would be a shame not to notice how beautiful and complex the statement is. Using the flag stripes as a field metaphor in front of a sunrise/sunset in blue is as elegant a metaphor as I have ever seen for any presidential campaign. It is light and airy, without being too aloof, it is grounded in the foreground.

To recreate the foreground we will use circles of slightly different sizes to create the stripes, not worrying about the white under them, which we will fix with the gradient.

Fields of Ellipses

With the colors sampled from the image, we can make an educated guess about the gradient structure. Looking at the blue, there appears to be a light blue band that is between the dark blue at the top and the white. With the red, the color appears to start at a light red-orange and spread a bit out to a medium red then on to the dark.

Gradients in the logo, I hope.

And here are the gradient pallet settings for each.

Gradient palette settings for the colors.

Now we set an initial gradient for the pieces and see how close we are.

Initial look of applied gradients

Not to shabby, the feeling is there. Now I am going to show you a not-well-documented trick with the gradient tool. If you use the gradient tool as you normally should, you would be clicking and dragging a line that represents the beginning and the end of the gradient used as a fill. For instance, here we have the blues and reds in the gradient from left to right, and when you click and drag, you are setting the endpoints of the grad. OK, you knew all that, but how about this, when you click AFTER you set your start and end points, you pull a radial gradient center toward your click point. Thus moving a typical radial grad and creating something more like a blend or (god forbid) a gradient mesh. So here we go, click, drag, click.

Just the blue gradient.

Great, now if you notice the bottom is all white, so the red field is over white just like in the original. The top is dark and the pull click has forced the gradient closer at the top, creating the sunrise effect. Next the red field.

Just the red.

Pretty straight forward, drag past the bottom from close to the top to make the right and left dark, while keeping the bottom lighter, and with the click we hide the focal point of the gradient. This creates a soft light grad on the bottom with more rounding on the edges, implying a third dimension.

First Pass Comparison

When reassembled, it is a pretty good match, but we can still do some tweaking…

I hope Catchphrase doesn't win again, go Logo.

OK, with the darkening of the top blue and a readjustment of the grads a bit, I call this close enough for educational purposes.

Now that we have seen what it takes in Illustrator to recreate this logo, lets stop for a moment and remember that the original idea was a lot more work. Good design requires study and understanding, deliberation, inspiration, determination and what else Cajun man? Communica-SHON. This logo was originally designed by Sender, LLC. and you have to imagine that there are many sketch pad pages dedicated to “O’s” which I think are now suitable for framing, and may be worth more after November. Good ideas occur everywhere and at anytime, sometimes you just have to steep yourself in the problem and let you mind work our a solution.