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