I needed a spiffy new graphic for my website that would more accurately communicate what the site was about and the kind of work I do. After some mind mapping, word association and long walks through the grocery store I settled on the phrase “Facts into figures” which inspired me to go in a fun direction using hand lettering and doodle illustrations. I wanted the final piece to be colorful but simple enough to carry the message effectively.
Later that day I sat down with my sketch pad, divided a page into several sections, and sketched out concept ideas and layouts related to the theme. My goal was to get the ideas out of my head and onto paper. I was not aiming for any kind of perfection. I then took these sketches to my drawing table and refined the pencil drawing.
Then I refined it further on another piece of paper, tweaking the letter spacing and adjusting the illustrations in ink using micron pens size 03, 05, and 08 as well as a brush pen. I did this for two reasons. I needed the drawing to be dark enough to easily scan in and manipulate, and I wanted to take another pass at my idea and make adjustments before digitizing it.
A lot of people head straight to the computer, but I was going for a more organic, hand-drawn look.Once I scanned the photo of the drawing into Photoshop I color corrected it and cleaned it up further, removing specs and cleaning up some lines further.
After reviewing the size requirements for my website header, I needed to adjust the layout of the drawing so it would work well in the final dimensions. I separated different parts of the drawing into separate layers and labeled them.
Next I began to colorize the illustrations and text. I wanted a simple but fun color palette. I had picked a dark background from some photos I had taken. The text and illustrations needed to be light enough to stand out. I choose a palette of purple, yellow, white, gray, and a reddish orange. The purple was to add a little mystery and carnival feel. The yellow represented the electricity and science elements along with accents of green. The red originally was mainly for the “Figures” text but I decided after some color testing to only use it for the rocket and the “100%” and wand accent.
As I added colors and made a few more tweaks to placement of different objects, I grouped them in the Photoshop document so I could more easily adjust them and move them around. I added in more lightning bolts and tweaked the cloud and rocket illustrations. I copied the first banner and added a smaller one on the right to balance the header out.