When you are designing your webpage/site/element/what-have-you, never ever ever START designing in an HTML editor. You START in a graphics editor, such as Photoshop or GIMP. The biggest rookie mistake is starting a design in Notepad or DreamWeaver, uploading, testing, uploading, more testing, rinse and repeat 100 or so times before you finally *headdesk*. Good grief. I did that so many times when I first started out, and all my webpages looked like crap.

So, let’s start from the beginning. There are 2 basic phases for building a webpage: designing and coding.

Just as if you were drawing, you sketch first. You find the lines, decide where elements will go, and you make the lines thicker and more permanent.   You decide if you want to ink it, or paint it, etc, when all those lines are in the right place. All of that is the designing phase. Think of the coding phase as framing and matting that piece of art you just completed so that you can display it in a gallery (the internet).  You don’t start sketching on the wall of that gallery, because ONLY FINISHED PIECES are displayed in the gallery.  Still with me here?

Now, AS you design your webpage in your graphics editor, what you need to do is keep in mind your coding skills as you build.  THINK in the terms of the coding you will be doing, and don’t design past your skill set unless you are willing to do the research to find out how to do a certain thing, or can find someone to do it for you.  The easiest way to do this is to think in terms of square or rectangular shapes.  The more irregular your design, obviously the harder it will be.

But I’m getting a little off-track here. Lesson number one for you beginner webdesigners is always start in a graphics editor, not an HTML editor.

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.

http://webcomics.com/2008/12/11/photoshop-shortcuts/

Also, don’t forget to set your OWN short cuts with the ACTIONS tool. For example, I have the select>expand by 1px action set as “shift+f5.”  This saves me probably 15 minutes worth of finding a dropdown, selecting an option, and setting a value per coloring session.

Here is a tutorial on setting Actions in Photoshop:

http://www.dpandi.com/actions/

It uses an old version of PS in the images, but the steps hold true, and it’s short and to the point. Enjoy! More on banners when I learn to control the space-time continuum like Hiro Nakamura. I would guess by Friday. :3