Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Web templates with hand-drawn, sketchy graphics

The marriage of traditional and digital graphics is a fun and ever-evolving experiment. On one hand, hand-drawn sketches have an intrinsically poignant and unique quality, making it irreplaceable. On the other, digital software is great at mimicking hand-created effects, bringing a whole new look to the traditional approach. This tutorial will show you how to design a template that seamlessly blends the best of both worlds.

The end result is a flowing aesthetic that begs the user to figure out which parts are hand-drawn and which computer-generated. As you try it out, you’ll soon discover this process is not only amazingly fun and useful, but the possibilities are endless. An ordinary sketch or doodle has the potential to become a functional element in a website, while computer-generated graphics add further visual prowess to improve the overall look.

(This tutorial originally appeared in Web Designer issue 156, authored by Wendy Ding)

The tutorial files for this article can be downloaded here

01 Inspiration

step1

A great starting point for this tutorial is the sketchbook. Every creative person should carry one and sketch ideas whenever they come to you. Abstract flowing lines, fun colours, odd juxtapositions and unexpected patterns are all worth noting down as creative reference. We will be using them to implement a similar treatment and styles into our sketchy web template.

02 Colour palette

step2

The magic of a sketch or doodle is its uncontained quality because it is a visceral expression of emotions and thoughts on paper. The colour palette should subsequently reflect that immediacy, and for this purpose solid graphic colours work well. As a second and complementary element, quiet pastel hues are great for adding softness.

03 Rough sketch

step3

Using natural sketching techniques, instinctively begin rough sketching some concepts across the paper and formulate up with a base drawing. The idea is to get a feel for the elements needed in the finished product: flowing decorative shapes and lines that form together to make a header. For now, we’ll use a regular blue ink pen for a quick brainstorm.

04 Header graphic

step4

Take the inspirations from the prior sketch and start reworking it for the header using coloured pencils and ballpoint pens. The same treatment and styles are applied with straight and curvy shapes, graphic colours, and a playful sensibility. To achieve variety, mix solid colours with stripy and lined patterns over a large area.

05 Sketching techniques

step5

A popular sketching technique is hatching, which is the consecutive dragging motion of a line in the same direction to add shadows and value. Here we’ll add some colour, introducing ink and pencil for areas of lines and shapes. Another variation is simply filling a large area with a solid colour, such as the pink area for the header text.

06 Abstract and whimsical

step6

The nature of a sketch is very uncontrived, but it doesn’t mean it has to be basic. Dress up sketches in fun lines and shapes to give it a ‘special’ flavour. It can be nice to create shapes that resemble clouds, waves and flowers to make it dreamlike and playful. This way, it looks beautiful and still evokes semi-recognisable shapes, making it abstract yet whimsical at the same time.

07 Footer graphic

step7

As the user scrolls to the bottom, a sketchy footer graphic greets them. This graphic should have the same sketchy and colourful vibe while being physically smaller in size to function as a genuine footer. Some elements intertwine and extend upward into the main section to accentuate the overall flowing and hand-drawn aesthetic. This gives real cohesiveness to the page.

08 White balance

step8

Once happy, scan the sketches into Photoshop and adjust the white balance with Image>Adjustments> Levels (Cmd/Ctrl+L). Next select the White Point Eyedropper tool and click on any areas you wish to turn white. These areas are usually smudgy grey resulting from not placing the document entirely flat during scanning – or any subtle imperfections on the paper.

09 Colour theory

Yellow is a particularly loud colour and attracts the eye more than others colours, so use it sparingly. Also, high-contrast areas advance and pull the eye in, while low contrast areas recede and are less tactile. Use this to your advantage when designing high-emphasis areas such as headers and low emphasis areas such as background images.

10 General design tips

step10

By flowing the graphics into the header and downwards, we can form a frame around the main section which pours down into the footer graphics – keeping the construction connected. Even with all the visual flow, the hierarchy still remains because of the design: bolder colours and a higher contrast brings out the header, while softer pastels gives the body a secondary focus.

11 Construction

step11

Now the sketches need to be tweaked to fit as a header and footer. Certain parts can be edited out completely because they don’t fit the design. Next cut and paste certain areas to fit better physically and make it easier on the eyes. Use a combination of the Lasso tool and Illustrator’s Pen tool for making selections, and the Eraser tool for erasing sections.

12 Watercolour

step12

Why not mix hand-drawn and digitally drawn together? One way to create traditional-looking paint marks is the Watercolor Effect in Illustrator. This effect can be achieved by creating two custom brushes: an Art Brush and a Scatter Brush. Then, draw lines with no fill and set the stroke to one of the brushes and see the watercolour effect dash into place!

13 Fonts

step13

Use the fonts Paisley Caps for the header, Complete in Him for the main headers, and Georgia for the body. Non-web standard fonts will need to be graphically rendered so watch out for that. Next hand-write the menu links in Photoshop with a Wacom tablet. With the tablet plugged in, go to Window>Brushes>Shape Dynamics and turn Pen Pressure on.

14 Main content

step14

To remain consistent, each entry has the same format of subject header, sub-category, square image, body of text, further options and separator. The text kerning and spacing between sections is slightly open and airy to maximise legibility and comfort for the eyes. The image has an Outer Glow effect applied for emphasis. To do so, double-click on the pic layer to bring up Layer Style and change the settings under Outer Glow to Multiply, Opacity 60%, Noise 25%, and a hue of #91bae4.

15 Menu links hierarchy

Sketchy aesthetics can be applied not only to drawings but also text, as seen in the menu links. Although it has a simple and light treatment, it still holds hierarchy over the denser main body text due to its sparse spacing and squiggly line quality. This is created by manually writing on the Wacom tablet and adds an interesting combination to the computer-generated text.

16 Sketch elements

step16

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

step17

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

step18

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

step19

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!

×