How to Design an Internet Advertisement Banner

What is an Internet Advertisement Banner? Starting
up a new website or looking to increase the number of visitors for your
existing website? An internet advertisement banner might be just what
you need. Whether you’re reading a magazine, surfing the web, or
watching television, you are being subjected to advertisements.
Advertisements are meant to intrigue people about your
company/organization/website enough that they are willing to look into
it further should the services being provided match their interests.
Internet advertisement banners are a great way to brand your website
(see my article on favicons to
learn more about what branding means). One of the most commonly designed
and utilized advertisement banners is called the full banner which will
be the focus of this tutorial.

Finished Product: No Animation



Thoughts before we begin:


It is important to know and understand the industry in which your own
company is a part of, as well as the demographics and pyschographics
(age, gender, hobbies, likes/dislikes) of the audience that the website
you will be using your advertisement on. The reason for this is simple,
aesthetics. Let’s say you own a web design company and plan on
advertising on a “gaming” website. A stiff-shirt, reserved,
advertisement banner may appeal to some of the visitors on that website,
but if you create something a little more edgy, something that flows
more with the genre of that website, you will receive more clicks. You
don’t have to design a different banner for each website you plan on
placing a banner on, however, you shouldn’t limit yourself to only one
design. No matter what your audience may be, and no matter what image
you are making, remember K.I.S.:Keep It Simple.
The simpler an image is, the easier it is for people to gather the
information that you are attempting to convey. In no way should this
limit your design ability or visions. A good designer can take the
information he or she needs to state and apply it to a clean looking
image.
Other things to consider:

1. Keep a Color Scheme: Select about three colors for your
   banner that you will repeatedly use. It may sound repetitious, but a
   continued pattern of colors allows for a more comfortable viewing
   experience for your viewers as opposed to a number of random colors
   popping out at them.
   
2. Use your Color Scheme to your Advantage: Have a logo? Not
   only feature your logo in the banner, pick out your color scheme from
   the logo. The more times a person sees your logo or the colors used in
   the logo, the easier it will be for the viewer to associate that image
   or those colors with your website.
   
3. Remember what you are Designing: Yes, it is an
   advertisement banner; treat it as such. This is not the time (especially
   with a 468×60 pixel image) to write a novel in a small place. Feature
   your website name, a slogan (if you have one), and maybe what your
   website will provide viewers with (if your slogan doesn’t tell you
   already). With animated banners, you have a little more wiggle room to
   include information. Think of the copy used in this sized banner as
   coming from a truncated outline. You have your title, a section, and
   then a few articles that support your section. With that being said,
   remember K.I.S. and also use short, yet descriptive
   words.
   

Non-Animated Banner:


Making a non-animated advertisement banner of this size requires a
relatively basic understanding of Adobe Photoshop (or any image editing
program for that matter). In this tutorial, due to the fact that I am
too lazy to upload my new Adobe Photoshop CS5 onto my laptop that I
bought a few weeks ago, I will be using a licensed (and very outdated)
Adobe Photoshop version 7.0, complete with Adobe Photoshop ImageReady
7.0 (which will be used for the animation). Later versions of Adobe
Photoshop have an animation utility built within the program so there is
no need for a separate program. However, you can also use Adobe
Fireworks for the animation and even Adobe Flash Professional if you are
that advanced. Stay tuned for the second section of this tutorial in
which I will be showing you a few different basic animation techniques
that you can apply to your banner.

Part 1:

Start with a new document with the dimensions 468 pixels for width
and 60 pixels for height. I have my content set to transparent as
default but you can select whatever you desire.

Part 2:

Next step after we have our new document open is to fill in layer
one with a background color. Select your paint bucket tool (sometimes
hidden behind the gradient tool, if that’s the case, right click and you
have the option of selecting the paint bucket tool). Look down your
tool menu until you find two colored squares, if you hover your mouse
over the two different colored squares, the front one will say
“foreground color” and the back, “background color.” Click the
foreground color square and select a color for your banner. For my
banner, I chose Hex Code # 1E1E1E.

Part 3:

I added Break the Network’s logo on the left hand side duplicated the
image, went to Edit>Transform>Flip Horizontal, and then moved it
to right side of the image to create balance. This would be a great time
for you to add your website’s logo and place it in a similar spot.
Next, make a new layer (ctrl+shift+n, press OK). Press ctrl+a
(Edit>Select All) to select the entire image. Then go to
Edit>Stroke and apply the following settings with a color of your
choice. I chose the color, Hex # B7B9AF from the Break the Network logo
(applying thought number two from thoughts to consider before we begin).

Part 4:

I added Break the Network’s logo on the left hand side duplicated the
image, went to Edit>Transform>Flip Horizontal, and then moved it
to right side of the image to create balance. This would be a great time
for you to add your website’s logo and place it in a similar spot.
Next, make a new layer (ctrl+shift+n, press OK). Press ctrl+a
(Edit>Select All) to select the entire image. Then go to
Edit>Stroke and apply the following settings with a color of your
choice. I chose the color, Hex # B7B9AF from the Break the Network logo
(applying thought number two from thoughts to consider before we begin).

Part 5:

Selecting an appropriate font is vital for your banner. Within the
field of typography, studies have been done connecting certain fonts
with human emotions. Assuming that you, like myself, are not scholars in
the typography field, I rely on my gut instinct on how the font makes
me feel. Since I am designing a quick advertisement banner for Break the
Network, a technologically based website, I chose the font Orator A
Extended size 30 pixel (this might be a default font, otherwise, I
download my fonts from (www.dafont.com).
After you select the font you like, type in the title of your website
(or whatever it is that you are advertising. I centered this type since I
placed it in between two of the logos. Right click on the font layer
you just created in your layers palette and select “Blending Options.” I
applied the following layer styles:

Check Point

Based on the steps above, your banner should look somewhat similar
to this:

Part 6:

In this part, we’re going to add a separate string of text below the
first text we added. This is where we can put our slogan or 3-4
descriptive words about your website (services you provide, content you
can find on the website, etc). Choose a different font that you feel
flows with the above font. Bold fonts are good for title texts and
narrow fonts are good for subtitles. Choose a smaller font size and type
in your slogan. In this case, I put in “only the most interesting
articles.” I centered it and nudged it down a few pixels below the title
text so that there is a gap. Right click on the original title text
layer and select “Copy Layer Styles.” Then, on your new text layer (your
slogan layer) right click and select “Paste Layer Styles” and the
blending options we used before will be applied to your new text layer.

Part 7:

Does it look a little empty in between the two strings of text to
you? It certainly does to me. Take out your line tool (hidden behind the
rectangle/oval/polygon tool, just right click and select line). At the
top settings, change it to 2 pixels. Create a new layer (ctrl+shift+n)
and draw a line that goes in between your two text layers, as long as
you want it to be. With this layer still selected i your layer palette,
go to Filter>Blur>Motion Blur and change the Angle to 0 and Pixels
to 48. Select a color that goes well with your banner, I chose the same
color I used for the text layers.

Part 8:

In this part we’ll be adding a highlight just to add one more
element/touch to the image before completion. Remember where we went to
get the line tool? Right click there again and select the rectangle
tool. Change your foreground color (first colored square on your tool
bar) to white (hex # FFFFFF). Create a new layer (ctrl+shift+n) and draw
a rectangle that goes the entire length of your image and about halfway
down. On your layers palette, there is a dropdown menu that has
“Normal” selected as default. Click that and change to soft light.
Located to the right of that drop down menu is something that says
Opacity followed by 100%. Change the 100% to 30%.

Final Thoughts:



If all goes well, you should end up with something similar to this:

Of course I encourage you to apply your own design intuition and
skills learned from other tutorials and your own personal knowledge.
This is just a very basic and easy advertisement banner template that
you can follow so you can can design future banners within minutes.
Section two of this tutorial will be out soon and will dive further into
how you can customize your banner to make it pop and catch the eye of
the viewer.