66

Technique

Illustrator CS3 or later

Stamp your style on a surface by covering it with your own connecting motifs, writes Sam Brade
How do you fill a space with interlocking motifs, each one occupying its own little piece of the jigsaw puzzle? In this tutorial Ill demonstrate how to rough out and plan your artwork before transferring it into Illustrator using the most important feature for creating vector graphics, the Pen tool. Using the information provided in this tutorial, you will be able to have a shot at designing and filling a plane with your own interlocking motifs. Be warned: this activity is extremely absorbing and a total labour of love, which can become surprisingly addictive.

Create interlocking motifs

Sam Brade Managing director and all round vector magician at Fat Punk Studio, London, you can find out more about Sam and his studio by visiting www.fatpunk studio.com

Time needed 16 hours+ Skills  Composition  Using the Pen tool  Using the Direct Selection tool

Computer Arts May 2010

www.computerarts.co.uk

ART174.tut_illus 66

18/3/10 4:10:15 pm

67

01

Start by roughing out your artwork on paper. This will enable you to layout the position of your motifs before moving on to vectors. Bear in mind that this is something you cant plan it must develop as you go along. It is critical at this stage to be patient, as this part of the process can be terribly time consuming. I started with the horse at the bottom left.

02

As you design, you will need to jump back and forth creating several motifs at the same time. Each time you draw a line you must remember that you are not only drawing that motif but also the motif that resides next to it.

Think about separating out the motifs by using two distinct shades or colours. Remember you cant have a black character next to another black one or a white character that butts up against another white one. At this stage I just indicate black and white motifs with a small B or W.

03

04

The first three stages of the design process are paramount in creating a successful and balanced final piece. You should now have a very rough layout of where all your motifs will fit within the confines of their invisible rectangular border

To make life easier and to really finalise the position and overall character of each motif, I decide to create a more accurate final drawing. This drawing can then be used as an accurate guide in Illustrator, so you can get motoring with laying down some killer vectors. Scan the drawing.

05

www.computerarts.co.uk

Computer Arts May 2010

ART174.tut_illus 67

18/3/10 4:10:23 pm

68

08
Open a new Illustrator document and place the scan from Step 5 onto the first layer. Label it Guide then lock that layer off so you dont move it by accident further down the line.

06

Be sure to use the simple tools you get with Illustrator. For this project it is key that the artwork fits perfectly against your invisible border. Go to View>Show Rulers. Pull out guides to create an accurate border that you can then work to.

07

From now on, patience is crucial. Take your time and dont rush the vector process. Create a new layer above the Guide layer and label it Outline. With the Pen tool, draw a main key line around your first motif (a 2-4pt stroke size should be enough).

Create a new layer above Outline and label it Details. Lock your Outline layer off for now, although you may need to adjust it as you start to add detailing. Using the Pen tool, start to gradually bring your motifs to life by adding detail. The most important thing here is to give each motif its own unique character, so have fun and change things you didnt like on your initial drawing.

09

10

As we discussed earlier, we need to separate out each motif with shades or colours. I have decided to go with a dark grey and cream palette, but the choice is yours. Add another layer below Outline called Fill, then block out that motif with its main fill colour. Start to build up some shadows and highlights that will add weight and solidity to your motifs.

CV Visualgu ide to

In pictures: a rk of the career and wo iters our Technique wr

Fat Punk Studio

Sam Brade selects a handful of his favourite recent projects

Fat Punk Studio canvas art August 2009 Our art has been making a statement on the walls of customers homes and businesses across the globe, with design studios in both Australia and California all recently picking up some of our vector creations.

Fat Punk Studio clothing September 2009 This year we have been busy rolling out our first range of kick-ass designer T-shirts.

Computer Arts May 2010

www.computerarts.co.uk

ART174.tut_illus 68

18/3/10 4:10:27 pm

Technique Create interlocking motifs

69

11

Giving unique elements to your characters will add interest. Its these little details that keep your piece interesting even on repeat viewings. Its often a nice touch to add elements that perhaps tie in with your branding or other work.

Collating your shapes

Filling a rectangular plane with interlocking motifs is something you cant really plan. You have to conjure the motifs as you go, so once you start its purely a matter of jumping back and forth drawing several motifs at the same time.

Using the principals outlined in Steps 7 to 10, begin to work up each character to its final state. Feel free to jump around and work on the motifs that take your fancy, otherwise it can feel like a daunting mission working progressively from one side of the artwork to the other. Just remember to use your different layers for each stage of the process.

12

13

Use the Direct Selection tool to pull points around and alter the handles on your curves to get each line just where you want it. Accuracy is key, so work in close and make sure each element is spot on. You may get away with some inaccuracies on screen, but remember they will show up in your work when its printed large!

15 14
Sit back and take a look at your final creation. Make sure your shades and colours are harmonious and that each motif can be clearly identified in the piece. If youre not happy with the colour palette, use the Magic Wand tool to select the desired colour, and change it accordingly.

You can now delete your Guide layer. After all your hard work, be sure to go through the artwork and check for any mistakes or lines out of place (the Direct Selection tool is handy for this part). Once youre happy, select all the layers, go to Object>Group then Object>Expand to expand your artwork. You now have a stunning, fully scaleable piece of vector art you can use on a wide variety of cool applications.

Ride Fleetwood snowboards December 2009 We collaborated with Ride Snowboards on the new custom-designed Fleetwood board series.

Fat Punk Studio sunglasses January 2010 Old-school one-piece construction from hand-made acetate, teamed with our killer custom graphics.

Fat Punk Studio/X Customs collaboration February 2010 We are proud to be collaborating with the mighty X Customs of Australia on this custom graphics project.

www.computerarts.co.uk

Computer Arts May 2010

ART174.tut_illus 69

18/3/10 4:10:32 pm