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:

Download the Obama Logo Asset Files Vectors

GodBless:VQ

]]> http://www.clickpopmedia.com/2009/01/23/vector-tutorial-obama-logo/feed/ 44 http://www.clickpopmedia.com/2008/04/01/fun-with-illustrator-here-comes-the-sun/ http://www.clickpopmedia.com/2008/04/01/fun-with-illustrator-here-comes-the-sun/#comments Tue, 01 Apr 2008 05:01:24 +0000 VQ http://www.clickpopmedia.com/2008/04/01/fun-with-illustrator-here-comes-the-sun/

Hello everyone. I’m glad you could join us on this fantastic day. I thought today I would show you how to make a nice cheerful sun to live with the clouds we made in the last tutorial.

Step 1:
Let’s start with our standard 600px by 600px Illustrator canvas. Like I said last time, you can really set your canvas to whatever size you like; but if you use a different sized canvas, the numbers I use throughout the day may not work as well for you as they do for me.

Step 2:
Now we’re just going to drop in a nice little circle using the Ellipse tool (l). I put this right in the center of my canvas, but you can put it wherever you like. You know what, it doesn’t even need to be a circle. You can put down an oval if you want. Always remember, this is your sun, so have fun with it.

Step 3:
Next you’re going to make larger circle around your first circle. The way I do this is by selecting my first circle, holding down ALT, and hitting either the LEFT key to duplicate my shape. Then I hit the RIGHT key to move it right back over top of the first circle, and then scale it out and make it bigger. Once it’s a size I like, then I hit CTRL + SHIFT + [ to send the big circle back behind our little circle.

Remember now, this is just the way I like to do it. If you have a different way, use it. And let me know, we’re all learning together here.

Step 4:
Ok. Now that your circles are happy together, make sure your outer circle is selected, and give it a nice Zig Zag effect (Effect>Distort & Transform>Zig Zag).

I set the size to 3%, clicked the relative circle, and gave it 7 ridges per segment. I picked relative so that no matter what size we make our sun in the end, the size of the halo will stay the same. I also make sure to set the points to corner to give good definition to my sun’s halo. Maybe you want more points, or less, or a smooth wavy halo. It’s your world, let your imagination run wild.

Step 5:
Next we’re going to set a light yellow to yellow radial gradient on the inner circle. Since this is a cheerful sun, I’m making sure the face of our sun has a nice bright gradient. Now we’ll use the gradient tool (g) to pull the gradient down from the upper right part of the sun’s face and give a hint of depth.

Step 6:
We’re going to go crazy now. Let’s select our outer halo and set a yellow to orange radial gradient. Grab the gradient tool (g) and have some fun with the size and position of your gradient.

Step 7:
To finish up, I used the sky and some of our cloud friends from the last tutorial to give a home to our new sun. I took the stroke off all these guys to make everything look much softer. All of the clouds have a little drop shadow on them, just like the last time, so they look like they’re just floating right along without a care.

Now I think we’re going to call this one done. I hope you had a fun time today, I know I did. From all of us at ClickPopMedia, have fun with Illustrator, and God bless you.

We’re all big Bob Ross fans here at ClickPopMedia. Today, in the tradition of the Joy of Painting, I am going to show you how to make a happy little cloud.

Welcome back everybody. I sure am glad you could make it out today. Does everyone have their Illustrator warmed up and ready to do some vectorizing? Good.

Step 1:
What I have here is a 600 px by 600 px Illustrator document, but you can use whatever size makes you happy. Keep in mind though, if you do things at a much different size, most of the values I give you won’t translate correctly.

Step 2:
The next thing we’ll do is make a sky for our clouds to live in. So let’s make a 600 x 600 square with a nice white to blue radial gradient fill. Let’s try and get a gradual fade between the colors, just a whisper of a gradient. You can adjust your gradient using the Gradient Tool (hotkey G).

Step 3:
Create a new layer and now we’ll start to make our little cloud. Make two circles (hotkey L) that will be the outer boundaries of your cloud. There we are

Step 4:
Now then, we’re going to build up on our cloud by making more circles of different sizes.

There it is, the top of our cloud. Don’t over think this step to much. The clouds are very free, they just float around and have fun all day. So we’re just making some fluffy, carefree clouds.

Step 5:
Well, now we’re going to finish off our basic shape. Take the pen tool (hotkey P) and create a shape that covers up all the open space left in your cloud. You can also continue using circles or curves if you want to have a puffy bottom on your cloud. Just let your imagination go.

Step 6:
Now we get to the fun part. Illustrator has a neat little tool called the Pathfinder. Maybe I’ll do a bigger tutorial on the Pathfinder later, but for now we’ll just keep it simple. We are going to be using the Pathfinder to make the shapes we’ve made come together. So go ahead and select all the shapes in your cloud. Now click the “Add to Shape Area” button in your Pathfinder tab and immediately after that, before you do anything else, click the “Expand” button and watch that little rascal come together.

Step 7:
Now we’re going to give the cloud some character. Remember, this is your cloud, so you can do any little thing with it. I’m just going to show you what I did. I thickened up the outer stroke a bit, just to make our little friend look even a little puffier than before. I also added a light gray to white linear gradient coming up from the bottom of the cloud just to give the indication of depth and shadow.

Step 8:
I’ve made a few more clouds to live together, so our friend isn’t lonely. Each of our clouds has just a whisper of a drop shadow (Effect>Stylize>Drop Shadow: Opacity 30%, 0px offsets, 5px blur) just to soften things up.

And now we have a finished cloud family. So with that I’ll tell you good bye. I look forward to seeing you again. From all of us at ClickPopMedia, have fun with Illustrator, and God bless you.

GodBless:VQ

Ahoy lads and ladettes. While working on a recent logo design project, I had to create an element that resembled a nuclear fallout symbol. I found a quick and easy way to do just that using a custom illustrator brush, and now I will share my secrets with you.

Step 0.5:

Open Illustrator

Step 1:

Using the Rectangle Tool (keyboard shortcut “m”) Create 1 black square and 1 white square next to each other (if you don’t know this yet, if you hold down shift while dragging out a rectangle, circle, etc. it will make a x by x square, circle, or whatnot).

Step 2:

Select the 2 squares and drag them into your brushes tab.

Step 3:

When the New Brush menu pops up, make sure New Pattern Brush is selected and press OK.

Step 4:

In the Pattern Brush Options, give your brush a name, leave the other settings alone, and hit OK.

Step 5:

Use the Ellipse Tool (keyboard shortcut L) to make a circle. Apply your new brush as the stroke.

Step 6:

If you’re lucky, you’ll end up with the correct symbol. Odds are you won’t though, so adjust the stroke weight until you’re shape is just right.

Step 7:

Don’t worry, we’re almost done. Select your circle and go to Object>Expand Appearance. That will make your stroke into individual shapes that you can scale, color, and otherwise edit as you wish.

Step 8:

Now Delete the three white border pieces. This will leave you with two extra circles. Set one circles fill to black and shrink it down to the center. Give the other circle a black stroke and enlarge it.

By changing the stroke width before you expand the appearance, you can make some other neat shapes. Mess around with it and have some fun.

GodBless:VQ