You’ve no doubt noticed by now that our company look is a little bit different - utilizing a hand illustrated design style throughout our website and print collateral. Our website homepage changes about every three months to a design that reflects the season or an event. We’ve been asked by many visitors, clients and friends to share not only the past designs, but insight into how we do them. We’ve been asked if the pages are painted, illustrated or just done on the computer - actually, they are a hybrid of all of those techniques.

It can often take months to decide on and implement one of Snapdragon’s seasonal homepage designs. After a number of quick thumbnail sketches to get a clear picture of how the design will look and be laid out on the page, we do a rough digital compilation of sketches, photographic reference images and text to serve as a roadmap for the work to come. This layout is done at a 1:1 proportion with the actual pixel size of the finished web page to ensure that everything works within those constraints.

After making a print of the rough design in the proper perspective we use pencils and ink to hand illustrate the page. The illustration is done somewhat as a comic book panel is - with finished, detailed artwork and large areas yet to be inked the denote dark shadows, colors or gradients. The image above, for example, shows a plain white sky - which will alter be painted black to simulate night.

Now we take the finished illustration and scan it at a very high resolution (usually around 1500 dpi, for those interested). We then use a combination of Adobe Photoshop and Fractal Painter to digitally "paint" the illustration. We use brushes that mimic real world equivalents and often layer the colors on top of each other, just as you would do on a canvas. Often, we leave the sketchy pencil and ink work intact in some way to give the design a rougher look. This process usually takes a few days of work to get right and over time (if you look at our archived homepages) the process has evolved to adopt a more lush and rich look, where as the first year’s designs were more sketch based than full paintings.

Now that the painting is complete we use Photoshop to enhance the "lighting" and color of the work - adding lens flares, shadows, glows and other light sources. Then we add the digitally generated text used for titles, the menu items and other areas and create any of the frames needed for Macromedia Flash animation (which we do from time to time - see the Halloween ’03 design for a prime example).

Finally, we take care of anything that just isn’t working right, or just needs that extra little bit of polish to really make it work. Usually this means doing some additional illustration work, scanning it in, painting it and adding it to the final piece. A good example is the close up effects work on the Halloween ’03 page as seen above, where we went back and added a silhouette standing in an open doorway and a ghoulish face to one of our pumpkins that would only appear when animated. The very last step is to grade the color across the whole design to reflect a single lighting source and hue and optimize the image in resolution and quality for use on the web. The design is then cut up into pieces, saved as JPG, GIF and SWF files, coded in DHTML and voila, the latest Snapdragon homepage begins it’s three month lifespan.