01. Sketching lettering by hand

The distinctive animated lettering on engzell.me begins hand drawn on pen and paper. When doing this you need to take into consideration the overall ‘slogan’ for each of the lettering, the overall feeling for the work, plus the eventual background image when sketching. This all helps the lettering to complement the design as effectively as possible. You’ll also want a varied selection of cool marker pens!

02. Vectorise the sketches

With your sketches produced, the next phase is in capturing and digitising them for processing. At this point it’s a matter of spending adequate time vectorising the sketches in an application such as Illustrator. The effort you put in here will help you get a more perfect result, using as few points as possible to get a smooth and clean graphic for importing into After Effects later on.

03. Animate the letterings

We explored hundreds of options and probably around ten revisions for each animation once decided on the overall flow. Each animation sequence is therefore totally unique and realised at this stage using expressions within After Effects. This is a particularly useful tool for prototyping UI animations, given that the expression language is based on JavaScript that will eventually power the final animation within the browser.

04. Export the animations

Once satisfied with the animation sequences you need to optimise the animation and export it as a PNG sequence so it can be implemented via code. It’s very important to keep the file sizes low here and lightweight in order to provide a great user experience across browsers, devices and platforms. This PNG sequence will then be stitched together to form a sprite or sprite sheet.

05. Implement the sprite

Once your animation is exported into a PNG sequence, you have to combine those files into one sprite image. You can find online tools for assisting here such as SpritePad (wearekiss.com/spritepad) or Stitches (draeton.github.io/stitches) for HTML5 and CSS, or simply combine them manually in PhotoShop. In the case of engzell.me, a PHP script was written to generate the required sprites.

06. Power on the page

With the sprite readied, you’ll need an HTML/CSS container sized to fit your animation and with your sprite set as a background. Then write a JS function that shifts the background-position property of your container, moving it from one frame of the sprite to the next from the time called. A setInterval() method is used here to call the function at the right interval, so for example 40ms for a 25FPS animation. Don’t forget to stop or loop animation once it’s over!