Monday, July 25, 2011

Design your own Presidential Candidate Badge

Hey, how’s everyone doing today?
Have you ever wanted to be President? Well now it’s possible, (not really) because in this tutorial we’ll be designing our very own presidential candidacy badge. You know, those ‘vote for me’ badges :)
Design Your Own Presidential Candidate Badge

1. Document Creation

Let’s start by making a new document in Photoshop. For this tutorial I used a small size of 550 x 400 pixels, with the default Resolution of 72.
After making your document, fill the canvas with a nice background or texture. I used a free stock texture of some wood planks, which you can download from here. Drag the texture into your document and resize it to fit (ctrl+t).
Wood Texture Added to Background

2. Base Badge

Find and get out the elliptical marquee tool, then make a perfectly rounded selection in the middle of your document. Create a new layer (Layer > New > Layer) then fill your selection with a light green (#cdd6cd).
To make sure your shape is centered, select everything on your layer (ctrl+a), copy, then paste. Now delete your old layer. What we want to do now is cut your shape in half, so we can color each layer/section differently. Find and get out the rectangular marquee tool, then make a selection containing the bottom half of the shape, like so:
Half Rectangle Selection
After you’ve made your selection like mine shown above, right-click the selected area and click Layer via Cut in the pop out menu. Now, you can name your layers ‘top’ and ‘bottom’ if you like. Lastly, fill the ‘bottom’ layer with a dark blue color (#010368).
Different Colored Layers Separated
Let’s finish off this step by adding a slight Gradient Overlay layer style to the top layer, and also the bottom layer.

3. Inner Badge

Now we need to add an ‘inner badge’ type of thing to the inside of our main badge, I hope I’m making sense here. Start by making another round selection inside of our main shape, about the size of mine shown below.
Inner Badge Shape Selection Made
Now, (make sure you’re on a new layer) fill this selection with white. Looks pretty boring, but we’ve gotta add some layer styles to it to give it some effect.
  1. Drop Shadow
  2. Gradient Overlay
  3. Stroke
Layer Styles Added to Inner Shape
Looking much better now! How do you think it’s looking? I think it’s starting to take shape, at least.

4. Add Highlights

Now we’ve got to add some nice, glossy highlights to our badge, make it look nicer, right? ;)
Start by making a new layer, now select both of your half circles, so to make the whole circle, or you could just make a new selection. What we want is a smaller selection, so contract your selection by a few pixels (Select > Modify > Contract) then fill the selection with white. With your selection still active, press the right and down arrow keys a few times, then press delete.
This is the type of thing we’re trying to achieve here:
Solid Highlight Shape Created
Looks pretty good like that, but I still think we should use a large, soft brush to erase away the edges a little bit. Maybe even lower the opacity if you think it needs it.
Now, do the same as we did above, but this time do it in the bottom right corner.
This is what I’ve got:
Highlights Added to Badge
Before we go to the next step, just remember, you can download the PSD file at the end of this tutorial, in case there’s anything you need help with.

5. Adding Text

We’ve been missing something important up until now, haven’t we… time to add some text :)
Firstly, get out the ellipse tool, then set it up with the following settings:
Photoshop Screenshot Ellipse Tool Settings
Now you’ve got the tool set up, create a new layer then make a path in your document. It would be good if you could make the path as centered inside of your badge as much as possible.
Ellipse Path
If you’ve got a path like the one shown above now, then great! Get out your Horizontal Type Tool and click on your path, this will put your text on the path you’ve just made. Write out your text like mine:
Text Path Settings
How’s yours going? I finished off my red text by applying these few layer styles:
  1. Inner Shadow
  2. Gradient Overlay
Layer Styles Applied to Text Layer
Top text is finished, now we have to add some text to the bottom section. Duplicate or make your path again that you just made, then set your foreground color to white. With the Horizontal Type Tool out, click the bottom of your path in the center, write out some text.
Bottom Text Added
In the above image I’ve used pretty much everything the same as with the top text, except I used white as my text color. If you can’t seem to get the text or anything else quite right, download the PSD file at the end of this tutorial and take a look at how I did it.

5. Add an Image

Lastly, to complete this tutorial, you’ll need to add an image of some sort into the middle of the badge. Originally I had a 3D Photoshop logo in the middle there but it looked incredibly lame, so I decided I’d just use a cutout of Ron Paul. I went to Google Images, looked up a good picture of Ron Paul then cut him out of the photo, you can feel free to download the cutout that I made from here: Ron Paul Photo Cutout.
Copy your image onto the canvas then resize it if it’s too large. After this, you need to make a round selection inside of your inner badge area using the elliptical marquee tool. Crop your image to the selection like mine shown below:
Elliptical Crop Selection
Lastly, you might want to change the layer mode for this layer to Luminosity, personally I think it looks pretty awesome like that. Try lower the opacity as well, that might make a nice effect.
Layer Mode Changed to Luminosity
Well, it looks like we’re pretty much done for this tutorial.

Completion

Design Your Own Presidential Candidate Badge
I finished off with this tutorial by merging all of my layers together, duplicating the badge, resizing them, and adding a drop shadow. Please feel free to experiment, get creative, use your own settings :)

No comments:

Post a Comment