Creating an Animated Banner Advert

There are sev­er­al joys pecu­li­ar to the inde­pend­ent writer. One of them is the respons­ib­il­ity of advert­ising. A few weeks back, I made the decision to plough more of the earn­ings from my books into these adverts. One of the places I wanted to advert­ise is a site call kboards.com, a busy hub full of Kindle writers and read­ers.

What Goes into the Ad?

It needs to cap­ture interest with min­im­al inform­a­tion. I kicked around some ideas using the ‘rule of three’: this, that and the oth­er, or ‘not this, not that, but the oth­er’. Since I don’t really have graph­ic illus­tra­tion skills bey­ond cre­at­ing book cov­ers, I’d need to use text. I came up with:

One heroine

Three books

Lost in time

Overall, I’m happy with them. They’re short. They tell you that the main char­ac­ter is a woman, that there are three books (so far) worth of story, and that the genre is sci­ence fic­tion (time travel).

My girl­friend looked at a draft of the fin­ished GIF and said that read­ers wouldn’t know any­thing about the qual­ity of the books. I agreed, and added a quote from an SFX of Déjà Vu as a ‘zero slide’ at the begin­ning.

How Does it Look?

The stand­ard dimen­sions for a ban­ner ad is 728 x 90 pixels. Once I’d stuffed that full of my text, there was no room for the book jack­ets, and it gen­er­ally looked shite. #advert­fail

Fine, I thought. I’ll just cre­ate an anim­ated GIF.

For the unini­ti­ated, an anim­ated GIF (pro­nounced ‘fish’) is a little video.

Creation: Keynote

I don’t have any fancy anim­a­tion soft­ware. I do, how­ever, use Apple Keynote to give psy­cho­logy lec­tures. Keynote is a par­tic­u­larly advanced present­a­tion plat­form that has text effects, slide trans­itions, and tim­ings. Crucially, it can also export a present­a­tion as a Quicktime movie file. That file can then be dropped into a Mac app called GIFBrewery to make an anim­ated GIF.

  • Open Keynote and select one of the stand­ard tem­plates

  • Next, you’ll want to have Keynote change its slide size to 728 x 90. Guess what? It won’t, because 90 is too small. You will need to cre­ate a slide with the ban­ner ad pro­por­tions but more pixels. I’d sug­gest 2184 x 270.

Keynote slide size

  • Create as many slides as you like. Each one of these will be a ‘moment’ in your anim­a­tion. For my own ban­ner, there were sev­en moments.

Slides

  • Set the tim­ings and trans­itions between the slides. You’ll see that, for the example below, I’ve set the trans­ition between the first slide and the second to be the ‘sparkle’ effect; the sparkle moves left to right; and the trans­ition activ­ates auto­mat­ic­ally after three seconds.

Transitions

  • Once you’ve set up auto­mat­ic trans­itions between slides, Keynote should be able to play through the ‘present­a­tion’ without manu­al inter­ven­tion. About five-ten seconds long is prob­ably enough—but if your ban­ner ad is awe­some, maybe people will watch it for longer. Who knows.

  • Now export the present­a­tion as a Quicktime video. Go to the File Menu > Export > Quicktime. Keynote will offer the fol­low­ing options, which are set accord­ing to those I used for my own ban­ner:

QT Options

Creation: GIFBrewery

The Quicktime file is some­thing that GIFBrewery can hap­pily use to pro­duce your ban­ner.

GIFBrewery has many options, which you can explore. The two main things to point out are:

  • Resize’ will allow you to reduce the pixel dimen­sions of you video. If you’ve impor­ted from Keynote, these dimen­sions will be too large, so here is where you can reduce it to 728 x 90 pixels.

  • The ‘GIF prop­er­ties’ pop-up allows you to tweak the frame-rate (and there­fore over­all speed) of the GIF. You will also find options for redu­cing the num­bers of col­ours. Remember that the webpage host­ing your advert needs the GIF to have a very small file size. In the case of kboards.com, this is less than 60K.

GFBrewery

Wrapping Up

Here is the fin­ished GIF:

2013 05 20 22 24 09 SB

I hope that’s help­ful. It took me a couple of nights of pokery, not to men­tion jig­gery, to real­ise that I could use Keynote to pro­duce a movie file, and then a good piece of soft­ware to gen­er­ate the GIF.

If you want to use my files as a head start, here they are:

The GFBrewery set­tings file

The Keynote present­a­tion file

The Keynote Quicktime export