A bespoke WordPress theme integrated with Bootstrap and Greensock:

Making an illustrated website: archibaldbutler.com. I really enjoyed creating this web project.


technologies used






making an illustrated website: archibaldbutler.com, a making of from the illustrator Archibald Butler


1

Making an illustrated website.



A lot of heart went into this project!

I must say I do absolutely love the homepage I created for this website. I drew the illustrations whilst I was travelling and backpacking around the world with my beloved surfboard Betty looking for amazing waves to surf.


Some of the illustrations were done in Brazil, some of them were done in Mexico and some of them were done in California. I cut up the design and integrated it into code using Greensock whilst I was staying with friends in California.


technologies used




making an illustrated website


2

the code



About this project

Live date:

It actually went live in Cali! I got some great positive feedback from my friends on Facebook which was really encouraging. This is why you will find on my portfolio page some other similar illustrations.

Illustrating it:

The illustrations themselves were started with pencil, then inked, then I erased the pencil marks and proceeded to paint the elements individually with watercolours. I then did a bit more inking and added some subtle crayon effects to make some of the textures pop.




making an illustrated website




3

Conclusion



Illustration and code

I put together my composition in Photoshop and proceeded to overlay all the different elements in layers and start to think about the animations I was going to include.

Then came the final task of coding. Creating the elements in HTML adding the background and the positioning of elements in CSS using the box model.

Finally, adding the animations in JavaScript using Greenstock. Originally the site was static because I had heard the SEO was good on static websites so I wanted to try it out.

After that plan of action failed I then converted the whole static website into a custom WordPress theme. I have also added some internal page templates in PHP to display other work.

I hope you enjoyed reading about making an illustrated website as much as I did creating it.