88×31 was the original “button” size for webcomics.  This is a very acceptable size for link exchanges, and often the smallest. Many people will link with larger sizes now, but this was once the default size. Definitely have at least one banner of this size available, and preferably, more than one.

117×30 is the “button” size on Project Wonderful.  Most webcomickers do not link with this size. If you are seeking a link exchange with someone, check their links page first to see which size they prefer.  You SHOULD have this size available on your links page as it is slowly becoming more popular, but I think you will find many still prefer to link with 88×31.

125×125 is the  “square” size.  It is very rare to see anyone choose this size to link another comic with.  Not unheard of, but rare. You MAY want to have this size available on your links page.

160×600 is the “skyscraper” or “tower” size. This is for advertising purposes only. No one will link you with this size unless they are crazy (120×60 is the thin tower, going out of style).

200×40 is my personal favorite size for link banners. It is also the de facto size for link exchanges.   It’s small enough you can often fit 3 across a page, but large enough you can fit some art on there. If you remember my 4-article series about making banners, art together with words make the best banners, especially for comics. Definitely have at least one banner of this size available, and preferably, more than one.

234×60 is the Project Wonderful “half banner” size.  I find it an awkward size myself.  Most webcomickers do not link with this size. Have this for size for advertising for yourself, but don’t expect others to use it.

300×250 is the “rectangle” size. This is for advertising purposes only. No one will link you with this size unless they are crazy or owe you a favor big time.

468×60 is the traditional full banner size. You will be lucky to get a link exchange with this size, but it’s certainly not unheard of.  This is a size to have for many things, including top lists, comic updater sites, comic collective banner rotations, and more. Definitely have at least one banner of this size available, and preferably, more than one.

728×90 is the “leaderboard” size.  This is for advertising purposes only. No one will link you with this size unless they are crazy.

Other sizes: some comickers have created link banners of very odd sizes. This is not advisable. People don’t like their link exchange page to be horribly cluttered, which it will become if everyone wants a different size. Feel free to have other sizes available ALONGSIDE the acceptable sizes.

Etiquette for people seeking link exchanges: if you are asking for a link exchange with another comic, do exactly that FIRST: ask! Do not email someone with your banner already attached, or with a link to you banner/links page, or with a link to your OWN links page, where their banner is up.  It is very rude to 1) send attachments to people who don’t know you 2) assume they will link you and 3) try to pressure them into a reciprocal link by already putting up their link. I recommend asking if they would be willing to exchange banners with you, and if so, what size they would prefer.  Ball’s in their court, and they’ll get back to you if they’re interested. 90% of people will be interested, unless you’re making a totally horrible comic* and you’re asking a totally great, popular comic*.

*relative designations.

Etiquette for link/banner pages: preferably you should have SOMEWHERE on your links page your linking policy. For example, do you even accept link exchange queries? Some people don’t (ex, Earthsong)! Are there comics you won’t link (mature? violent? graphic?)? What banner sizes do you prefer, and where can you be reached for queries? If your linking banners are on a different page than you link exchanges, make sure the link is prominent.

I will start with what not to do, as that is easiest. Do NOT make flashing ads with bright colors and even brighter letters.  These are ads that in any reputable ad network go for $0.05 CPM because–guess what–they have extremely bad performance. No one clicks on ads that annoy them. Instead, they make a mental note NOT to click.

Do not time your animation so fast that even a speed-reader cannot read any text you have. This is not an incentive to read your comic–”Whoops, I didn’t catch that! I should CLICK to see what was written there!” It is an annoyance, and instead is seen as “This person doesn’t know how to make good ads. I doubt their comic is any good either.”  Please note that timing text and timing IMAGES are two very different things.  An image flashing before your eyes is far more intriguing than words flashing.

At the same time, do not time your animation so SLOW that people can read the text 3 or 4 times before the ad changes frames.  If you do this, the flitting attention of internet users will do exactly that: flit away.  My rule of thumb 2 seconds per 5 words.  In English, we see words as entire units; we don’t read letter by letter, we see the whole word almost as an image, and it takes less than 1/2 a second to recognize a word.

Do not “oversaturate” your animated ad with information. As with any ad, less is often more.  No one is going to read an entire paragraph in an ad, even if it’s only presented with 3 words at a time. Condense everything down to NO MORE THAN 2 SENTENCES. Fast fast fast. Don’t be long-winded, put your best foot forward, and keep it short.

Do not make your animated ad too long. The longer an animation lasts, the larger the file size is, and the less likely the ad is to work. Remember! Short attention spans.

What material should you present on an animated ad? Something with a pay off: don’t make people regret spending the extra couple seconds watching the animation. The end of the animation has to have something worthwhile.  Sometimes payoff is nothing more than an explanation of the images shown earlier. For example, you show frames of some art from your comic, and then the following frames show your title, catch-phrase and URL.

Sometimes pay-off is simply the catch-phrase that makes people WANT to click. That is the real kicker, but that is goal of ANY ad, not just animations. You have to make people WANT to click by making them excited or curious.

Showing only images, without explanation, or only text and no art, leaves little in the way of pay-off. The best ads have BOTH art and text.

MAKING ANIMATIONS: This is something actually very easy to do in Photoshop Elements or Adobe ImageReady.  People have already made a lot of tutorials on this, so I’m just going to find some and link them rather than creating my own.

Making Animations in Photoshop Elements 3

Making Animations in Elements AND Photoshop CS2 (with screenshots)

Sorry for the delay in articles here. I’ve been busy beyond heck doing other things…like redesigning the Xylia website! Next up: Vote Incentives and Toplists…are they worth it?

Followed by using Deviant Art as a networking tool.

And then a review of another ad company: Adtegrity.

Finally, Stumble Upon as a networking tool.

Option 1 is usually better. Interested visitors see a higher quality image, and even though there is LESS to see, it is tantalizing in its…lack…of the entire image.  It’s saying “see more! Click here!” without actually saying it.  If you do it right, that is.

Option 2 is what most people seem to go with. What happens though is that the art loses quality, looks squashed, gets blurry and becomes…unattractive.  The only time I’ve seen this done right is on LARGE banners, like 160×600 towers or 728×90 leaderboards. If you have enough room, you can fit more. But if you don’t have enough room, don’t try to fit the 14 co-eds into the telephone booth.

How about some examples? I’m going to go with a middle-size, popular-size banner for linking (200x40px) and a random panel from a recent Not Alone page of mine (last panel).  I need more banners for that comic anyways.

First, I’m going to draw upon my 8 elements of a banner discussed in the first article about this. I’m going to choose a “facial feature” and use my personal logo.  I’m not going to include my URL because Not Alone doesn’t have its own site. I will include a border, action/movement is part of the panel, I’ll be using a monochromatic color scheme, and since this is a panel straight from my comic, the advertising is truthful. If there is room for a tag-line, I will include it.
Option 1, small piece of larger art done wrong, then right:

Why is the first one wrong and the second one right? The first has art that is TOO large on a canvas that is TOO small. It should only take one short glance to discern what is being shown to you.  You shouldn’t have to pause and ask, “what is that supposed to be?”  The second one is “right” because you can easily tell what it is, yet it’s still large enough that it’s only a PIECE of the entire image.

Option 2, “zoom out” done wrong and then done better:

Again, what makes the first wrong and the second right? In the first, the image is so SMALL it is you can’t tell what it is without squinting, the same kind of problem that the bad option 1 banner had, but in the opposite way. The second version of this type of banner is better because you can still see what it is without compromised quality. I don’t call this one “right” because to do a far-zoomed-out banner, you need to choose the right dimensions for the job. This image could not be placed in a way that satisfied me. It is only better, not “right.”

Some other things:

When the image that you choose is facing a certain way (for example, the character on the banner faces to the right), it should face your logo on the other side. The two should face each other, drawing attention INWARD. If the elements faced opposite directions, attention would be focused OUTWARD. Draw the person in. People will look where the character in the banner is looking. So, focus that attention on you, not away from you.

Second, another common mistake I see with small banners is people not wanting to include text at all. It is amazing how small text can be and still be readable. You need at least your comic’s title or logo on every banner advertising your comic. If you can fit a tag line it, do so. The phrase, “fate is a choice” on these banners is set at only 10px high. It was still readable at 8px high, but there was no reason to make it that small.

Making Banners: Animations to come after the holidays are over.

Making Good Banners 1 dealt with 8 technical elements of banner-making: facial features/eyes, tag-lines, URL, separation, action, color, more than tag-lines, and sexual attraction. I also touched on the importance of having a recognizable logo and ended talking about the dangers of “false” advertising.

This article is going to touch on MAKING tag lines and targeting demographics, placement of images, and when/how to use animations.

1) Tag-line, motto, etc: If you don’t have one, it’s time to sit down and make one. It is one thing to have good art on your banner, but good art alone will get you only half the clicks good art AND a catchy tag line will get you. A tag-line should be short, about 10 words.  In this case, less is better, so if you can get under 10 words and still get your point across, you’re golden.

When you make one of these, what you should do is transmit the overall FEEL of your comic to someone who has never read, seen or heard of your work before. You are not necessarily trying to give them the plot synopsis (that’s what your about page is for!), you are trying to make people click to see your site first, to get them excited, to make them think, “that sounds like something I would like.” Plot-schmot. You are the hunter, they are the prey, your tag line is the bait.  The bait isn’t the whole animal, just a small, tantalizing piece. Now go and get ‘em, Sparky!

—

Examples! I’ll (yet again) start with my own stuff. I had to make a 600x29px banner for the new, narrower, SpiderForest rotating header for my comic Not Alone.  I already had a short, tight synopsis, which is what I recommend starting with first if you’re having trouble thinking of a tag line. After all, if you can’t even condense your story into a paragraph, you’re going to have quite the time condensing it into 10 words or less!

Ignoring that synopsis for now, Not Alone is a story about self-discovery, leaving home, trusting yourself and having an adventure. It’s fluff, really, and I’m not afraid to say that. It’s short, it’s cliche, but it’s the stuff people like, especially young women between the ages of 14 and 21, my target audience for that comic.  My tag line is, “Who were you meant to be?” (I like tag-lines that directly ask a question. I find them to be more interactive.)

Pretty much a fluffy tag-line, just like the comic. (I’m considering, “Fate is a choice, not a destination,” but…eeehhhh…..)

What it was meant to evoke: a sense of fate, adventure and discovery. Much like the story of Harry Potter, perhaps you are simply waiting to be discovered. You deserve more in life than you have.  There’s something out there, and you’re missing it!

Targeted demographic: Teens and dreamers.

Here are some more examples, better than mine:

Abandon: First Vampire “The Past Will Bite You.”

SkyFall: “1000 years of war, 6 magical devices, 1 last hope.”

Dreadnought Invasion Six: “Existence to Extinction in One Short Trip.”

Fortune’s Fools: “There are Epic Tales of Chivalry, Honor and Love Undying… This is Not One of Them.” (Could easily be shortened up a bit, but works as is.)

Utukki: “Some People Can’t Let Sleeping Demons Lie.”

Looking For Group is basically a tag line and title in one!

You’ll notice in each of these either a distinct crescendo or a forceful OOMPH at the end.  None of these patter out. They’re almost sharp, like a warning, harsh, like a dark whisper, exciting, or amusing. They are meant to stick in your head, and perhaps (especially Utukki’s) play off something else you may have heard before.  Think of WHOM these tag-lines target. What age ranges? What backgrounds? People who watch what type of TV or play what type of games? You do the same thing. Consider who reads your comic, and then make a tag-line to get more people like them.  If you are going to advertise to people who are NOT like them, you’ll need a tag-line that appeals to another audience.  Always always always market to your audience, because your banners will have poor results if you don’t. Would you ever advertise a minivan to a guy looking for a corvette? No! But you would advertise that minivan to, say, a couple with kids, and perhaps, if you gave that minivan a pimpin’ make-over, flames on the side and rims, you COULD market to the guy looking for a corvette.  But you need to remember, no matter how much you package a minivan to look like a corvette, it’s still a minivan. Changing the packaging may just make the one guy think that hey, maybe he would like a minivan TOO.

(Please note, by minivan and corvette in this example, I am not talking about comic quality. I just wanted two extremely different cars, owned by usually two very different kinds of people.)

Here’s a game for you, to see how well prospective tag-lines can work: NAME THE MOVIE!

“The World Isn’t Ending…We Are.”

“Why So Serious?”

“A Hero Is Unleashed.”

This article is getting longer than desired, and I don’t want to cram more information here. It’s better if these are shorter and to the point.  Animations and image placements in banners will be discussed tomorrow! And as always, my disclaimer: I don’t claim to be a professional or even moderately talented in any of these areas. This is food for thought, based on what successful comics (and or games and movies) already have been doing!  Take what you can use, and put your own spin on it.

That said, there is no shame in having a hard time making banners for your comic.  This article will feature a couple tips I’ve learned over the years about how to advertise your product, or rather, your webcomic. You need to get used to the fact that you are in fact SELLING your webcomic to people who don’t already read it. These people are buying your webcomic with the currency called “free time.”  Anything you sell must be marketed. In order to market a product, you have to make that product attractive.  For a shallow example, do you EVER see shaving or body wash commercials that feature non-studly men? Ok, ok, I admit, I’m a fan of those commercials. As a woman, I won’t buy those products,  but hey, if I had a boyfriend I may recommend them.

So, how do you make your webcomic “attractive” in a banner? There are 2 ways. With art (color schemes, images, etc) or with writing (motto, tag-line, etc.)  The best banners use both art AND writing, but good banners can be made with either separately if you know how to design!

Before I talk about either element (art or writing), there is something else I’m going to say real quick: It is ALWAYS important to include the title of your comic on your banner. By “title,” I mostly mean “logo.” A logo is something unique to YOUR project that represents it. It is not simply your title in a font you kinda like today and may not like tomorrow, with a couple layer effects thrown in and gradient on top.  You should have one design for the title, so that it is always associated with your comic. A logo can include art too, for example, the Palace in the Sky Logo. On your banner, all or part of your logo should be visible. Even if people don’t click on your banner, they at least know and recognize your logo image.  That in itself is lasting advertising.

Sometimes you really can’t fit your logo on an ad though, and I know.  Sometimes you just don’t have a logo you like. It takes a lot of time to develop a logo! What do you do then? Read to the end of the article to find out.

BANNER ELEMENTS:

Element 1: Faces and/or Facial Features:

What you never want your banner to do is look too crowded, too empty, too garish, or camouflaged into a site’s background. Banner art should draw the eye, not cause the eye to pass it over without seeing it.  A simple way to draw the eye is to INCLUDE eyes (and/or a face) in your banner.  Humans are genetically wired to look at faces and features, and if we see eyes, we look at eyes.  Eyes in banner art should be looking out AT the person, or be focused on something else…something exciting, troublesome, funny, etc! If you include bored or sleepy eyes in your banner, what’s the point? You want to draw attention, not chase it away!

For example, I went a little overboard with eyes in this ad, but it has had great results:

Element 2: “Tag-line, what it’s about, motto, click-me-saying!”

Something the previous button ad also features is a short “what’s it about” tagline. It’s a line I use when advertising to an audience that perhaps doesn’t read or know about webcomics. “Free fantasy online comic.” Here, I don’t even use the word “webcomic” because that’s a confusing word to people who don’t know it. I say “free,” because yeah, some people don’t know they are free entertainment. “Fantasy” is a generic term, just to give people an idea of the genre. I would run this fantasy-associated sites, obviously.  Something like roleplaying or MMORPG-associated sites.

If your comic has a tag-line (mine is “The Four Winds aren’t legend. They’re real.”), use it. The tag-line, like your logo, becomes associated with you and your work. If you don’t have any kind of tag-line, you need to make one. Condense your work into under 10 words. This is important.

Element 3: URL

Another thing the button ad has is my URL. Since I have my own domain name, it’s important to, like a logo/title, make people associate it with me and my webcomic.  I don’t have “twow.comicgenesis.com,” I have WAROFWINDS.com.  Those of you who don’t already have your own domain, I HIGHLY recommend getting one.  It separates you from the rest of the pack, and makes you distinct.

Element 4: Separation

The last thing this ad has is 1px white border surrounding it. By framing the ad, I keep it from blending in to a site’s background or blending into a large group of ads the same size.  You can do this in photoship going to layer properties and selecting stroke, 1px, inside.  For that to work, the layer you choose to do this on must be cropped to the right size. For example, if you open a new document, import a LARGER document, and then try the “inside 1px stroke” part, the stroke will not be visible. Understand? Crop the image to the right size first, or put it on a transparent layer on top, then flatten.

Element 5: Action or Movement

Here is an add that doesn’t include a logo or a face, or a tagline, or a URL, or a genre.

This is an ad that I would use on strictly webcomic-only sites, where a reading audience knows that the ad has something to do with webcomics. Thanks to Project Wonderful, that kind of targeted advertising is possible.  This is an “action” ad. It shows weapons, a hint at tattoos, and a medieval/non-technological time period judging by the clothes. Even if I don’t include the word “Fantasy” it still says it. I include my title in an aesthetically pleasing matter on the side. This way, I’m not advertising the title. Here, the ART is first, when the eye is drawn and someone becomes curious, they see the title. It is NOT they see the title, and then they see the art.  Put your most attractive “foot” forward.

Element 6: Color [schemes]:

Sometimes you have art that is not distinct enough on its own, or that doesn’t have a natural color scheme, and you need to make your own. Color theory is, like graphic design, something to be studied. I’m only going to touch on it lightly. I’ll start first with black and white:

This ad is Just the logo and a silhouette. This ad is stylish, but says only that it has something to do with “dogs.” It says nothing about it being a webcomic, that it’s fantasy, the art style, or the plot. This is an ad I use ONLY for comic-comic linking purposes. People will KNOW it’s a webcomic if it’s found in another webcomic’s links list. This ad design is not one I use when advertising my comic because it doesn’t have enough information. Design-wise, I love it. It’s distinct and pleasing to the eye. But I would expect click-thru’s to very low using this style ad on project wonderful.

This had a complimentary color scheme. It uses blues and oranges.  Complementary colors attract the eye, but do remember TASTE and SUBTLETY. Don’t go overboard on supersaturated, bright colors just to make people look at your ad. Who clicks ugly, annoying ads? No one. They actually make a point to NOT click. Just because you draw attention to your ad doesn’t mean it’s always a good thing.

Something to remember with colors is the emotions certain schemes evoke. Do you want exciting colors (orange, red, yellow; warm colors; bright colors) or soothing colors (green, blue, purple; cool colors, dark colors, unsaturated colors)? Warm colors can also be aggressive, whereas cool colors can also be depressing. For more on color theory, google it!

Element 7: More Than Tag-Lines:

Larger banner sizes let you put more information on your banner.  Use that room to your advantage! Include as many elements as think important. Don’t crowd it, and always leave breathing room (for articles tangential to this topic, check out YWCSBS’ features on text balloons) . Imagine that people have 3 seconds max to see your banner. ONLY THREE. In those short seconds, what is the important information you want to impart?  Find a way to do that. If it takes longer than three, you probably put too much on there.

There are, of course, exceptions to the 3 second rule. Animated banners, for one, and really great art for another. The more a banner can capture attention, the longer you have to impress a person with words.

Element 8: Sexual Attraction:

The last element I’m going to talk about is the crudest, yet often best performing method: boobs, babes and big weapons. I include the last here because, well, in my experience, men can often find swords, guns and mecha just as attractive as women, and 18-24 year old men make up the majority of the webcomic viewing audience thanks to PA, CAD, Apple Geeks, etc.

If you want visits fast, make a pr0n comic, and advertise for it with the wares you draw. Have you seen the ads for Cru the Dwarf? Have you seen how fast that webcomic has risen in the ranks? Hey, it works, and that’s all there is to it.

——

What about “false advertising?” Displaying art that doesn’t appear in your comic? Displaying color ads when your comic is B&W?  NOT A GOOD IDEA.  Disappointed readers leave fast. If they come expecting a certain product and you don’t live up to your part of the bargain, your comic had better be good enough to keep them anyways.  The best policy is to include art directly from your comic.

Any other elements you can think of that I missed? Leave a comment and I will append the article. These are for reference, not to satisfy my vanity.  I also apologize for using only my own banners in this. I feel uncomfortable critiquing others’ banners.

Tomorrow: Making Banners Part II: Advanced.  Making animations in ImageReady, choosing art, creating tag-lines.