” />

” />

Download the Tattered Banners (ai and eps)

GodBless:VQ

ClickPop Tattered Banners Vector by Christopher Vasquez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Based on a work at www.clickpopmedia.com

I posted a simple heart vector last week, which I actually had a fair amount of fun making. As I was making it, I noticed how many shortcuts and simple techniques make the process of vector illustration so much easier. I’ve learned a ton of great stuff from Vectips, Vectortuts, and Abduzeedo and wanted to pass along some workflow tips of my own. Have fun.

Oh, I should stress (as though it’s not already obvious), I’m no anatomist.

First, I always find it helpful to start with a reference sketch. So go ahead and scribble up a heart, or grab the image from above. I’m sure you noticed my ugly mug in the background. I though it added just a sinister air that complements the tutorial nicely.

We’re going to start by tracing the major central shape of the heart that we’ll build from. I always like to trace using no fill, and a really bright, contrasting color, so I don’t lose my lines.

Now we’ll trace the little veins/arteries/i don’t know, with a much thicker brush with round edges. Make sure to make the overlap the the border of your first shape.

Now we’ll go through the process of blocking out the rest of your shapes. If you like, you can make the cava’s, aorta, veins, and arteries connect and end in different ways where they won’t show up in the final piece, but for my purposes, I was only concerned with the parts that would show up at the end. This step is really just more tracing.

Introducing the first free resource in the ClickPop comeback.  I wanted to get this out for valentines day, but got a little caught up in some fun projects I’ve been working on. So here it is, better late than never. Consider it a very early 2010 valentines day release.

As always, if you come up with something great, let us know. We love to see the amazing work creative people do with our humble resources. Happy illustrating.

Download the Have a Heart Vector (ai and eps)

GodBless:VQ

ClickPop Have a Heart Vector by Christopher Vasquez is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Based on a work at www.clickpopmedia.com

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/10/08/palin-shirts-for-sale/ http://www.clickpopmedia.com/2008/10/08/palin-shirts-for-sale/#comments Thu, 09 Oct 2008 01:17:17 +0000 VQ http://www.clickpopmedia.com/?p=419

A couple weeks ago, I gave out a Palin vector. I’ve been playing around with it since then, and finally have a shirt for sale. It combines the absolutely gorgeous Sarah Palin with her home state, and state motto, appropriately, “North to the future.”

I actually went to a McCain/Palin event with some friends and some shirts. The shirts were an enormous hit, and everybody and their grandmother (seriously, an elderly lady with a super old camera) wanted to get pictures. I don’t want to exaggerate, but I think we may have been more popular than McCain today.

Governor Palin was actually kind enough to autograph one for us, and we’ll be auctioning that off for charity soon. We’re still working out the details, but I’ll let you know on that one.

In any case, be a pal and pick up a Palin shirt. Photos from the rally after the jump.

]]> http://www.clickpopmedia.com/2008/10/08/palin-shirts-for-sale/feed/ 4 http://www.clickpopmedia.com/2008/08/21/clickpopmedia-2/ http://www.clickpopmedia.com/2008/08/21/clickpopmedia-2/#comments Fri, 22 Aug 2008 04:26:48 +0000 VQ http://www.clickpopmedia.com/?p=409

I personally have been a big fan of Threadless for quite some time now. The designs they offer are, generally speaking, more beautiful, funny, or insightful than your run of the mill t-shirt. However, this might just be about to change. You see, I’ve posted a design to Threadless, and if it does not get printed, I promise I will throw a hissy fit and never use Threadless again!

Well, maybe not for a week or so at least.

As you can see, I’ve used a ton of the our free vectors. So if you like the design and want to support the site, give us a quick vote. I’ll love you forever if you do.

Last month was a really heavy month of work for us, and as a result you may have noticed that we weren’t posting as often. Thankfully, that’s all about to change (hopefully not the work load, just the fact that one way or the other we’ll be posting more often).

To kick things off, we have a very useful vector bird wing.

As always, let us know if you do anything neat with it. Have fun, friends.

Download the Wing Vectors

GodBless:VQ

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)