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/06/26/free-vector-octopus/ http://www.clickpopmedia.com/2008/06/26/free-vector-octopus/#comments Fri, 27 Jun 2008 02:10:53 +0000 VQ http://www.clickpopmedia.com/?p=351

Today is your luck day, friend. It’s free octopus day at ClickPopMedia! So step up and download yourself an octopus.

Download the Vector Octopus (.ai and .eps)

Howdy pardners. I’m glad you stopped by the ol’ ClickPop Ranch. Sit down, rest your feet a spell, and enjoy this water buffalo skull vector. I realize that this probably isn’t the way a water buffalo rancher would write. It’s more like a regular buffalo rancher, but hey, it gets the job done.

Download the Water Buffalo Skull Vector (.ai and .eps)

GodBless:VQ

Last week I posted some desktop wallpaper of a new vector swatch I was working on. Well, the pattern is finally finished, and I’m pretty happy with it. The design is based on a beautiful Indonesian batik fabric I saw and couldn’t get out of my mind. It’s exotic, a little trippy, and a lot of fun to play around with.

I set up three different color schemes: a regal orange and blue, an electric yellow and blue, and a psychedelic green and pink. I also made a bunch of Photoshop patterns from this swatch, if anyone wants those, let me know and I’ll post them.

Batik (from wikipedia.com, emphasis mine)

a wax-resist dyeing technique used on textile. Batik is found in several countries of West Africa, such as Nigeria, Ghana, Cameroon and Mali, and in Asia, such as India, Sri Lanka, Bangladesh, Iran, the Philippines, Malaysia and Thailand. However, it is in Indonesia that it is considered a national art form.

Download the Batik Vector Swatch (.ai and Illustrator swatches)

Update: First, the Batik vectors have been updated to fix a few issues with the patterns and include two more color schemes. We’ve also released some Photoshop patterns of these swatches.

If you come up with some cool color schemes, we’d be excited to see them.

GodBless:VQ

.

We’re working on revamping certain parts of the site right now… Actually, we always seem to be revamping some part of the site at all times. Sometimes the revamps are minor, boring little usability things, and sometimes they’re more interesting. We don’t generally announce every time we upgrade something, but this time we couldn’t help ourselves.

You see, this revamp involves penguins. You read that right, glorious penguins.

Along with being a neato blog that gives away free vectors, textures, pixel paterns, and flash things, and offers tutorials on illustrator, web programming, flash, photoshop, etc, we’re also a new media marketing and web development company. We do all sorts of projects, for all sorts of people. Sometimes it’s web design, other times we do web app development, and sometimes we set up viral marketing campaigns and social advertising internet campaigns for some really cool companies.

We don’t advertise ourselves much on our blog, and that will probably stay the same, but we are soon going to be changing our “About” tab to a “Services” page that would really help show off our ClickPopSkills. And like I said, there will be penguins.

So have some fun with the cute little penguin chick, fun-loving rockhopper penguin, regal king penguin, and awe-inspiring emperor penguin.

Download the Penguins vector pack (.ai and .eps)

GodBless:VQ

I coach a YMCA swim team during the winter, so that’s why you’re getting this particular vector. This little platypus’ all ready for the Olympics this summer. Have fun.

Download the Platypus (.ai and .eps)

GodBless:VQ

Hey everyone! Have some free speech bubbles. There’s a rectanglish one, a circley one, 2 puffy bubbles with varying degrees of puffiness, and a straight edged bubble.

We’d also like to introduce everyone to a new friend of ours. You see that little otter in the post header? He’s a new mascot of ours. He’s a tough young go-getter with a mind of his own, and a heart of gold. There’s only one problem… He doesn’t have a name.

We can’t seem to find a name that really captures the attitude and heart of our friend, so we’re reaching out to you for some suggestions. If you have any ideas, leave them in the comments.

Download the Speech Bubbles (.ai and .eps)

GodBless:VQ

Get out your top hats, monocles, and cashmere, because we have some fancy pants vectors this week. Now you can feel like John D. Rockefeller, Audrey Hepburn, or Scrooge McDuck, surrounded by your very own high class vectors. Have fun you swanky people…

Download the Ornamental vector pack (.ai and .eps)

GodBless:VQ

Good mornin’ pardner’s. I’ve vectorized some laurels a-la United Nations for you. They’re a lot of fun to play around with, so go wild.

Download the Laurels (.ai and .eps)

GodBless:VQ

I made this animation using our Spring Time vector pack. It’s about 360Kbs, but once it’s loaded click Play to get it started, then you can press the Left or Right arrows to control the little bunny.

I’ll walk you through the process I went through to create this here game/animation.

My first step was to get the vector pack that I wanted to use. Then I imported it into Flash CS3.

You can just go ahead and import everything. Then just delete anything you don’t need. I only unchecked a few groups and paths that I knew weren’t needed.

Once all the groups are imported to the stage you can go into them by double clicking on them and remove or edit them how you like. For example I got rid of the dirt path on the ground.

When everything was more or less how I wanted it, I started making MovieClip symbols out of some of the more important groups and the rest I either deleted or just left as background on the stage.

Before I wrote any code I thought it would be fun to animate the sun a little and work out how the bunny was going to hop.

For the sun I separated the face and the orange halo behind its head and over the span of 6 frames I rotated the halo just a little bit so that it would loop and look like it was always turning.

With a little thinking ahead I setup the bunny’s animation and on the first frame I added a quick 3 lines of code to let me stop it from looping if I wanted.

With all the prep done we are finally able to focus on the code. I started off with my symbol class files (i.e. tree.as, clouds.as, and rabbit.as).

There is very little in the rabbit class. Just a boolean property called “moving” so that the small bit of code on frame one will work.

The clouds class is a different story. I wanted to be able to create a new cloud and not have to worry about what type of cloud it was or how fast it would move. So, I made my clouds class randomly child one of my four types of clouds:

Notice the variable vel being randomly set to a number between 1 and 2. Every frame the cloud will move to the right by vel pixels. Since the stage is only 550 pixels long I wanted to delete the cloud once it’s definitely clear of the screen. So I remove the child and the event listener and then dispatch a “complete” event so I can finish cleaning up somewhere else in my code.

The tree class is very similar to the cloud class in the respect that it handles it’s own movement. But, there is an added complexity to the trees because 1.) I want to recycle them instead of delete them (actually it’s easier then deleting them), and 2.) The trees don’t move in a straight line across the screen like the clouds do.

Multiplying the velocity (vel) by the scale (scaleX) will add to the illusion of depth.

In order to move my trees along the curvature of the land I first needed to find out the equation of that curve. To me the curve looked a lot like a segment of a circle, so I just needed to find the radius of that circle. To do that I zoomed out really far, drew a circle and then played around resizing it till it approximately fit the curve. In the end I got a radius of 925 (which is actually slightly too big, but it’s close enough).
Knowing that the equation of a circle is (X+xOffset)^2 + (Y+yOffset)^2 = R^2. Then the equation breaks down to Y = -yOffset + sqrt(R^2 – (X+xOffset)^2) and that’s pretty much what you see near the bottom of my code. The operator signs (+/-) are different because in flash our coordinate plane is flipped vertically.

OK! Now that I have (what tense/perspective was I writing in again?) my trees, clouds, and bunny that all take care of their own movement, it’s time I write the main code that adds everything to the stage.

Ever since I noticed that it was possible I’ve been writing all my code in external .AS files and then associating them with my document.

So, in my main code’s constructor I want to add my bunny and trees to the stage and maybe a new cloud every 5 seconds or so:

Of course I need to start to watch for keyboard actions too so I added the event listeners for that.

My addTrees() function has to make 3 layers of trees with different amounts of blur (also to give the illusion of depth):

Adding the bunny to the stage is also really easy:

Our clouds… since there aren’t ALWAYS clouds in the sky I figured I would only add a new cloud about 30% of the time every 5 seconds.

Also remembering to take care of the “complete” event that I dispatch from within my cloud object when it goes off stage.

Finally I just have to add my keyboard handling functions, which are really easy:

There it is! I’ve given you almost all the code right there. And if you want more, then download ALL the code here: Springtime Animation Source Code.