Gungurru Web Design Blog

It’s always good to know how to design online adverts – even if it means designing a ‘Your Ad Here’ ad, it’s still great to have one place where you can go to get all the information for Ad sizes, Ad Creation and Ad Animation. Hopefully, this tutorial will be a great resource for future reference when it comes to creating an online advert.

Ad sizes:

All of the major ad networks use a standard advert size (presumably so that publishers can easily switch their site from another advertising network), and this is great for advert designers.

Square/Almost Square shapes:

Large Rectangle: 336px x 280px

Medium Rectangle: 300px x 250px

Square: 250px x 250px

Small Square: 200px x 200px

Button: 125px x 125px (This type of advert can be seen in the right hand side of this page)

Small Rectangle: 180px x 150px

Skyscraper ads (Vertical Rectangles)

Vertical Banner: 120px x 240px

Skyscraper: 120px x 600px (click thumbnail for larger view)

Wide Skyscraper: 160px x 600px (click thumbnail for larger view)

Banner ads (Horizontal Rectangles)

Leaderboard: 728px x 90px (Click the image to see the full size)

Banner: 468px x 60px

Half Banner: 234px x 60px

Ad Tutorial

Now, we’re going to make a series of ads in Photoshop, in a modern, glossy style. The magical thing about these ads is that once a ‘Large Rectangle’ (336px x 280px) has been created, we can just move the elements around, and then resave the image. This is great for creating a series of adverts.

Create a new canvas in Photoshop – 336px by 280px.

Then draw a rectangle which covers the entire canvas. The colour I’m using is #b2ff67.

Then, open up the blending options, and apply the following settings:

The gradient is from #5d9724 to # b2ff67.

Next, select the text tool, with a font size of 60px, and using Rockwell font (You’ll have it if you have Microsoft Word. If not, use a font like Clarendon) and make sure that it’s Bold, and White (#ffffff). Write your main text in the centre of the page, and then, on a new line, reduce the font size, and write your motto. Note: Try to make the motto take up the same amount of space as the entire first line – its good visual impact.

Then, open up the text layer’s blending options. Apply the following styles: (the red-brown colour is #944023).

The stroke’s colour burn settings are great, so that it goes well with the background. If you want to polish off the effect, change an important word to a light colour (I’m using a light pink, because it’s part of the Gungurru site’s colour scheme).

Then, place the text right in the middle of your canvas, and select the pen tool. Then, draw a sun-rays design, like so, and then change the colour to #FFFFFF (if you haven’t done so already). Make sure that the rays are relatively large, so that you can resize the canvas for different advert sizes, and still have some awesome rays.

If, like me, you haven’t had all of the points really neatly in place, just select the ‘Direct Selection’ tool, and modify the inner paths. Try to get the like so, so that the rays look as though they’re coming from a source:

Then, change the blending mode to overlay, and the layer opacity to 30%.

Here’s what I’ve got upon saving the file as a Jpeg:

Now you can call that a complete work – and you can use this as-is, but if you want to animate this, read on:

Animating the advert

If you want to animate your advert (note, some advertising networks don’t accept animated adverts), duplicate your text layer, and bring it to the front of the canvas, and change the text to something advert-like. (Don’t worry that it’s overlapping the text that’s there at the moment). I’ve written “Tailored Websites from only $$$)”. Then, make the visibility of the new layer invisible (click on the eye icon next to the layer)

Then, open the animation settings box (Window>Animation), and do the following:

Change the view mode to ‘Frame Animation’ (a little button at the bottom right) and there should be one thumbnail which has a time length written underneath it.

Click on the time, and change the time to 2.0 seconds.

Then, create a new frame (there’s a little icon below that looks like the ‘new layer’ button)

With the new frame selected, make the ‘Tailored Websites…’ layer visible, and make the Original text layer invisible.

Then, to save the file, save for web & devices (Ctrl+Alt+Shift+S), and choose the following settings:

Now the animation is done! Here’s the result that I got:

Changing the ad size

If you want the advert to be all kinds of sizes, just change the canvas size, and move the elements to match:

I’ve changed the size to a ‘Banner’ size:

That concludes this tutorial! If you have found this useful, please do subscribe – I’ve got some new PSD to HTML tutorials coming up soon, and please do comment to tell me how you got on with this!

Related posts:

1. Design A Shiny Premium Web 2.0 Download Button – Photoshop Tutorial
2. Design a Warm Nature Website Layout: a Photoshop Tutorial
3. Design a Vintage WWII Poster: a Photoshop Tutorial
4. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 1)
5. Create a Sleek Web 2.0 Style Website Layout: a Photoshop Tutorial (Part 2)

This entry was posted on Wednesday, August 26th, 2009 at 10:35 pm and is filed under Advertising. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.