Aug
07
Vector Tutorial - Obama Logo
No matter what you think of his politics, U.S. presidential cantidate Barack Obama has a pretty incredible marketing and design machine behind him. One strong example of this is his “O” logo. Simple, attractive, symbolic, it’s undeniably an effective logo.
Another aspect of the Obama campaign that is attractive to a lot of American’s is the grass-roots, everybody can be involved attitude that they’ve been trying quite successfully to convey. In honor of that attitude, and just in time for the Democratic Convention, I thought I would show some really helpful Illustrator techniques by making the Obama logo. In this tutorial, we’ll be going over the Pathfinder, Envelope Warps, Opacity Masks, and Gradient Meshes. And we’ll use a drop shadow!
What’s that? You don’t think we can do it? I have three words for you my friend.
Yes. We. Can.
Step 1. Get Yourself Ready
I’m working with a 400px by 400px artboard. I’ve set a verticle gradient from #0768A4 to #168ACB. Also, it’s important you’re working in CMYK for this tutorial. I’ll explain later when we get down to the Opacity Masks.
Step 2. Lay the Foundation
Make a 350px by 350px white circle in the middle of your artboard.
Step 3. Lay Another Foundation
Select your cirlce and copy in front (ctrl + f, mac cmd + f) to make a copy in the same position. Size it down to 320px by 320px and apply the same gradient that you have on the background. You’ll want to have the light blue on the bottom of this circle, and push it up past the middle.
Step 4. And a Third Foundation
Now copy in front (ctrl + f, mac cmd + f) again, size the circle down to 175px by 175px, and change the fill to white.
Step 5. Stripes
Now we have to make the gently sloping stripes that represent the bountiful fields of the American mid-west. We start to do this by making five rectangles, alternating red and white. You can start by making one rectangle, then hold down alt (mac option) and drag the shape to make another copy. Line them up, and repeat till you have your five stripes.
Step 6. Bendy Stripes
Now it’s time to get your warp on! Yeah! Hit ctrl + alt + shift + w (mac cmd + option + shift + w) or go to Object>Envelope Distort>Make With Warp… A dialogue box will pop up. Click the preview box, so you can see what you’re doing, and set distortion just the way you like it. I have mine set to Arc, with the bend at 25%, and the horizontal distortion at -50%.
Step 7. Bendy, Stripey Ground
Now you want to size up, rotate, and align your stripes. You want the top of your shape stopping slightly below the halfway mark of your innermost white circle, representing the sunrise of a new day or something. The bottom of the stripes need to cover the bottom of the inner blue circle.
Step 8. Pathfinding
Now we’re going to use an incredibly helpful tool that I’ve used in other tutorial’s. Say hello to the Pathfinder. Select the inner blue circle, copy it in front (ctrl + f, mac cmd + f) and move the copy to the front (ctr + shift + ], mac cmd + shift + ] ). Now select your stripes, expand (Object>Envelope>Expand) and ungroup (ctrl + shift + g, mac cmd + shift + g) them. Finally, select your stripes and the blue circle copy, and hit the crop button in the pathfinder window. You should end up with this:
Now, if you’re the boring type, you could stop right here with a perfectly functional Obama logo. If you’re the adverterous type, why don’t you continue with me?
Step 9. Depth and Shadow
Now you’re going to copy the big white circle from the back, and move it to the front (remember that one? ctrl + shift + ], mac cmd + shift + ] ). Here’s another really great illustrator thing, the gradient mesh. Object>Create Gradient Mesh, then a dialogue window will popup. I set it to 3 columns and three rows. The more detail you want on your gradient, the more rows and columns you should set. For our purposes, 3 is fine.
Now we’re going to begin adding color to individual points on our mesh. Anywhere you want to darken (in my case the bottom left side of the logo) should be assigned darker shades.
In the transparency panel, we’re going to set the blend mode to multiply, and the opacity to 80.
Step 10. The Bright Horizon
Now we have to make the bright glow coming up from beyond the horizon. Any ideas on how to do this? If you said, “Let’s just use a simple white to black gradient with the blend mode set to lighten or screen.” you’d be wrong. Dead wrong.
Because of some problem, which I won’t pretend to understand, with working with CMYK in Illustrator, sometimes you can’t do lighten or screen gradients. Why don’t we just work with RGB then? Because the gradients look cruddy, that’s why.
The solution lies in something called an Opacity Mask. First select your inner blue circle, copy it, and move it to the front. Now set the fill to white and set the blend mode to lighten. While in the transparency panel, open up the more options menu and select Make Opacity Mask. Now with your opacity mask selected, make a rectangle with a white to black gradient fill. Keep in mind, the white area displays fully what’s underneath, and as you’re getting closer to black, it masks more and more.
Step 11. More Practice Masking
Now we need to set up another opacity mask for the “shine” cast by the rising sun. Copy, paste, and move to front The blue circle. Size it down slightly, and align it with the bottom of the original blue circle. Now Copy this circle, but don’t paste it yet. Set the blend mode of the white circle to Screen
.
Now create an Opacity Mask on this layer, like you did for your last layer. With the opacity layer selected, paste the circle into it from your clipboard and set the fill to a black to white gradient. Play around with your gradient till you get the effect you want.
Step 12. The Finishing Touch
To finish things off we’re going to add a little dropshadow. Select Effect>Stylize>Drop Shadow, set your settings, and go for it. I have the mode set to Multiply, opacity at 75%, x offset -10px, y offset 10px, and blur to 15px.
I hope you enjoyed this tutorial. In the next politically minded tutorial, I’m going to show you how to make a Shepard Farey inspired John McCain poster like this one:
GodBless:VQ
Tags: illustrator, logo, obama, tutorail, Vector
August 9th, 2008 at 10:40
read this you socialtist
http://www.ibdeditorials.com/IBDArticles.aspx?id=302137342405551
August 9th, 2008 at 13:12
First, Bwahahahaha!
And secondly, I don’t believe I ever endorsed Barack Obama in this tutorial. I’d like to stress the last word of that last sentence. This was only an Illustrator tutorial. I used the Obama logo because it is an attractive logo that has completely saturated the US.
If you would permit me a moment to editorialize, it’s knee-jerk reactions like this to non-issues that have our government in the US in such a sad state. Because of crazy bases on both the left and the right, our leaders can get nothing accomplished.
Next time, take a second to ask questions before attacking.
ClickPopMediaAugust 15th, 2008 at 0:37
Great Job Guy’s. Thanks for the Tut.
You are correct, this is only a tutorial, and not a stand on the political adgenda. You picked a great simple logo for us us to try our hands at what you succeed at…as for Danny Boy, perhaps he needs more fiber in his diet, cause he is full of SH*T.
I for one appreciate what you are trying to teach…personally I don’t care if you are showing us how to make a swastika, symbol for the grand master dragon of the KKK, or inverted jesus on the cross….Thank you.
Signed,
An Anti-Social Hermaphrodite Socialistic Priest from Uranus
August 22nd, 2008 at 16:12
Why do we even need government?
September 4th, 2008 at 3:23
“marketing machine?”; you mean propoganda machine. Big difference. As for his design team, well … not so much. The Obamassiah’s logo is more telling than it appears. Like Obamassiah, it is arrogant, and trendy (very web two ohish). Granted his “seal” was even more arrogant; which points out the problem with the Obamassiah, completely out of touch with reality. Much like designers, programmers, and the like.
Like Mr Obama, his campaign is all show and no go; much symbolism but nothing else. A cult of personality, nothing more.
Since I am not a rich elitist left wing artist with funding from the NEA; can I do this in fireworks instead of illustrator? Or can I use Inkscape?
Thanks in advance. Oh and only liberals will be offende by my post. No sense of humor on those ‘people.’
September 4th, 2008 at 12:18
@Mark: First of all, you sure can do this in fireworks. Although it’ll take a little bit of ingenuity, I’m sure if you’re worth your salt as an illustrator, you’ll figure it out. If you have any fireworks specific questions, feel free to ask. The same goes for Inkscape.
Hey, you know what you should do? Since you don’t think I was very helpful for the common man, you should do a tutorial on replicating the McCain logo in Inkspace. I’ll start you out.
Step 1: Draw a Scalene Triangle with a white fill.
Step 2: Mirror the triangle.
Step 3: Copy And paste in place (ctrl + f) one side of the “kite” shape you have set the fill to black.
Step 4: Now reselect the white “kite” shape and set a white stroke on it (whatever thickness you think looks best)
Step 5: Duplicate, rotate, and position 4 more copies of your “kite (and the black triangle)” into the shape of a star.
Step 6: Add two tapered lines from each side of the star.
Step 7: Put “McCain” on top of the star and “Palin” underneath and viola!
I hope this works, I didn’t really try it, I was just figuring this is any easy way to get it done. If it does work, and you do use my baseline, I’d appreciate the link, friend.
Now, onto a more important issue. I am actually a conservative. However, if there’s one thing that really bothers me about the real gung-ho Republican party (as well as their Democrat counterparrs), it is the incredibly rabid identity politics they practice. It seems like the only course of argument the base of either party can muster is an ad hominem attack.
Maybe instead of people going crazy about the politics, they could offer feedback on the tutorial. I know I would like that best.
ClickPopMediaSeptember 6th, 2008 at 20:38
OMG I have to BE an illustrator. rut roh.
No, I didn’t say you were not helpful, I just don’t have illustrator. I have Photoshop, Lightroom, Dreamweaver, Flash, Fireworks. All in order of frequency of use from 100 to (literally) 0.
Good thing I am not a ‘rabid Republican’. Juan McAmnesty took care of that.
I will try this in Inkscape and Fireworks, and get back to you.
September 15th, 2008 at 0:48
It would be funny if it were only a few selfish people thinking in reverse– but so many from the left and right begin with the point which most defines their identity, and work in reverse to build a case for that point. This kind of intellectual dishonesty is a waste of everyone’s time. And embarrassingly, it’s completely irrational.
It doesn’t strike most people that if the core of what they believe is typically shared by the family that raised them, the core of what they believe is likely defined by their identity, and not calm, rational thought. Usually the first thing I ask of someone who argues too vehemently, too quickly, like these two: Do your parents or friends feel the same way?
It’s hard to go against the grain; it’s hard to tell your Father you don’t believe in God; it’s hard to tell your Mother you don’t believe in choice. It’s hard to keep friends around who think Dinosaurs roamed the earth 4,000 years ago without constantly challenging their intellect; and it’s hard for them to keep you around when your lack of faith challenges their own. That’s just how it is.
VQ: Thanks for an amazing tutorial. Your choice of material was perfect for the lesson.
September 16th, 2008 at 7:56
@Mark: Good luck with your illustrating! Let me know if you have any other techniques you’d like me to tutorialize on.
@Kevin: That’s a really thoughtful statement. I definitely agree that if we would make a point to think first, react second, humanity in general would be in a much better state.
ClickPopMediaSeptember 17th, 2008 at 23:39
Thanks for the awesome tutorial. It is greatly appreciated & I can’t wait to try more ; )
September 19th, 2008 at 12:02
What a great tutorial! Regardless of politics! Some people need to get a grip. Thanks!
September 20th, 2008 at 2:42
OK, working on this in Illustrator — kindly loaned to me by Adobe for 30 day — and here are my thoughts.
Step 5: what size for the stripes? I guessed — wrongly close to a dozen times — and it’s crucial to the design. I finally decided to stick with a “close enough,” which seems to work. see below.
Step 6: Size up? wtf does that mean? Align? to what? a grid? I could not get the bottom of the inner circle to show (stripes were too large?), and my stripes did not even come close to filling the area the way your stripes do. They covered more area than yours did.
I am guessing that you meant to resize the stripes by “squeezing” them (grabbing the mid bottom point and pushing it up). How much, was another guess. Is this the idea, it’s what I did, and seems to be ok.
Step 7: How did you get the dots? Are they for alignment? I found the grouping command, and the align command. Unfortunately I ended up with some gaps between the stripes. Is that fixable? Should I have gond another way, becuase I don’t have the dots.
I tried Inkscape, and while it is pretty good — how the hell would I know, I’m a writer — I could not for the life of me figure out how to bend the stripes. Yes, I did get that far.
Off to finish my logo.
September 20th, 2008 at 2:56
OK, figured out the dots.
What version of Illustrator are you using? Your commands are not matching up with what I have. “Envelope?”
Pathfinding did not work. CTRL+F pastes what’s in the clipboard. I presume you have to copy the circle first? Even then it does not paste in front. Hmm.
September 24th, 2008 at 9:23
This is such an excellent tutorial and I’m so embarrassed to ask this question but for the life of me I’m struggling to get my vertical gradient to work for the first foundation. I don’t know what I am doing wrong but based on those 2 gradient numbers, I can not get my base foundation to look as the tutorial.
September 30th, 2008 at 9:40
This is a great tutorial. I’ve been using Illustrator CS2 on a Mac for a while now however I’m struggling to follow particular sections
Section 9:
This needs precise instructions on how to use the Create Gradient Mesh tool to achieve the shading. I actually gave up trying to figure it out but luckily I managed to find another tutorial to create a ’sphere’ with similar shading from a semi-circle using the 3D Effect ->Rotate tool.
Section 10:
It says “Now with your opacity mask selected, make a rectangle with a white to black gradient fill”. What do we do with this rectangle ?
Perhaps you could post the actual .ai file for anyone trying to follow this tutorial to download…
September 30th, 2008 at 14:18
Ah interesting note about the screen gradients not working in CMYK. I’ve resorted to working only in RGB because many of the effects I want to use don’t work in CMYK.
I wonder with the changes to the gradient tool in CS4 if some of these issues will be resolved.
Great tutorial, it utilizes some basic techniques that will really save you time if you aren’t already using them!
October 13th, 2008 at 16:13
Thanks! Great tutorial! most helpful. Mark and I agree on one thing - what size should the rectangles be? As for the rest of his comments, perhaps he should stick to writing rather than design and why is he trying to create Obamas logo he dislikes him so much? Did anyone mention McCain’s star logo is a Preset brush in Illustrator? Oh, and Re this ” No sense of humor on those ‘people.’ Is Marks post supposed to be funny? It’s not, it’s kind of sad actually.
October 14th, 2008 at 19:54
Gee Andie, such hatred. That truly is sad.
The star is a preset, not McCain’s Star. That’s like saying Obama’s O is preset in the Alphabet. When you can’t compete in the arena of ideas, you are forced to resort to insults. You, being “You People.”
“You People,” need to get some substance, instead of being worried about the facade so much. Looks good, does not equal competent or worthy. Obama’s logo is just like his policies, they (it) can be interpreted to mean anything you like. They look good, but are without any substance or depth.
Obama, Hollywood, liberals: pretty to look at, less depth than water spilled on your desk.
Funny how “you People” always bitch about those who don’t want to learn; right up until you disagree with them learning something to presumably do something you dislike. Like I said: “no sense of humor on those people.”
Frankly I am looking forward to President Obama. I will bet to use my logo in my many political cartoons and animations I am planning. Beyond that point; he will be another Carter, only worse. Depression in 2 years, Dow 3000 here we come. Conservative sweep in 2012 led by Palin. Maybe this time we can break the back of Socialism once and for all.
October 16th, 2008 at 0:24
Thanks for the great tutorial! I can’t believe what this has turned into. Mark needs to shut up and figure out what the hell he is doing in Illustrator and stop running his mouth. He seems to be the one full of “such hatred”. Blah….blah……BLAAAH!
Just my 2 cents. Anywho, thanks again!
October 16th, 2008 at 10:06
Thanks for making my points Candice.
October 16th, 2008 at 10:11
Can everybody cool it. I actually support McCain in this election. I support him because of the very fact that he is (normally) above partisan politics. Even to the point of being booed at a recent rally for referring to Sen. Obama as a good and decent man.
Again, this is just a logo. I’m glad for the discussion, but let’s not insult or get angry.
ClickPopMediaOctober 23rd, 2008 at 16:04
VQ,
Excellent tips you’ve presented here. I actually want to attempt using the gradient mesh to apply highlights and shadows now. My previous “attempts” with gradient mesh have been abysmal. So thanks again.
And Mark, seriously…such insipid vitriol is completely unnecessary on a tutorial intended only to teach techniques. Perhaps you should stop using Photoshop, Lightroom, Dreamweaver, Flash, Fireworks before Karl Rove shows up and takes away your life-sized Sarah Palin Dress-Up doll.
October 23rd, 2008 at 17:24
Ollie thanks for proving that being a liberal does not require a brain; you just have to be a sheep.
October 24th, 2008 at 21:18
Great tutorial. I can’t believe I got done with the logo pretty quick!
October 26th, 2008 at 20:47
Thanks for proving that right-wing, conservative, neo-cons are nothing more than presumptive jack-asses. I’m actually a moderate and registered Republican (voted for Bush twice, and McCain in the primary) who’s now voting for Obama, mostly because I think his policies are what we need right now but in part due to the insipid, spiteful, divisive and hateful language that has come from a group with whom I once identified.
So maybe you should delete all those Adobe programs from your computer since they require creative thinking to be used properly. And you know Fox News doesn’t approve of that sort of thing.
October 26th, 2008 at 23:24
Anyone really believe this guy is a Republican? Neither do I.
Please tell us what policies Obama has. Other than bloated hyperbole, I don’t see much from him. You can assume higher taxes, making friends with — actually moving closer to — terrorists, moving us towards Socialism. Other than that, he is a blank page.
And if you want to see hateful comments, read yours. If you want to see narrow-mindedness, look in a mirror. Honesty, not a trait of ANY Democrat.
October 27th, 2008 at 7:58
Mark, stop repeating Fox News talking points. Secondly, the whole of your responses to anyone basically amounts to “I’m rubber, you’re glue. Whatever you say bounces off me and sticks to you.”
You were the one who began the personal attacks assuming that somehow because the tutorial was done using Illustrator that we’re all a bunch of “left wing elitist artists.”
But somehow WE’RE narrow-minded and full of hateful comments. Typical. You attack first and when called on it, you feign victimization. That sounds eerily familiar…..oh yeah, that’s exactly what McCain’s campaign has been doing the last 6-8 weeks.
I’m surprised you even know what a mirror is because I doubt you’ve any concept of self-reflection. Calling you a jackass because you’re being a jackass is the definition of honesty.
Now get off of Al Gore’s internet.
October 27th, 2008 at 12:09
This is NOT the mainstream media — or the Daily Kos — where repeating the mantra of “you saw that on FoxNews” is believable. Nor will spinning the debate into personal attacks work. The veiled insults are obvious, and lame. Also not working here is the blame the other guy for starting this or that. Just because you THINK it works in real life, does not mean it works here.
All anyone has to do is read your — and others — hate-filled invectives, followed by your slavish devotion to personal attacks that are nothing more than empty regurgitated talking points.
Just because you or “the One” say something does not make it true, nor does it make you a debater.
Oh yea, Kevin posted the first personal attack.
I am not really sure what you are more pissed off about: being called out on your failed beliefs, being outed for your ’straw man’ candidate, or me using your own tactics against you.
BTW, I am personally looking forward to the Obamassiah being President. The last time I had a chance to make a “mint” was when Jimmy Carter tried to do what Obama wants to do. Four years and he was out, and disgraced. I hope Americans learn their lesson this time. However … ‘throwing a wheel’ now and again does create a lot of opportunity. No, I am tired of the Socialist destroying this country. Praying this is the last in a line of failed Socialists in this country.
I have a Messiah, I am looking for a President. Obama is qualified for neither.
October 27th, 2008 at 12:19
Ok people, let’s all take a deep breath.
I am voting McCain/Palin probably for the same reason that Mark is. Although Obama/Biden’s social programs and tax ideas may be admirable from an idealogical point of view, they just don’t seem like a smart or realistic direction to take the country in the state we’re in.
Did everyone see that? How I just made a political statement without a personal attack? I love the fact that there’s discourse, but come on guys, let’s keep it friendly.
ClickPopMediaOctober 27th, 2008 at 13:19
Mark, please, just look at what you’ve just done. First you conclude that I posted the first personal attack; then you posted this block of my comment to make a point:
“It would be funny if it were only a few selfish people thinking in reverse– but so many from the left and right begin with the point which most defines their identity, and work in reverse to build a case for that point. This kind of intellectual dishonesty is a waste of everyone’s time. And embarrassingly, it’s completely irrational.”
You do this knowing that anyone involved in this discussion will see in the comment thread that the very first comment (Dan, “Read this you socialist!” is where this began. But you chose to ignore it, because you, like many people, prefer to make the argument which most defines your identity. That is the essence of intellectual dishonesty. It is difficult to see the other side, I understand; but again, it’s a waste of everyone’s time — including your own.
Obviously a lot of people are angry that Barack Obama has won the election, and we’re seeing that bubble to the surface. But we are a democracy, the finest in the world, and any decent, patriotic American must now give their elected leader a fair chance to live up to his promises.
October 27th, 2008 at 13:38
There is not a single word in Kevin’s post that indicates a “personal attack.” It was an objective observation of the failings of both sides to present their case based solely on its merits, rather than from their personal identity.
Kevin’s remark was made on Sept 15. You’re comment was posted Sept 4. So honestly, who’s blaming the other guy for starting the fire?
Don’t try to use the “other-guy-lacks-a-sense-of-humor” argument either because I could easily say the same with my “Karl Rove taking your Palin doll comment.”
You easily could have said, “since I don’t have Illustrator, is it possible to do this in Fireworks?” leaving all personal comments, satirical or otherwise, out of the equation all together; especially given the tense and sensitive nature of this presidential race.
I think you’ve given yourself way too much credit as being able to anger me in any way shape or form. You’ve also given yourself way too much credit if you consider your posts to have been anything but narrow-minded and inflammatory.
If you’re first reaction is to put down the views and beliefs of others without cause (especially on a design tutorial site) I’m pretty sure your Messiah and President would be sorely disappointed.
And if you were truly tired of socialism, then you should be ripping McCain a new one for proposing that the government buy up bad mortgages and refinance them at current value and you should be more up in arms about the $700 billion bail-out package (the one McCain “suspended” his campaign to move forward) that has brought this country the closest its ever been to socialism.
Bottom line: whatever your beliefs, try to be less of jackass about it and perhaps more people would be willing to react in kind.
October 27th, 2008 at 13:45
I’d also like to quickly amend my comment– saying Obama “has won the election” isn’t fair. I should have said “It appears he will win.”
October 27th, 2008 at 13:49
I’d ALSO like to point out that if you click on Mark’s name, you are taken to his webpage; beneath his name is a quote which reads ““Tolerance is the virtue of a man without convictions.”
That’s enough for me.
October 29th, 2008 at 11:35
What’s a “socialtist”?
October 29th, 2008 at 13:42
Its sad that this country only has the two candidates (Obama and McCain) for people to vote on. Neither are qualified to be President…but having no other choices…I will vote for McCain. When a candidate doesn’t respect our flag..and makes a logo of his own…its very very sad for us all. What’s next?? Changing our National Athem??? After all..”bombs bursting in air”..and all that? We certainly don’t want to be seen as “siding” with our own country!!!
Bah Humbug.
November 7th, 2008 at 9:55
What now Mark? I guess a minimum of 4 years, for you to whine on tutorial blogs.
November 11th, 2008 at 9:03
Let us leave Mark be. Just click his name; as Kevin L. said it takes you to his website. Read a few of his blog posts and you will that he is punished enough by living in his own skin day to day.
So sad to live with so much hate. I will pray that the burden of the unreasoning hate you carry with you is lifted Mark.
Blessed Be
November 19th, 2008 at 13:22
Well, I came here for the tutorial, because I think it’s a beautiful logo regardless of what the others here think. But, even though (Penny) he’s not qualified to be President, even though (Mark) you don’t see much from him, even though (Dan) he may be a socialist, he’s President-Elect! And by the way, “you people”, you can thank Mr. Bush for the sad state the economy is in, a bonafide Republican! Yes He Did! We need a tutorial for that!
November 24th, 2008 at 16:38
You ppl who dis on obama about being a Socialist must not seen what just happened with the bail out and Obama’s economic views can be closed related to those of FDR and JFK.
December 3rd, 2008 at 8:51
“Now we’re going to begin adding color to individual points on our mesh. Anywhere you want to darken (in my case the bottom left side of the logo) should be assigned darker shades.”
I’m sorry - I’m stuck at this point, could you please expand on this instruction?
December 3rd, 2008 at 17:50
@Linzi R,
No problem. Exactly what part are you stuck on? Have you added the gradient mesh?
If so, then select the mesh and use the “Direct Selection Tool” (hotkey a, it’s the white arrow) to select individual points on the mesh. For each area of the mesh you want to be darkened, make that point a darker shade of grey (using swatches or your normal color palette).
Let me know what else I can do to help.
ClickPopMedia