How to Create a Set of Wall-E Inspired Avatar Icons in Adobe Illustrator

In today’s tutorial we’re going to take a trip down memory lane and create some of the most iconic Pixar characters in the form of some cute little icons.

We’re going to be doing all that using Illustrator’s most basic shapes and tools such as the Rectangle Tool and the Ellipse Tool, and some more advanced ones such as the Pathfinder panel and the Offset Path Tool.

You can always expand the set by heading over to Envato Market, where you'll find tons of beautifully crafted icon packs at the press of a button.

So without wasting any more time, let’s get started!

1. Set Up a New Document

Presuming you already have Illustrator up and running, let’s create a New Document (File > Newor Control-N), setting it up using the following settings:

• Number of Artboards: 1
• Width: 800 px
• Height: 600 px
• Units: Pixels

And from the Advanced tab:

• Color Mode: RGB
• Raster Effects: Screen (72 ppi)
• Align New Objects to Pixel Grid: checked

2. Set Up a Custom Grid

Since Illustrator lets us take advantage of its powerful Grid, we will want to set it up using the lowest possible values, so that we can have full control over our shapes by making sure they are perfectly snapped to the underlying Pixel Grid.

Step 1

The settings that we’re interested in can be found under the Edit> Preferences > Guides & Grid submenu, and should be adjusted as follows:

• Gridline every: 1 px
• Subdivisions: 1

Quick tip: you can learn more about grids by reading this in-depth piece on how Illustrator’s Grid System works.

Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode.

Now, since we’re aiming to create the icons using a pixel-perfect workflow, I highly recommend you go through my how to create pixel-perfect artwork tutorial, which will help you widen your technical skills and get you up to warp speed in no time.

3. Set Up the Layers

Once we have our document, we can engage in layering our project, which will help us maintain a steady workflow by focusing on one icon at a time.

So, using the Layers panel, create a total of five layers, which we will rename as follows:

• layer 1 > reference grids
• layer 2 > common background
• layer 3 > eve
• layer 4 > wall-e
• layer 5 > m-o

4. Create the Reference Grids

The Reference Grids (or Base Grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make, once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 128 x 128 px, which is a fairly large one.

Step 1

Assuming you’ve locked all the other layers except for the reference grids one, grab the Rectangle Tool (M) and create a 128 x 128 px red (#FF6B57) square, which will help define the overall size of our icons.

Step 2

Add another smaller 120 x 120 px one (#FFFFFF) which will act as our active drawing area, thus giving us an all-around 6 px padding.

Step 3

Group the two squares together using the Control-G keyboard shortcut, and then create two copies at a distance of 40 px from one another, making sure to align them to the center of the Artboard. Then lock the current layer so that we can move on to the background one.

5. Create the Common Background

Make sure you’re on the right layer, and then zoom in on the first reference grid so that we can start working on the common background piece.

Step 1

Select the Ellipse Tool (L) and create a 120 x 120 px circle, which we will color using #685E5E, and then position it in the center of the active drawing area.

Step 2

With the Ellipse Tool (L) still selected, start adding the little stars by creating a couple of different sized circles (2 x 2 px; 4 x 4 px; 8 x 8px), which we will color using white (#FFFFFF) and then adjust by using different Opacity values (10%; 30%; 60%) to give them some variety.

I recommend you select and group them together (Control-G) so that it will be easier to keep track of them.

Step 3

Since some of the stars are positioned in such a way that a small section is going outside of the surface of the underlying circle, we’ll have to select and group them (Control-G) and then use a copy of the background as a Clipping Mask to confine them to its surface.

Step 4

Once you’ve masked the stars, group both them and the underlying circle together using the Control-G keyboard, and then create two copies towards the right side, placing them at a distance of 48 px from one another.

6. Create the Eve Avatar Icon

Assuming you’ve already locked the background layer and moved on up to the next one, zoom in on the first reference grid again, and let’s start working on the first avatar.

Step 1

Start working on Eve’s head by creating a 54 x 28 px ellipse (#EDEAE8), which we will vertically align to the background, positioning it at a distance of 40 px from the top section of the active drawing area.

Step 2

Adjust the head’s shape by selecting the ellipse’s top anchor point using the Direct Selection Tool (A) and then pushing it towards the outside by 12 px using the Move Tool (right click > Transform > Move > Vertical: -12 px).

Step 3

Adjust the roundness of the resulting shape by playing with its handles, and then give it an outline by going to Object> Path > Offset Path and entering 4 px into the Offset value field.

Step 4

Change the outline’s color to #3F3535 so that it can stand out from the fill section of the head.

Step 5

Start working on the front section of the head by drawing the display using a 42 x 20 px ellipse (#3F3535), which we will adjust by pushing its top anchor point towards the outside by 6 px and then playing with its handles to give it a more natural curvature.

Step 6

Start working on Eve’s eyes by creating two 10 x 8 px ellipses (#7FC2DD) which we will position 8 px from one another and then place over the previously created shape, leaving a 10 px gap between them and its top side.

Step 7

Add some expression to the eyes by partially covering each one of them using a 12 x 10 px ellipse (#3F3535), making sure to group them afterwards (Control-G).

Step 8

Since we’re pretty much done working on the main shapes of the head, we can start adding some details to it. The first one is going to be the little reflection from the upper section of the display, which we will create by drawing a 46 x 16 px ellipse (#FFFFFF) which we will align to its top side, and then mask using an all-around 2 px smaller version of the shape.

Step 9

Adjust the reflection by setting its Blending Mode to Soft Light and then lowering its Opacity to 28%, and then select and group the main shapes of the display using the Control-Gkeyboard shortcut.

Step 10

Finish off the head by adding an all-around highlight by creating a copy of the main fill shape and then cutting out a -2 px offset from it, which we will then color using white (#FFFFFF).

Once you’ve added the detail, don’t forget to select and group all the head’s elements together using the Control-Gkeyboard shortcut.

Step 11

Start working on Eve’s body by creating a 54 x 8 px rectangle (#EDEAE8) which we will position underneath the head, about 6 px from its outline.

Step 12

Adjust the shape that we’ve just created by setting the roundness of its top corners to 4 px using the Transform panel.

Step 13

Create the lower section of the body, by drawing a 54 x 76 px ellipse (#EDEAE8), which we will cut in half and then position right underneath the adjusted rectangle, uniting the two using Pathfinder’s Unite Shape Mode.

Step 14

Give the body a 4 px thick outline using the Offset Path method, coloring it using #3F3535.

Step 15

Next, create the red (#FF6B57) LED using a 6 x 6 px circle which we will position in the upper left section of Eve’s body, leaving a 6 px empty space gap on its top side and a slightly larger 10 px one on its left side.

Step 16

Create a copy of the body’s fill shape, and then use a -2 px offset to create a cutout, turning the resulting shape into a highlight by setting its color to white (#FFFFFF).

Step 17

Add two vertical highlights on the right side of Eve’s body, using a 2 x 40 px rectangle and another slightly wider 4 x 40 px one, positioning them 2 px from one another and coloring them both using white (#FFFFFF).

Oh, and don’t forget to select and group (Control-G) all of the body’s elements together so they won’t get separated by accident.

Step 18

Create the left arm by drawing an 8 x 8 px circle (#EDEAE8), which we will adjust by pushing its bottom anchor point towards the outside by 24 px using the Move Tool (right click > Transform > Move > Vertical > 24 px).

Give the resulting shape a 4 px outline (#3F3535) and then position it on the left side of the body, aligning it to the top side of its fill section, making sure their outlines overlap.

Step 19

Create Eve’s right arm by grabbing a copy of its left one (Control-C > Control-F) and positioning it on the other side of its body.

Step 20

Since at this point we’re done working on the actual icon, we’ll have to select and group all of its elements together (Control-G) and then use a copy of the underlying background circle to mask them so that they’ll remain confined to its surface.

7. Create the Wall-E Avatar Icon

Move on up to the fourth layer, and zoom in on its reference grid so that we can start working on the Wall-E avatar.

Step 1

Grab the Rectangle Tool (M) and create a 64 x 34 px shape which we will color using #DD9F68 and then position on the bottom side of our active drawing area, making sure to horizontally align it to its center.

Step 2

Give the shape a 4 px outline using the Offset Path method, coloring it using #3F3535.

Step 3

Create the upper section of the body by drawing a 64 x 2 px rectangle (#99918A) which we will adjust by setting the roundness of its top corners to 2 px and then giving it the same 4 px thick outline (#3F3535).

Step 4

Add a subtle 72 x 5 px highlight (color: white; Opacity: 40%) to the top half of the body’s upper section, masking it using the shape from underneath. Then add two pairs of vertical highlights on each side using the same color and Opacityvalues, selecting and grouping (Control-G) all of the composing elements afterwards.

Step 5

Grab the Rectangle Tool (M) and create a 24 x 2 px shape (#B7AEA9), give it a 4 px outline (#3F3535) and some highlights, and then finally group and position the shapes in the center of the body’s upper section.

Step 6

Start working on Wall-E’s arms by creating a 10 x 12 px rectangle (#C9C3C0) with a 4 px outline (#3F3535) which we will position in the upper right corner of his main body.

Step 7

Start adding details to the arm by creating a 10 x 4 px horizontal divider (#3F3535) and positioning it in the center (1). Then, add two 10 x 2 px highlights (color: white; Opacity: 60%) one underneath the divider, and another one aligned to the top section of the hand (2).

Finish off the arm by adding two 2 x 4 px vertical dividers (#3F3535) to each side of the vertical one (4 & 5), and a smaller 1 x 2 px piece on their left side (6), making sure to group all of its elements together (Control-G).

Step 8

Create the right arm by grabbing a copy of the one that we’ve just created and positioning it onto the other side of the body, making sure to flip it vertically (right click > Transform > Reflect > Vertical).

Step 9

With both arms in place, start working on the front-facing speaker by creating a 10 x 12 px rectangle (#8E8680) to which we will add a 4 px outline (#3F3535), positioning both shapes on the right side of the left arm, at a distance of 2 px.

Step 10

Use the Rectangle Tool (M) to add a 2 x 12 px vertical highlight (color: white; Opacity: 30%) towards the right side of the speaker (2), and three 10 x 1 px vertical grills (#3F3535) positioned 1 px from one another in its upper section (3). Then add the little red LED by creating a 2 x 2 px circle (#FF6B57) (4) with a 2 px thick outline (#3F3535) (5), making sure to group all of the unit’s elements together (Control-G).

Step 11

Once you’ve finished working on the speaker unit, use the Rectangle Tool (M) to create the little display using a 10 x 12 px rectangle (#564D4D) with the same 4 px thick outline (#3F3535). Position the two shapes on the right side of the speaker, making sure that their outlines overlap.

Step 12

Start adding details to the display unit, by creating three 6 x 1 px rectangles (#DBC66B) (2) and another 6 x 2 px one (#DBC66B) positioned 1 px from one another (3). Then, add a 10 x 6 px reflection (color:white; Blending Mode: Soft Light; Opacity: 60%) to the top half of the display (4), and a 6 x 1 px insertion (#3F3535) on top of it (5).

As always, don’t forget to select and group all of the unit’s elements using the Control-G keyboard shortcut.

Step 13

Add three 4 x 12 px rectangles (#3F3535) positioned 16 px from one another to the bottom section of the body, making sure to group (Control-G) and horizontally center them.

Step 14

Finish off Wall-E’s body, by adding two vertical highlights on its right side, using white (#FFFFFF) as your fill color, Soft Light as your Blending Mode and a value of 70% for the Opacity.

Then, select all of the body’s composing elements and group them (Control-G) so that they won’t get misplaced by accident.

Step 15

With the body finished, we can move on up and start working on the neck section.

That being said, grab the Rectangle Tool (M) and create a 20 x 4 px shape (#756E68), give it a 4 px outline (#3F3535), and then position both objects in the upper section of the body.

Step 16

Add a 20 x 2 px shadow (color: black; Opacity: 30%) to the upper half of the neck’s base, and then group all three shapes together (Control-G).

Step 17

Create an 8 x 4 px rectangle (#BA8152), give it a 4 px thick outline (#3F3535), a shadow (color: black;Opacity: 30%) and a vertical highlight (color: white; Blending Mode: Soft Light; Opacity: 70%), and then group (Control-G)and position the shapes over the neck base that we’ve just created.

Step 18

Use a 12 x 6 px rounded rectangle (#BA8152) with a 1 px Corner Radius to create the neck’s joint, giving it a 4 px outline (#3F3535), a top half and vertical highlight (color: white; Blending Mode: Soft Light; Opacity:70%), followed by a 2 x 6 px vertical divider (#3F3535), grouping the shapes together using the Control-G keyboard shortcut.

Step 19

Next, start working on the upper section of the neck, by creating a 4 x 16 px rectangle (#3F3535) with a 4 px thick outline (#3F3535) which we will position just above the neck joint.

Step 20

Add a 2 x 2 px insertion (#3F3535) towards the top side of the shapes that we’ve just created in order to give it a deeper sense of mobility, grouping all three shapes together using the Control-G keyboard shortcut.

Step 21

Use the Ellipse Tool (L) to create the round joint holding Wall-E’s eyes together, by drawing an 8 x 8 px circle (#756E68) with a 4 px thick outline (#3F3535) which we will then group (Control-G) and position above the neck’s top section so that their outlines end up overlapping.

Step 22

Cast a shadow onto the top section of the neck by selecting the round joint’s outline and applying a 4 px offset to it, which we will mask using a copy of the underlying shape, and then adjust by setting its color to black (#000000) and lowering its Opacity to 30%.

Step 23

Start working on Wall-E’s left eye by creating a 22 x 16 px rectangle (#C9C3C0), which we will adjust by setting the roundness of its left corners to 8 px, its top right one to 2 px, and its bottom right one to 10 px.

Give the resulting shape a 4 px outline (#3F3535) and then position both shapes onto the left side of the round joint.

Step 24

Gradually add details to the eye, starting with the inner shadow (color: black; Opacity: 30%) (2). Next, add the three 2 x 2 px circles (#3F3535) to the corners of the shape as seen in the reference image (3). 

Use the Ellipse Tool (L) to create an 8 x 8 px circle (#5B4F4F) (4) which we will turn into an eye by giving it a 2 px thick outline (#3F3535) (4) and then adding a 6 x 6 px circle (#3F3535) over it (5). 

Finally, add a top half highlight (color: white; Blending Mode:Screen; Opacity: 24%) and a smaller 2 x 2 px reflection (6), grouping all of the elements together (Control-G).

Step 25

Grab a copy of the eye that we’ve just created (Control-C > Control-F) and flip it vertically (right click > Transform > Reflect> Vertical), positioning it towards the right side of the round joint.

Step 26

Create a 24 x 12 px rounded rectangle (#3F3535) with a 4 px Corner Radius and cut out a -2 px offset from it to create the ring section connecting both eyes, making sure to send it to the back afterwards (right click > Arrange > Send to Back).

Step 27

Finish off the icon by selecting and grouping all of its elements together, and then using a copy of the background’s circle to mask them.

8. Create the M-O Avatar Icon

We’re now down to our third and last icon, which is that cute little Microbe Obliterator robot. So assuming you’ve already made your way up to the last layer, zoom in on its reference grid and let’s get started.

Step 1

Create the main shapes for M-O’s body using a 36 x 32 px rectangle (#EDEAE8) with a 4 px outline (#3F3535), which we will position towards the bottom side of the reference grid.

Step 2

Add a 36 x 4 px shadow (color: black; Opacity: 30%) towards the top side of the fill section, and a pair of two 8 px tall vertical highlights (#FFFFFF) towards its right side.

Step 3

Using the Rectangle Tool (M), create the main shapes for M-O’s cleaning tool, using a 36 x 8 px shape (#5B4F4F) with a 4 px outline (#3F3535) which we will position where the two highlights end.

Step 4

Gradually start adding details to the cleaning tool, by creating two 36 x 2 px rectangles (#3F3535) positioned 2 px from another (2), which we will place in the center. Then, add two 36 x 1 px highlights (color: white; Blending Mode: Soft Light; Opacity:80%), one above and one under the first horizontal divider (3) and two vertical ones on the right side of the tool (4).

Finish off this section, by adding six 4 x 2 px rectangles (#3F3535) (5), which we will adjust by rounding their top corners using a 1 px Corner Radius (6).

Then, don’t forget to select and group all the tool’s composing elements using the Control-Gkeyboard shortcut.

Step 5

Add a subtle shadow (color: black;Opacity: 40%) just underneath the tool that we’ve created, using a 36 x 4 px rectangle, and then group all of M-O’s composing body elements together (Control-G).

Step 6

Start working on M-O’s head by drawing a 56 x 46 px rectangle (#EDEAE8), which we will adjust by setting the roundness of its top corners to 4 px and that of its bottom ones to 2 px. Give the resulting shape a 4 px outline using the Offset Path method, and then position both shapes in the upper section of the body.

Step 7

Give the head an all-around highlight using white (#FFFFFF) as your main color, and a pair of vertical ones which we will want to position slightly towards the right side of the ones from M-O’s body.

Step 8

Add the screen section that normally displays the eyes, using a 40 x 18 px rounded rectangle with a 4 px Corner Radius, which we will color using #3F3535 and then position towards the bottom side of the head, aligning it to its outline.

Step 9

Add the eyes by creating two 10 x 4 px rounded rectangles (#DBC66B) with a 1 px Corner Radius, positioned 4 px from one another, which we will then align to the center of the display, leaving a 6 px space gap towards its top side.

Once you’re done, select both eyes and the display section and group them (Control-G).

Step 10

Finish off M-O’s head by adding the red glowing light using a 22 x 6 px rectangle (#FF6B57) which we will adjust by rounding its top corners using a 2 px Corner Radius.

Give the shape a 4 px outline (#3F3535) and the usual highlights (color: white;Opacity: 20%), and then group (Control-G) all its elements including the head.

Step 11

With the head completed, it’s time to work on the little guy’s hands.

Start by creating an 8 x 30 px ellipse (#EDEAE8) (1) which we will cut in half by removing its right anchor point (2). Next, use theRectangle Tool (M) to draw a 2 x 30 px shape, which we will position onto the right side of the adjusted ellipse, uniting the two into a single shape (3). Give the resulting shape a 4 px thick outline (#3F3535) (4) and then add a 4 x 10 px rounded rectangle with a 2 px Corner Radius on its bottom right corner (5).

Finally select all the shapes and group them using the Control-G keyboard shortcut.

Step 12

Add a shadow (color: black; Opacity: 30%) and subtle highlight (color: white) to the arm, and then create the second one using a flipped copy of it.

Step 13

Finish off the icon by selecting and grouping all of its elements together (Control-G) and then masking them as we did with all the other ones, using a copy of the background’s circle.

Conclusion

It might have been a long ride, but we’ve finally made it, and ended up with a cute icon pack as a result of our hard work.

As always, I hope you’ve found the tutorial easy to follow and most importantly managed to learn something new along the way.