How to Make an Attractive Banner in 5 Easy Steps

So as a designer, I specialize in interface design. You might note that while the structure and overall aesthetic of Diligent is nice, the logo is kind of “meh.” (Thank Cthulu for Sam and the monkey!) Graphic design is one of my personal weaknesses, so when it came to designing some banners to promote my sites, I went in search of a tutorial. Imagine my surprise when I failed to find any.

Why is banner design such a closely guarded secret? I don’t know. So today I’m going to let the secret out and show you how I made the Deadly Clever Designs banner in the bottom, in hopes of getting some of you other newbies started. Let’s begin with this banner design tutorial !

Step One: Create Your Banner Layout

First things first, create a new photoshop document that is 468 by 60 px in size. Once that’s done, select a color scheme you enjoy (ideally, three colors) and fill in the document with your background color. If you need help with this, check out my post about color functions. The colors I’m using are lime green, white, and absolute black.

Step Two: Add Your Logo or Attractive Graphic

The next step in designing a banner is to add your logo. Create a new layer and paste your logo into it. Your logo should be sized to have a height of 55px to fit accordingly. If your logo doesn’t scale properly, perhaps you should consider the things you should be getting from your logo designer. The color of your logo should be the other two prominent colors in your scheme. (All three are prominent, because this is an active graphic.)

After you paste your logo into your banner file, you may notice that it’s aligned in the center. Simply use the Move Tool (v) to adjust it’s position. To be more precise, we’re going to use rulers and guides to layout the design of our banner. If you don’t have rulers enabled, use ctrl+R or View–>Rulers to enable them.

Now select your background layer (the layer we want to use for the guide reference.) Then use the Move Tool and create a new horizontal guide by clicking and dragging on the top ruler. The guide will automatically stop in the middle of the document. Next, create a new vertical guide by clicking and dragging on the left ruler and position it about 10 to 20 pixels into your design.

Now you can properly align your logo! I added a few more guides to help out with aligning text later on.

Step Three: Adding Your Website Name

If your website name isn’t in your logo, or needs to be represented more clearly, you should add it to the banner. In this tutorial, we’re going to put it next to the logo, in a font that’s about half the height of the graphic used. I position mine slightly left of the middle, using the font Nevis. My text is in my second most prominent color: white.

Step Four: Adding the Tagline

A banner with just your site name may not attract all of the clients you’re looking for. They know that my website is named “Deadly Clever Designs,” but what is it I’m designing? So let’s add a tagline! Using the rounded rectangle tool, create a rounded rectangle in your third prominent color (mine is green) that extends off the right and bottom edges, such as in the picture below:

Now let’s add some text on top. Using the text tool, add your tagline in a new layer above the rounded rectangle. I’m going to use white to contrast with the green, such as in the logo. To make it more readable, I’ve set the text style to “crisp.” (You may have to zoom to position the text correctly.)

Step Five: Exporting your Design

Once you’ve completed your tagline, it’s time to export your design to be used! In most cases, you’ll want to export your banner as a png file. To do this with photoshop, use Ctrl+Alt+Shift+S or File–>Save for Web. Adobe ImageReady should pop up to help you with formatting. Simply select PNG-24 from the dropdown menu.

And there you have it! Your attractive banner is now ready to start bringing in some clients. Obviously, this is a fairly simple tutorial and doesn’t cover animated banners or any kind of effects, but it should help the absolute beginner banner designer into the right direction. Here’s the final result:

What are your tips for banner design? What effects do you use to make your banners more attractive? Share your tips, resources, and opinions below!

Related Tags

how to make an attractive banner , attractive banner design , how to make an attractive logo , , attractive banner , attractive banner tutorial , attractive banners , how to make attractive banner , how to make attractive banners , making an attractive banner , attractive banner colors , attractive colors for banners , attractive colours for banners , attractive effects banner in photoshop , design , example of attractive banner , how to create an attractive web banner , how to create attractive banner photoshop , how to make a banner attractive , how to make attractive banner in photoshop

Related posts:

1. How to “Tagline” Your Post Photos in 3 Simple Steps This post was inspired by Yan of ThouShallBlog, who really...