Jim Jamesson

About 700 or 800 times a day I’m asked questions about Photoshop. About 7000 or 8000 times a day I hear something about Barack Obama or John McCain. He said this, he voted for that… man the bickering just does not stop. Now that I am good and sick of both Obama and McCain, and there are now 1 billion people waiting for me to show them something in Photoshop, I figure now is a good time to kick out some fun Photoshop tutorials.

Just a few steps of Photoshop fun and we'll build this simple layout.

Today we’re gonna make a campaign website design for a Barak McCain morphed weirdoass looking dude running for president. A guy I might just get off my ass and vote for. Probably not though. Anyways.

For the hell of it, lets build a basic website mockup for a fictitious Barack McCain presidential candidate, and see if we can capture the same kind of political website scheme that they use in the real world. While I am using Adobe Photoshop CS3 for this tutorial, older Photoshop versions should still be more than adequate. Your technique may differ from what I’m showing using an older software, but more than likely you should have no troubles figuring out a workaround. For convenience, I’ve uploaded my original Photoshop file for you to use as a guide.

Step one: Create new PSD

Create canvas 1000 x 800, setup guides 20px on the sides, 100px and 600px down.

Step two: Set up regions

With guides setup for margins, and simple rectangle shapes, we're able to see the general placement of our website elements.

After your guides, margins, and boxes, your mockup should resemble this.

Step three: Fill in website elements

Mockup taking a bit more shape as more website elements are added. I added filler lorem ipsum text, navigation buttons and a search box.

Step four: Background treatment

Let’s first start off with a little background treatment. All these modern websites love using gradient backgrounds, and since our guy is man of the people, he should probably do the same. For now, let’s try pulling down a black gradient from the top of our document. Click ‘D’ on your keyboard to reset your color palette back to the default black and white, then choose your gradient tool.

Up at the top, Photoshop gives you an option to screw around with your gradients that looks like this:

Choose the Solid Color to Transparent for your background gradient.

You’ll want to pick the one that gives you a solid color to transparent. You’ll want to use black for your gradient color. Once you’re set, create a new layer directly above the ‘Background’ layer, and drag something down around 500px from the top. If you hold the shift key, you can constrain your gradient to x or y axis. Let’s give it a try:

Drag a gradient down around 600px to give us a nice fade from top to bottom.

Our completed background gradient. Still needs work though.

There’s no exact science here, but typically I don’t like to make a background image that is so large that it impacts our load time. Stick to something reasonable, and you should be OK. Remember, not everyone is on 1900×1280 resolution, and it may not be wise to have a 400kb background image that only 5% of your visitors will even see.

So far so good, but it’s looking gloomy as shit, and that’s probably not the best look for a presidential candidate. Let’s invert our new gradient layer, and set the blending mode at the top of the layers palette to ‘Opacity’. This will give us a nice lightened header. To make it stand out a bit more though, let’s duplicate that gradient layer, and then free transform the layer to around 160px high. This should give us a really nice glow for the header.

Background gradients inverted, and blending mode changed to Overlay.

Step five: Add highlights

Adding a white radial blur, and setting blending mode to Overlay gives us a very nice highlighted area.

Now, change this new layers blending mode to Overlay, and move it up to header area to where it looks kind of good. I toned my layer opacity down to around 60%. This adds a nice highlight to our header and will also give the background a little bit of depth. Now would probably be a good time to merge those layers into a new group, to keep them organized and out of the way.

Step six: Create 3D navigation bar

Move the radiul blur layer up to the header somewhere until it looks nice. This will help us draw attention to the header area.

Step seven: Fix stupid shit

Using an adjustment layer, we can change the Hue/Saturation of this nasty colored background to something much more presidential.

Step eight: Adding pretty flags

http://en.wikipedia.org/wiki/Image:USNavalJack.svg

Drag this sucker into your Photoshop file just above the Hue/Saturation adjustment layer we just messed with. Now we can ‘warp’ this image by command+T (control+T Windows people) to transform, and then right-clicking on the object and select Warp. Now bend this bastard around a bit to make it look like a waving blowing flag. Here’s what mine looks like:

Drag the shit out of the flag artwork to simulate a flag blowing in the wind.

Now, if we scale down the flag to around half-size, adjust the opacity to around 5-10%, and move it up to the header region, its starting to look like something. Add a mask to the flag layer, select the 100px soft round brush, and make sure your color is black. Paint around the outsides of the flag to trim it out of our nav bar, and lose those hard ugly edges.

Add a mask and use your brush tool to clean up the hard edges left by our warped artwork.

Starting to look good. Lets duplicate that layer now, and flip it horizontally. Move it to the other side of the header, and adjust the opacity down to 2-3%. Now this bitch is starting to look a little presidential.

Flag artwork is looking good now that mask is complete. No more hard edges.

Mockup starting to take a little shape now with completed flag artwork.

Step nine: Add Barack McCain face

Here's our deformed mug of Mr. Barack McCain

Drag the face image to our mockup right above the navigation layer group. Resize it to where it fits nicely in the header, and give that sucker a little bit of Smart Sharpen. Here’s the settings I use:

Using Smart Sharpen helps you recall some of that lost detail when we scaled our image down.

Mask the background out of our dude by adding a layer mask, choosing black for your color, and the Hard Round 19px brush. Now there are a million different ways to mask something in Photoshop and it seems like they add a new way each new version release. I still prefer the good ol’ brush technique as it’s the fastest, most accurate way for me. You could use the pen tool, and create your mask, however I’ve found this to be inhibiting. Sometimes, when dealing with hair for example, a very soft edge brush can work very well to kind of ‘fake’ the mask. Since our McCain head is rather bald, smooth and shiny, we don’t really need to use this here. In fact I should probably write another tutorial for masking. Anyways, continue masking using smaller brushes to get the nooks and crannies.

Painting on a layer mask will help us pull the background out of this face photo.

Step ten: Add a realistic drop shadow

Standard drop shadows like this just don't look that convincing. When I see drop shadows like this, it tells me the designer is not that advanced.

Command+T to free transform the shadow layer. Right-click inside the bounding box and select ‘Perspective’. Dragging one of the top corners outward will give us an inverted pyramid looking shape. I don’t remember what they call them, but this is what we are going after:

By using the Perspective Free Transform tool, we can simulate proper 'light fall off' that a real shadow would have.

Hit enter to accept your transform, and command+T once again. This time though, we’re just gonna cut the height down a little bit. This is going to give us the appearance of separation between the background and our candidates ugly face. Now drop down your opacity a bit to around 50% or so, and hit it with a couple few more gaussian blurs just to make sure it’s blended nice.

Notice already how much more perspective the shadow gives us. Now to soften it up more.

Step eleven: Clean up the overlap

The mask on our face layer group allows us to show the full navigation bar. You could put the layer group behind the navigation layers, but if you were to use transparency in your navigation bar, you'd need the mask anyways.

Alright! We are making quite good progress, and our layout is beginning to take on a political shininess. We just need to beef up the logo a bit and add some finishing touches to the rest of the page, beneath the navigation bar. For the logo, some simple line tool shapes and a star shape should suffice. Hopefully, you have enough knowledge of Photoshop to get this looking similar so I won’t go into detail on this. Just remember to keep your layer groups in order, so changes down the road are much easier and quicker.

After logo treatment and a few other nick nacks, our mockup is complete and ready for slicing.

So now we’ve got a nice basic political website template. From here, we could easily add a secondary navigation bar in the header, a big fat red donate now button or any host of stuff really. In an upcoming tutorial, I’ll show you how to slice this bastard up as it is now, and build the CSS to create a working HTML template. Hope this tutorial helped.