Hey, hope you like my sparkly Christmas tree card.

The idea for the design all started when I was struggling to find inspiration for my Christmas card design. For the past set of years I’ve always designed my own Christmas card and this year I couldn’t think of what to do until I saw this website advent of code which was from an email by webdesignernews. I just thought the simple tree with animation flashes looked great. I’d used ASCII art before but only in the HTML source code for an old website just for a bit of fun but that was a few years go.

I quite fancied the idea of creating my own ASCII art Christmas tree using a photo of my actual tree, the problem was that I hadn’t put it up yet and I’d still have to assemble it in a different place to take the photo.

A quick Google search found some ASCII art websites that will process a photo. Using one in particular, a quick test showed that a photo of a tree looked too messy.

I decided to quickly draw my own using Illustrator.

I preferred the minimalist concept of a tree anyway.

The first tests were still a bit shabby:

so I ventured onto page two of the Google search (Who views page two nowadays?) and found this website. This seemed to produce better results:

 

The perfectionist inside me wanted to manually redraw the perfect tree but then again I quite liked the fact that an algorithm had created the slight imperfections.

The Card

The website allowed me to copy the HTML code which I could easily paste into Indesign as black and white but I couldn’t recreate the colour. I needed to somehow recreate HTML within InDesign and I didn’t have the time to test. I resorted to saving a pdf within Chrome of the HTML web page created from the code. The characters were a little small so I tested different monospace fonts until I found Adobe’s brilliant ‘Source Code Pro‘, which comes in tons of different weights. I changed the font to bold and this made the colours stand out.

The ‘Merry Christmas’ text on the front page uses the same typeface but I had to manually kern the glyphs to make it more eye-friendly.

The web page

The more I worked on the design for the card, the more I realised that it had to go online, so I put the code onto a simple web page but there were some things missing. It had have sparkly lights! I knew that under normal circumstances I could code this pretty easy but as we were dealing with pre-formatted code where each character had it’s own span with retro inlined styling I knew this wouldn’t be quick.

At just under 1mb, the file seemed very large. Indeed the page loaded in about ten seconds! Waaay too long. Upon inspection I noted that each blank space also had its own span with an RGB styling of white. I did a quick find and replace of:

<span style="color:rgb(255 , 255 , 255);"> </span>

to:

&#32

no-brainer really. It cut the file size in half. I was then able to make the background black and create the shiney sparkly lights using a bit of CSS animation magic.

See my pen Christmas Tree (@danjohnsonwhitstable) on CodePen.

I then added a simple media query for smart phones but as yet this has not been fully tested so at this moment it’s best to view on a desktop.

To finish merging the graphic printed card with the coded element I added a smart link on the back of the card:

tinyurl.com/merry-xmas-from-dan

So there you have it; one sparkly Christmas tree card.

Hope you have a great Christmas and all the very best for 2016!

Dan

Back to the Christmas Tree