Web templates with hand-drawn, sketchy graphics
16 Sketch elements
16 Sketch elements
Various sketchy samples can be created as potential highlighters and separators in the main section of the template. Since text is the highlighted component, these sketchy samples should be kept narrow and horizontal. The key is to maintain the colourful and fun look while still making the text pop. Be mindful of how a chunk of text will look once paired with a block of sketchy sample.
17 Alignment
Now that the template is coming together, it needs some polishing to be complete. Turn on rulers in Photoshop and drag out some horizontal and vertical guides. Align the top of subject headers with the top of the menu, and the left sides of images and text bodies. Use the Cmd/Ctrl+; shortcut to turn the visual guides on and off.
18 Overview
Now the hand-drawn and sketchy template is complete! Review every aspect with a careful eye: is the header too distracting? Does the text come through against the barrage of textures? Perhaps the most important question is: can you tell which parts are actually hand-drawn and which are computer generated? If it’s hard to tell, then you’ve done a superb job in attaining the sketchy look!
19 Sketchy art resources
Sketchy art and hand-made type have enjoyed a mainstream rise in recent years. Some are quite visionary and a great source of inspiration. We particularly admire the artist Michael Perry, who has a vast repertoire of fun and quirky hand-drawn logos, type and illustrations. Check out his work to see the best of the best in the genre and expand your own creative horizons!
The tutorial files for this article can be downloaded here
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
It is wonderful to see real life art used in the digital realm, especially being used to “house” information on a site, I found this article extremely inspiring, I think anything is possible and it’s great how seeing articles like this can urge you to take new steps of direction and not to be so tunnel visioned with design techniques.
Lovely stuff!!
What a really inspiring post, it is great to see an illustrative style coming through into websites. The rough nature of the design adds an almost friendly feel to the site. It is very interesting to see how digital and illustrative design can complement each other when used in the correct manner. Well done.
I am building my website, which is online art gallery and I want some pages to be a hand written versions.
I am not a specialst but I have an idea now. Thanks to you,
Sophie
Hi i am a graphics designer, i would wish to suggest please add some video tutorials as i am offering in facebook community,
add me xameenx@yahoo.com
thanks
Nice hand-drawn templates wish i can do that also… :)
Very nice drawing for templates .
hi
I have a website,Know About Michael Madhusudan Dutta .
After reading this post, I really think I need to learn how to make doodle art to fit it as one of my blog’s background. An awesomely inspiring post! Cheers! – KG.