Ok, so you’ve tried to make your own banner or advertisement for your blog or site, and the results look more like a flier for a bake sale clumsily done on Word than a professional layout for a website advert.
Fear not, help is at hand. And if you already have a life (and don’t have a handy five years spare to learn graphic design skills) here’s a little trick I recommend for non-designers to use for designing great ads – every time. What’s more – if you do this often enough, you will learn those skills and be able to call on them instinctively.
What’s the trick? It’s called tracing.
I know you probably haven’t traced since second grade. Most people don’t think of tracing when it comes to the internet. You aren’t about to lay some tracing paper over something you see on your favorite sites. But it is how we learn to draw, it’s easy to trace, and here’s why you should consider it.
- Tracing changes your designs to what you think you see – to what actually is there, in a good design. Real designers use much more radically different font sizes, for one thing – and much briefer slogans than a lay person would use.
- Web designers use something mysterious known as “the grid“. An underlying rule that gives the secret to pleasing layouts – tracing gives you the ‘bones’ of good design.
- Tracing merely uses the grid, and things like the text justification. There is no copyright violation here.
How do I trace an ad?
- Find an ad you like – approximately the same size as you need, or in a similar subject area as your ad or banner. You can do a Google image search such as “250×250 ad” for starters. Or, look at similar sites and see what ads, buttons or banners come up.
- Save a few of these to your computer using a right click, control click, or screen grab.
- Open it up in Photoshop. Design your new ad on a new layer over the top of this ad – setting your opacity (on the “layers” toolbar) to something like 50% – 70%.
- Keep the underlying ad there as a guide, but don’t slavishly copy it. You can come up with your own (or another ad’s) fonts, colors, and content.
Combine this with some tricks you can pick up here – things like making stripes, finding the colors another website uses, and finding great fonts and clip art – and you’ll be on your way to a professional ad every time.
As an example I had someone use this technique on the ad on the front page of this site (the one with the brown packages). Now – besides the fact that it doesn’t advertise anything in particular – and doesn’t link to anywhere – and has one of our “bunnies’ on it as a clue, the results are pretty good for a first timer. Did you pick it as an amateurs’?
Using This on Websites
But wait – there’s more. Why stop at ads? What about if you took a screen grab of your favorite whole website? You could then use that as the basic layout for your own site. All you would need are the basic skills in altering templates, which you can get right here.
When I design a site, the first thing I do is think about the top 3 sites I like the look of, and that I want to emulate in my site design. Mentally, I combine these into one layout – and then search for a free or premium WordPress template that will suit my needs.
The tracing trick just makes this process much more precise. Do you think Google uses really small fonts underneath the search box? Well, not until you’ve traced on top of it do you realize how small those fonts are – and how big all the empty white space is all around it.
Take it from me – tracing isn’t just for kids. What do you think?