Photoshop Tutorial Performancing Banners

After winning the recent Performancing for Firefox Banner competition, several of my fellow contestants asked me to put together a Photoshop tutorial. I happily agreed — so here goes my first attempt at demonstrating some of the techniques I utilised to create my banner.

Being both a blogging and tutorial amateur, I’ve decided to take the same approach as documenting science experiments which I learned in high school: Aim, method, result, and conclusion.

Aim

My main goal when starting any design project is to keep it clean. I try to keep it clean by doing the following:

• Give all elements as much breathing space as you can afford.
• Weight (give visual preference to) the elements depending on their importance.
• Use a grid when laying the elements out.
• Make sure typography is readable.
• Create and stick to a simple colour scheme.

With those things in mind I then ask myself some questions.

1. What is the desired result of this design?
2. Does the client have any existing branding (logos, fonts etc.) that should be adhered to, and if so, is there any scope for creative interpretation of their brand?

To me, this task was primarily a branding exercise for Performancing. They’re about to release a new plug-in for Firefox and want to spread the word. Everyone knows the Firefox brand, so it was an early decision for me not to include the Firefox logo in my design. Firefox needed mentioning of course, but could do without the emphasis that the Performancing brand required.

So one big Performancing logo, a mention of Firefox and the Performancing plug-in, then a call to action (or “click here”). Simple 😉

Method

This tutorial will be based on my 160×160 banner only, as the the other two buttons pretty much follow the same theme. Also I work on a Windows PC, so Mac users should substitute CTRL and ALT key commands with their Mac equivalents.

Setup

For banners I ususally start by setting up some guides. I do this by first creating a new document at the intended size (160 x 160), making sure snapping is on (View>Snap), and that rulers are visible (View>Rulers).

Now if you drag a guide from the left ruler it should snap to the vertical center of your canvas. Nice huh? Do the the same from the top ruler for your horizontal guide. Drag guides to all four of the document sides, double your canvas size (Image>Canvas Size) and you should end up with this:

Isn’t that lovely? All this does really is set up a solid base for your design — a good foundation if you will. Now for some pretty pictures.

Background elements

I decided on rounded corners. They’re nice. They’re friendly. The easiest way to do this is with the rounded rectangle tool in the tools palette.

I usually avoid using shape paths and just stick with good old pixels. So choose “Fill pixels” from the options tool bar, and give our shape a radius of 10.

Choose white from the colours palette, create a new layer and name it “bg”, then go ahead and draw in the background for our banner using our previously created guides.

TIP: Only draw shapes with the shape tool when your window zoom is at 100%. Drawing them when you’re zoomed in will result in fuzzy edges.

I then added a single pixel outside stroke in blue using a layer style (Layer>Layer Style>Stroke).

Since we added a 1 pixel outside stroke, our shape is now 162 x 162. I then select the rectangular marquee tool and move each side of the shape in by a pixel so we’re back to 160×160. Finally, something to look at 🙂

After that we then duplicate that layer, remove the new layer’s stroke and using the rectangular marquee tool again, move each side of our new layer in by 2 pixels.

Name the new layer “bg gradient” and toggle the “Lock transparent pixels” button in the layers palette.

TIP: “Lock transparent pixels” does just that – it stops any transparent areas of a layer from being editable. This is handy for when you want to edit exclusive areas of a layer without applying a layer mask.

Now we want to apply a linear gradient from blue to white on our new layer. So using the colour picker, choose blue for the foreground colour and white for the background colour. Then select the gradient tool, and click and drag from the top to the bottom of the layer, using our guides as, well, a guide 🙂

.

OK – looking good. Let’s get a logo in there.

Performancing logo

In the new version of Photoshop (CS2), there’s a lovely new feature called “Smart Objects”. Essentially a smart object is a non-destructive vector image. This means you have a vector image inside your Photoshop file which you can resize to your heart’s content and it won’t lose any quality. Fireworks users have been using this feature since version one 🙂

So go ahead and open the Performancing logo in a vector program like Illustrator.

Copy the “P” part of the logo, paste it into our Photoshop file and choose paste as “Smart Object” from the dialogue box.

We then want to centre the logo horizontally (if it isn’t already), scale it up a bit and move it to vertical centre of the top half of our banner. Hit the enter key to apply the transformation.

Repeat the same process for the “Performancing” text part of the logo. Copy the text from Illustrator, paste into Photoshop as a Smart Object, scale it to size, and align the top edge to the guide in the vertical centre.

Although our canvas isn’t so empty any more, it’s still looking pretty flat and uninteresting. We gotta make that logo pop! What better way to make a logo stand out than with a bevel and a drop-shadow? There isn’t one – you know it’s true 😉

Bevels and drop-shadows can quickly go pear-shaped if you’re not careful, but I’ve found that the key for both is subtlety. I basically just play around with the bevel layer style settings until things look just right. I applied the following settings to get the final logo looking the way it does:

The drop-shadow settings are pretty straight forward, however since the “P” in the Performancing logo is dark blue, I thought I’d add a white, single pixel outside stroke to it in order to make the edges of the logo more defined. I set the colour of the drop-shadow to be dark blue rather than black, as it looks more realistic in this instance.

So what we end up with after applying our layer styles is looking pretty good.

Although our logo now looks much nicer and more tactile, it’s still not really popping. We can add more pop by putting a radial gradient behind it. So go ahead and duplicate the “bg gradient” layer and call the new layer “glow”. Select white for both the foreground and background colours with the colour picker, then select the gradient tool and a radial gradient.

We then want to open the Gradient Editor by clicking the white drop-down menu on the left. Then select “Foreground to Transparent” from the Presets.

Creating a glow behind the logo is then simply a matter, of clicking and dragging with the gradient tool from the centre of the logo to the bottom of the banner. What you should end up with it this:

Much more poppy! Now it’s time for some text.

Text

As I mentioned at the beginning of this tutorial, I wanted to keep the message of the banner pretty simple. Something along the lines of “Hello! We’re Performancing. We like bloggers and we’ve got this great plug-in for Firefox”. I thought the Performancing tagline “Helping Bloggers Succeed” summed up part of the message, so all that was left was to mention the Firefox plug-in. I added the tagline and the remaining text using my current favourite font, Myriad Pro.

Tip: When setting non anti-aliased text, make sure “Fractional Widths” is selected in the Character palette sub-menu. This kerns (spaces out) the text evenly and will make a huge difference to the end result.

Page curl

I imagine this section of this (now quite lengthy) tutorial, will attract the most attention 🙂

There were no magic tricks used when creating the page curl — it’s really just a couple of shapes and a gradient or two.

Select the pen tool, pick a nice, rich orange with the colour picker, then choose “Shape layers” from the options tool bar.

Go ahead and draw in the page curl as below, then right-click the new shape layer in the layers palette and select “Rasterize Layer”.

To create the shading on the page curl I used the “Burn” tool.

Select “Highlights” from the “Range” menu in the Options tool bar, and draw a straight line along the bottom edge of the curl. To do this, click just outside the top tight of the curl, hold down the shift key, then click just outside the bottom left of the curl. Repeat this step a couple of times, and experiment a little, until the shading of your curl looks believable.

To add more realism to our page curl, we need some shadows. We’ll add two — one under the left of the curl, and one directly below it.

For the shadow on the left I chose black with the colour picker and then I drew in a shape.

Then I dropped the opacity of the shadow down to 15% using the layers palette “Opacity” menu, and repositioned it under the curl.

TIP: You can quickly change the opacity of a layer by selecting it and pressing a number on your keyboard. Pressing “5” once for example, will reduce the opacity to 50%. Pressing “5” twice changes it to 55% etc.

I then created a new layer and drew a circular selection using the circular marquee tool.

For the bottom shadow I chose black for the foreground and background colours with the colour picker, selected the radial gradient tool, and again chose “Foreground to Transparent” from the Preset menu.

Then I filled my selection with a radial gradient.

Then we need to distort our radial gradient by selecting Transform>Distort from the Edit menu.

All that remains for our shadow is to delete the extraneous bits using the Polygonal Lasso Tool and they’re done.

TIP: You can get point-to-point (straight) selections using the standard Lasso Tool by holding down the Alt key as you draw.

Nearly done! Now we need to mask out the bottom right corner of our rounded rectangle background layer using a layer mask.

Select the “bg” layer, then draw a selection using the polygonal lasso tool again, similar to the way I’ve done below:

Now to mask out the “bg” layer, invert the selection (Select>Inverse), then click the “Add layer mask” button at the bottom of the layers palette.

What you should end up with is a pretty convincing page curl, that begs the user to click it. But that’s not all! To encourage clicking even further I added a cute little arrow from a font (of which the name escapes me) to the top of our curl. Tactile and inviting — two great things a banner should be 😉

And to finish off I added a call to action. Put simply, some “click here”, “download me now” text, under the bottom shadow.

Result

It speaks for itself really 🙂

Seriously though, I’m quite pleased with the final banner, particularly since it won me $1000! Woo-hoo!

Conclusion

I hope you’ve learned some neat little tips and new approaches from this tutorial, and if anyone likes it I’ll probably throw a few more tutorials together.

Please leave a comment if you’ve learned something new, or particularly if you’ve got a better way of doing something I’ve outlined!

One last thing… For those of you who want to use the Performancing banner on your site, I’ve put together a small PHP application that will generate the ad for you on any colour background. Check out the Performancing banner Configurator™ here.