Creating a handrawn website design

I’ve recently started to take a more organic approach to site design - I was getting hacked off with the ‘clean’ or ‘3D’ look that web2.0 seems to be wallowing in. Previously connection speeds have been an issue but with browser and IP technology improvements this isn’t so relevant.

I tend to do basic layouts in Illustrator then ship it into Photoshop for refinement - not strictly necessary but it works for me. Then I get stuck in with my tablet using various airbrushes and paint-style brushes making sure to keep every element in layers and groups so any of your many inevitable mistakes (if you work like me) can be erased easily.

I usually make a ’short page’ as below.

This contains all the artwork for the header, mid-page section and footer. This will then get ’sliced’ in photoshop into the 3 sections and placed into the page design (I usually use a 10 pixel slice for the middle repeated section - this seems to be a fair compromise between loading speed and rendering speed for individual computers).

If gradual gradients are avoided and a more ‘paint’ or ‘pencil’ feel is achieved then a higher level of compression can be used without much visual loss enabling file sizes to be kept down.

2 Comments

  1. Posted January 13, 2009 at 10:38 pm | Permalink

    I love this post!

    Even when doing art for printing, I like to start with a sketch, scan that, print it, improve it, scan it, print it again on watercolor paper, paint it, scan it again and enhance the color, size it, add signature, copyright and other text, and finally print it for distribution.

    I consider my scanner to be an art tool.

    Though I have used Photoshop for montages, I generally use GraphicConverter for everything.

    I haven’t used the hand-draw-scan-paint-scan process much for on-line work. I generally just create headers in GraphicConverter, though I have used pieces of some of my paintings for headers and things.

    Now I need to do some research on chopping graphics files for fast loading.

    And maybe I need to go back and spend time learning to do original graphics with a tablet. Hmmm.

    Your site is so beautiful! Thanks for the info and for the inspiration.

  2. penfold
    Posted April 20, 2010 at 4:18 pm | Permalink

    Thanks Kathleen - I’m glad I could help. I’ve been a bit slack in posting here for a while - and answering comments. I’ll try harder…

Post a Comment

Your email is never shared. Required fields are marked *

*
*