July 6, 2013

I am always reading articles and posts on the processes artists and designers use to create their work but I never really share my own approach so here is a bit about my process and some of the specific tools and techniques I used in creating this website.

Graphics

I wanted to the site to be mostly be illustrated and I had a vague idea of the shape of the front page design and some of the elements in the drawing. I wanted to create an image of the trail but without having been there yet, I didn’t want it to be too specific.

I usually draw using a .7 green mechanical pencil and then sometimes create more detail with a thinner red .5 mechanical pencil, and then ink it with a brush and Higgins Black India Ink. I also used some pens and markers for this drawing.

drawing

I wanted to represent some of the landscape — the rocks and the route, the plants — including devil’s club, ferns, alpine fir, blueberries, and some methods of transportation including cruise ships in Skagway and the White Pass Railway to Bennett. I used a bunch of reference photos I found online of Skagway, devil’s club, and the trail.

banner

I also wanted to represent some of the things I am researching and some of the underlying currents of the trail — those who died on it (including many people and many more pack animals during the gold rush era), those that rebuilt it in the 60s and 70s (prisoners of Alaska and the Yukon), and its long history as a Tliglit and Tagish trade route from the coast to the interior.

boots&feathers

After I finished inking the drawing, I scanned it using a black and white setting, so the coloured pencil would not show up. I then cleaned it up a bit in Photoshop using the settings Adjustments > Threshold (more on how to clean up drawings and how to scan line drawings in Jessica Abel and Matt Madden’s excellent book and website: Drawing Words, Writing Pictures).

The first version of the drawing was in black and white.

front-image

But then I decided to use a lichen green colour inspired by some photos I found from the alpine part of the trail.

footer

Image sprites

I then used the drawing to create the front page menu and the inside page menus by using a technique called image sprites which allows you to put a collection of images into a single image and create hover effects. This reduces the time it takes for images to load on a webpage. I can never really remember how it works exactly and always get it wrong at first, but basically you copy the image right below the original image, change the colours or the image to the effect you want when the website user hovers over the menu link. Then you save it as one image at the size it will show up on the webpage. You then need to do a number of measurements and plug them into your CSS (Cascading Style Sheets) and create a basic list in HTML on your webpage. This page on creating CSS Image Sprites can explain the technique way better than me.

Image Sprite

Responsive/adaptive web design

For the past year or so I have been working at creating sites using responsive design or adaptive design which just means that you create a site that is easy to view and use on different devices. Most designers use scalable logos and fonts that can be adapted to different screen sizes. It is a bit tricker when your site and menus are all based on illustrations since the illustrations may look good on a large computer but not so good on a mobile phone. I ended up creating five different menus, including a mobile menu.

mobile-menu

Some other tech stuff

I am using WordPress Multisite for my various (unfinished) sites, which allows you to create a number of different sites from one installation of WordPress. Although I have developed a few WordPress themes from scratch, recently I have been using the WP Skeleton Theme because it is very clean and easy to use and I am still getting my head around responsive design.