Technique
65
01
Illustrator CS3 or later
My starting point for a new project is always my sketchbook. Start by sketching some initial ideas, looking at reference material as you go. Once you are happy with it, scan it in and place (File>Place) in a new Illustrator document that measures 700x700px. Rename this layer to stay organised, and lock it.
Isometric vector art made easy Aaron Miller demonstrates how to take the pain out of pixel art With today’s nostalgia for all things retro, pixels are making a comeback. The German illustration trio eBoy has single-handedly carved a new medium pixel by pixel, and has produced work for some of the world’s biggest brands. Isometric graphics have since become popular with a lot of artists and designers. In this tutorial I will show you some techniques for producing a vector artwork using geometric shapes and some in-depth features of Illustrator. The techniques aren’t particularly hard but, when combined with characters, they bring a new dimension to flat imagery. I’ll also show you a few quick techniques for adding finishing touches to the artwork. You will find some helpful images included on the CD to get you started, including my sketches and some additional elements.
Aaron Miller University College Falmouth graduate Aaron is a freelance illustrator based in Cheltenham who specialises in editorial and character-based illustration. See more of his work at www.aaronmiller illustration.com
On the disc The files relating to this tutorial can be located in DiscContents\ Resources\Pixel
www.computerarts.co.uk
02
Right, let’s begin with the face. On a new layer, create a new Ellipse (L), holding Shift to make a perfect circle. Then, using the Selection tool (V), duplicate the circle by holding Alt/Opt then clicking and dragging. Overlap them and select them both, hold Alt/Opt and click on the second icon, ‘Subtract From Shape Area’, in the Pathfinder palette (Window>Pathfinder).
03
For the mouth, create a semi circle in the colour #E76EA9. After that, create a rectangle and fill it with white. Duplicate this shape, select them both and open the Align window (Window> Align). Click on the ‘Vertical Align Center’ icon. Group these two shapes (Ctrl/ Cmd+G) then select both the teeth and mouth and click the ‘Horizontal Align Center’ icon in the Align window, then the ‘Vertical Align Top’ icon.
Time needed 1-2 hours Skills Using the Pathfinder palette Using clipping masks Using Illustrator’s 3D effects Using Illustrator’s Blur effects
04
For the tongue, create a new ellipse and fill with the colour #CE2A6A. Copy the light pink semi circle we just created in the previous step and Paste in Front of the tongue. Use the ‘Horizontal Align Center’ if your two shapes aren’t in the right place. Then select both, Right/Ctrl-click and select ‘Create Clipping Mask’.
05
Duplicate the eye, then align these two (as with the teeth) and move into place. I’ve also added some cheeks here. Now for the house: create a rectangle, then go to Effect>3D>Extrude & Bevel and enter the following settings: -18, -26, +8, no perspective. For Extrude Depth type 210pt, and press OK.
Computer Arts March 2010
66
06
Make a long rectangle, copy it and ‘Paste in Back’ (Ctrl/Cmd+B). Then, using the arrow keys, move this below the original to form a smaller rectangle (dark blue #2E3050). Group them and repeat the 3D effect but change Extrude Depth to 185pt. Then duplicate.
07
Now copy and paste all three shapes and go to Object>Expand Appearance. It’s always a good idea to keep original shapes with the effects, as expanding them makes them solid shapes without any effects. Now we have our basic house, let’s assemble it.
08
Next we need a roof. Create a 25x25px square using the Rectangle tool (M). Then, using the Line Segment tool (\), click in the centre of the square and, while holding Alt/ Opt+Shift, drag it to the corners to create a perfect 45-degree angle that divides the square from corner to corner.
Ungrouping 3D objects You will find that 3D objects that have been expanded are grouped in multiple groups. To split the group up, hold Ctrl/Cmd+Shift+G. Repeat this a few times to ungroup it completely.
09
Select everything and use the Divide function from the Pathfinder palette, remembering to hold Alt/Opt to expand the shape. Then Ungroup and rotate the shape, holding Shift. Make sure the roof is the same width as the original rectangle we made for the house. Apply the same 3D settings as to the house shape, then expand the appearance, remembering to keep a copy of the original to the side of the artboard just in case.
10
For the chimney, I use a longer rectangle, copy part of the roof to get the same angle and then click ‘Subtract From Shape Area’. Applying the 3D settings w ith a depth of 100pt, I resize it and add it to the illustration.
VisualguiCde V to
In pic tures: a ork o f the career and w ri ters e w iqu chn r Te ou
Aaron Miller The illustrator selects five favourite recent works
Computer Arts March 2010
Ammo magazine illustration – August 2009
My contribution to the first issue of Ammo magazine, which features some truly talented illustrators and designers.
Ph7labs collaboration – October 2009 A collaborative piece between myself and Ph7labs, exploring texture and depth.
www.computerarts.co.uk
Technique Isometric vector art made easy
67
11
It’s starting to come together, so I create some bricks and start to add details to the house. I’ve added a window and a door, along with some other elements. To get the perspective on the windows, create them as usual in 2D, and then add the 3D settings and select 0pt for Extrude Depth. I’ve included some swatches on the CD so you can see my colour palette.
12
“Hey Aaron! What about the face we made at the beginning of this tutorial?” I hear you shout. Good point – the face. Once you are happy with the look of it, copy and paste a new version then select it all and drag it into the Symbols palette (Window>Symbols). Select ‘Graphic’.
13
Remember I told you to make copies earlier on? Well, select your copy of the house, the one with the 3D settings applied to it. Click on ‘Map Art’ t hen select your character’s face from the drop-down symbol list. Position the face, click OK, then set Extrude to 0 pt. Then expand this new shape. Ungroup it and delete the unwanted bits. You should be left with just t he face, so drag this onto your artwork.
16 15 14
Keep adding more details, such as tiles. I used the Pen tool to create a rough tile shape. Select this then hold Alt/ Opt and drag to create a copy. Hit Ctrl/Cmd+D (Object> Transform>Transform Again), and keep pressing it until you have a line of tiles, then select them and repeat the process. As we did with the face, make the tiles a symbol, and add them to the roof, making sure you select Map Art and then the fifth surface.
Christmas 2009 promo – December 2009 A promotional piece that I sent out to companies, design agencies and other illustrators as a Christmas card.
www.computerarts.co.uk
Now let’s add a background and give the house some ground to stand on. I drew a rectangle and added a gradient with the colours #29ABD1 and #C5E09A. Then draw a larger ellipse, overlap it and applied a blur (Effect>Blur>Gaussian Blur). For Radius, put a value of 50 pixels. Experiment with different opacities until you are happy with the final result.
‘Alphabit’ – December 2009 My contribution to a collaborative project set up by Julian James, for which 26 artists created one letter of the alphabet each for a large poster. All profits went to Children In Need.
You are nearly complete – this is when you can let your creativity show and add any more elements you wish, such as clouds, a sun, trees or plants. Don’t forget to put a drop shadow underneath your house character. On the disc, I’ve included an Illustrator file with some extra elements too!
‘ThisPlace09’ – December 2009 A booklet put together for the UN Copenhagen Summit, in conjunction with Twitter. It included responses to the question: “What’s worth saving in #thisplace?” The idea was to highlight the immediate impact of climate change, based on individual tweets.
Computer Arts March 2010
