Design Shard Now has a Flickr group Join Here to show off your inspirations and work
New Site: Texture Lovers - Free Textures - Inspiration and Tutorials

Technique for creating a hand drawn website style

Author: David Perel
Website: http://www.twitter.com/obox
David Perel is the founder of South African web design company 'OBOX-Design'. He is also a co-host of the Web 2.0 Show 'From the Couch' and designer/author of the blog 'We Are not Freelancers'. David enjoys giving his opinion on anything happening on the web and is often not shy of speaking his mind online.
@designshard

We first got into the blogging world with our website blog “We Are not Freelancers“. The site is a combo of the “Ten Pixel Method” and hand drawn characters and letters.

hand drawn font

A lot of people who we have met say they wish they could create something similar but will not because they can’t draw.

We say anyone can draw if you use a simple technique.

David gives you a quick lesson on how to create a hand drawn website using the ‘don’t lift the pencil‘ technique.

Hand drawn technique video tip

Brought to you by: From-The-Couch

Supporting Elements

There are also few more hand drawn elements within the footer and header design.

hand drawn elements

Related Articles

14 Comments

  1. Posted January 7, 2009 |Permalink

    Thanks for this! You’ve inspired me to dust off my Wacom and get to drawing. It makes line art a whole lot easier!

    Zach Dunn´s latest blog post..22 Well Done State Tourism Websites

  2. Posted January 8, 2009 |Permalink

    I nice insight into another way of creating graphics for a web site. I am not a big fan of their type of drawing but, it does move away from what everyone else is doing. I’ll try to implement the technique into one of my future projects.

    Godserv´s latest blog post..Time Is Almost Up

  3. Srikanth.Kavuri
    Posted January 8, 2009 |Permalink

    Hi, I am a 3d artist.This tutorial on line drawing was really great,
    a good start up to become an artist, it helped me to start drawing, I need a perspective drawing i hope i can get a video on this.
    Thank u
    How to download this video ?

  4. Posted January 10, 2009 |Permalink

    Thank you so much! It’s great to see something simple and different.

  5. Posted January 11, 2009 |Permalink

    @Zach - Great stuff. I hope you come up with something awesome!

    @Srikanth - Glad you liked it!

    @Nic - Pleasure ;)

  6. Posted January 15, 2009 |Permalink

    I always wanted to create a website with a handrawn vibe.
    the designs looks very natural and very unique. great post!
    thanks for sharing this one out.

  7. Posted January 26, 2009 |Permalink

    I love this look on a website. It gives it more of a personable look and feel.

  8. Posted February 25, 2009 |Permalink

    It worked for me and it gives a familiar look.

    thinkflick´s latest blog post..Best Web 2.0 Graphics Generators

  9. Posted March 2, 2009 |Permalink

    Dunno why, but I have always imagined that hand drawing is something hard to do. Well, it doesnt look that way no more. Thanks for a nice tutorial ;]

  10. Posted March 5, 2009 |Permalink

    Hi,

    Very useful tips. I am learning web designing and graphics designing. I will help us. Thanks

    certblog´s latest blog post..Become a Successful Professional with MySQL Certification

  11. Posted April 1, 2009 |Permalink

    Hand drawings are everywhere and they look great on websites. Using hand drawn design elements gives a website a unique look and personality. Nice list you have here!

  12. Posted June 9, 2009 |Permalink

    The hand drawn style has been very popular lately, and rightfully so - it can look awesome. The real matter will be to see how it stands the test of time. Is this going to be a phase, or will this trend hold its own? Only time will tell…

    Either way, nice post!

    Shay Howe´s latest blog post..Japanese Web Design

  13. nestleomega
    Posted June 22, 2009 |Permalink

    the video loads like snail…possible for a download link?

  14. Posted July 2, 2009 |Permalink

    Nice tutorial

    We did a similar thing for a free Wordpress template - it’s up on the Wordpress theme directory - http://wordpress.org/extend/themes/scribblings

    The font used is Pointy - love this font - gives it that scruffy “drawn with a biro” type look

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*
Psd to Xhtml & Css

Print Sponsors


  • Discount printing company, printing service in australia

Comments