Stuff & Nonsense product and website design

Kerfuffle on the Planet of the Apes (part 1)

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to celebrate by updating another of my responsive easter egg headers—Kerfuffle on the Planet of the Apes—with more efficient, modern code. I’ll explain how I did it, starting with the new optimised SVG images.

When Josh Cleland illustrated my original homage to Conquest of the Planet of the Apes, he gave me PNG images, which I delivered in 1x and 2x sizes for the (then) relatively new retina displays. The file size of those high-resolution images was pretty considerable, so my first challenge for this update was to redraw each of Josh’s apes for output as SVG.

Redrawn ape characters

When optimising SVG illustrations today, I split the task into two parts: making outlines with as few path points as possible and blocking in with solid colours. So, I manually traced each ape’s outlines with the pen tool, keeping the number of points to a minimum. Then, with the width of each stroke set, I blocked out between the lines with solid colours and then combined blocks of the same colour into a single path. This keeps the size of the final SVG as low as possible.

Redrawn ape characters

Josh’s original background image didn’t suit my new design, so I decided to discard it and create an entirely new version. I based my new background on stills of Century City, the filming location for Conquest of the Planet of the Apes.

New Century City background

As I knew this more complex background would be delivered as an SVG, I kept the shapes primitive, the colours flat, and used only one gradient for the sky behind the city.

Century City background plate

Some elements in the background images of the Kerfuffle on the Planet of the Apes are animated. I exported them as separate SVGs and recombined them in code to make animating them easier. I’ll explain why that matters in part three.

SVG layers for animation

Redrawing Josh’s apes and designing a new background was fairly time-consuming but not technically challenging. I’m pleased with how close this new, more optimised version turned out to Josh’s original artwork.

Kerfuffle on the Planet of the Apes

Far more challenging was implementing the new, simpler layout and CSS I had in mind. But more about that next time.

Written by Andy Clarke who tagged this with svg

Would you like advice and inspiration on making better designs for the web?

Every two weeks you’ll get design inspiration and insights on how to improve your design. View some recent emails, sign up today, and get:

    I promise never to share your email and you can unsubscribe with just one click.

    Get a free set of Layout Love grid templates if you sign up today.

    Hire me. I’m available for coaching and to work on design projects.