How to Create a Cute Robot Game Sprite using SSR in Adobe Illustrator
In this tutorial you will learn how to use a combination of the SSR (Scale, Shear, Rotate) method and Adobe Illustrator guides to make an isometric robot. Isometric images are perfect for diagrams and game sprites. So let's see how to make this cute isometric robot...
Open up a New Illustrator document. The size and resolution of the document aren't too important, so choose something you're comfortable with.
Before we begin, it's important to define what we mean when we say that we'll be drawing an isometric object.
Isometric perspective is a way of drawing a 3D object in 2D. It's used in technical drawings, cartoon cities, and 2D games that want to look 3D. Isometric perspective is preferable over normal perspective because all objects will be the same size, no matter how far away from the viewer they are.
We'll start by setting up an isometric grid to act as our guides. The techniques I'll show you in this article build on the SSR Method, which stands for scale, shear, rotate. In addition to this method, Illustrator guides will come in handy later when lining up shapes in isometric perspective.
Create the guides using this Quick Tip: How to Create an Isometric Grid in Less than 2 Minutes. Next, turn on Smart Guides under View > Smart Guides.
As a quick refresher of the SSR method, we'll make the front, side, and top of a cube. Start by drawing a square using the Rectangle Tool (M) and holding Shift while dragging the mouse. Make three copies of the square, which will become the top and two sides of an isometric cube.
We'll start by making the top. Right-click on the cube and select Transform > Scale and enter a value of 86.062% into the Non-Uniform > Vertical input field. Next, right-click again and select Transform > Shear, and enter a shear angle of 30 degrees. For the final step, right click and select Transform > Rotate, and enter an angle of -30 degrees.
Alternatively, you can use the Transform window with the same procedure – simply change the height (denoted H) to 86.062%, then the shear to 30 degrees, and finally the rotation to -30 degrees. Both methods will produce the same results.
To make the left and right sides of the cube we can follow the same procedure, with different shear and rotate angles. These values are summarized in the image below.
With these techniques under our belts we can move on to making our robot character. The robot I'll be making in this tutorial is the main character in an isometric game I've been working on, Robotok.io.
Start by turning on the normal, 2D Grid by clicking View > Show Grid (Ctrl + "). Since the robot is pretty rectangular, we can use the Rectangle Tool (M) to flesh out the major features. The Pen Tool (P) and the Direct Selection Tool (A) also come in handy, and allow us to give the robot a bit of character.
Using the front of the robot as a reference, we can draw the side of the robot. Here I've used the Line Segment Tool (\) to put some blue lines behind the image to help line up the sections of the robot's body. You can move the lines up and down to whatever part of the drawing you're currently working on. Having the parts lined up correctly will make the later steps much easier, when we use these views to make the robot isometric.
Make a copy of the side view and change the stroke color to grey. Now we can draw the arms on top of the side view, making it easier to see our new lines. We can also adjust the placement of our blue horizontal lines to help us line up the side-view of the arm with the front.
The robot also needs a backpack to hold all his stuff, so let's draw that on the side view using the same method.
Finally, draw the back of the robot using the front and side as a reference. Here I've used lighter lines on the back of the head to help these lines stand out from the others, as they show the volume of the head.
Now that we have the blueprints in place, we can start building the 3D robot using our isometric SSR method and the guides we made earlier. Let's start off by working with just the head and body (leave the arms and backpack off for now) of the robot to construct an isometric front view.
Make a copy of the front of the robot, remove the arms, and SSR it to be a left side (Scale: 86.062%, Shear: -30, Rotate: -30). Repeat the SSR process with the back of the robot, making sure to remove the arms.
Now we'll do the same thing with the side of the (armless) robot, but we'll transform it into the right side (Scale: 86.062%, Shear: 30, Rotate: 30). Make a copy that we can use for the other side of the robot.
To position the two sides of the robot, select the entire side of the robot using the Selection Tool (V) and then switch to the Direct Selection Tool (A).
Drag the top left anchor point to overlap with the corresponding corner on the front view. When the smart guide says anchor (in cyan text), let go of the mouse button.
Do the same thing with the far side of the robot. Once the far side of the robot has been placed, keep it selected and press Ctrl + Shift + [ to move those shapes behind the others.
Aligning the back of the robot's head is a bit trickier. At this point we should turn off the grid (Ctrl + ") and turn on our isometric guides (Ctrl + ;). Select the entire robot (V) and switch to the Direct Selection Tool (A). Select one of the points on the top front of the robot's head, and drag it over to snap with the guide. We can use this guide line to line up the back of the robot with the front.
Select the back (V) and switch to the Direct Selection Tool (A). Drag the robot from a point on the top of his head to the same line we aligned the front with. Now drag it along this line until the back outline just lines up with the sides of the robot's head.
Now we can select the back-of-the-head points on the side view (see image) with the Direct Selection Tool (A), using Shift-click to get both points at once. Drag these points to match up with the back of the head(again, waiting until the word anchor appears in cyan text before releasing). Once these points are in place, we no longer need the back of the robot and can delete it by selecting all shapes with the Selection Tool (V) and hitting Delete.
To finish off the shape of the head we can use the Pen Tool (P) to draw in the top. Click each of the 4 points that make up the top of the robot's head, each time waiting for the word anchor to appear. Finally, connect the last edge. Press Ctrl + [ a few times to move this new shape back until you can see all the antenna shapes. If you go too far, use Ctrl + ] to bring it forward again.
The robot's antenna is composed of two pieces: a cone and a sphere.
To make an isometric cone, we start with two circles overlaid (step a), with one larger than the other, and we SSR them to be flat like the top of a cube (step b). Holding shift, move the smaller circle up vertically until the shape is the height you want (step c). Using the Add Anchor Point Tool (+), add points to the sides of the bottom circle as shown (step d). Then use the Direct Selection Tool (A) to select the inside points of both circles and delete them using the Delete key (step e). Switch back to the Pen Tool (P) and connect the remaining points (step f) to make your cone (step g).
Next we can make the isometric sphere for the top of the antenna. Draw a circle, and that's it! An isometric sphere is simply a regular circle (step h). Position the antenna on top of the robot's head.
Next we can position the body of the robot using the same techniques that we used to make the head. Delete the neck shapes (since we can't see the neck from this view) and the far side of the body that's no longer visible. This will help clean up our view of the robot.
Use the Selection Tool (V) to select the close side of the robot (legs and body). Switch to the Direct Selection Tool (A) and drag the side of the body by a corner to line up with the corresponding corner on the front.
Now make a Copy of the side (Ctrl + C, Ctrl + V) and drag that copy to the far side of the robot using the same method to align the points (see left side of image).
To draw in the top of the body, switch to Outline View using Ctrl + Y and use the Pen Tool (P) to connect the four points on the top of the body (the same way we made the top of the head). Switch the view back by hitting Ctrl + Y again.
We're now going to focus on the legs. The side view of the leg is already in place, so we can use it as a guide for the front side. Use the Direct Selection Tool (A) to select points in pairs, we can move the shapes to line up with the sides. Use Shift-click to select two points at once, and drag them to line up with the side of the leg. The smart guides will help you line up the points exactly.
When you're done one leg, use the Selection Tool (V) to select all of the shapes and make a copy (Ctrl + C, Ctrl + V). Position the new copy as the other leg on the robot. Now hit Ctrl + Shift + [ to move this leg to the lowest layer, so that it is behind the robot's body. Delete the unused shapes to clean up the image.
At this point the body of the robot should be complete, and we can move on to the arms.
First, make a copy of the robot and group the head and body separately. Change the stroke color to grey. Isolate the various arm shapes and SSR them into front and side views.
The arm is composed of four parts: the shoulder, the upper arm, the forearm, and the claw.
We'll start by working on the forearm, as it is the simplest to manipulate. Line the front and side shapes of the arms up with the grey body and each other. Adjust the points on the side of the forearm to line up with the front, making sure to select the points in pairs to maintain the perspective.
Use the Pen Tool (P) to fill in the rest of the forearm. For this step, it helps to make copies of shapes to use as guides (as we did with the head and body).
The tricky part of the arms is the cylinder connecting the shoulder to the robot's forearm. To make this shape we'll start by drawing a circle and making a copy of it (Ctrl + C, Ctrl + V ). Now SSR one circle to be fit onto the side of the robot, and SSR the other to fit on top of the forearm. Position these circles on the shoulder and the top of the forearm as shown.
Use the Pen Tool (P) to make a new shape that looks like it would connect the two circles (as shown). Select the two circles and the shape connecting them with the Selection Tool (V) and click Pathfinder > Add to Shape Area, then Expand to merge them into one shape.
Use Ctrl + [ and Ctrl + ] to correctly position this shape behind the ridge on the forearm.
Making the hollow cylinder for the shoulder requires us to split it into two pieces: the part in front of the arm and the part behind it.
Start by making a copy of the shoulder circle on the side of the robot's body (Ctrl + C, Ctrl + F). Using the guides (hit Ctrl + ; to turn them on), drag the second circle out a bit to give the shoulder cylinder some depth (see diagram below).
Use the Add Anchor Point Tool (+) to add points on the edges of the two circles (see diagram, add points at the red circles). Now make a copy of the shapes. One copy of will be used to make the front of the shoulder, and the other to make the back.
Use the Direct Selection Tool (A) to delete the unnecessary points on both copies to end up with two lines in each case. Use the Pen Tool (P) to reconnect the points. Reposition the pieces together, and there you have it: a front and a back for your shoulder.
Now we can make the robot's claw using a technique similar to how we made the shoulder.
Take the SSR'd claw shapes and line them up on the guides. When lining up shapes, simply pick any point on one shape, line it up with a guide line, and then make sure to place the corresponding point on the second object in the same place. Here I've chosen the top left corner of the square on each claw as the reference point, and as you can see they are both positioned on the same guide line.
Make a copy of the front of the claw, and use the side as a width-reference (as shown below) to position this copy as the back of the object.
After we've used the side view of the claw to determine the width, the shape is no longer needed and we can delete it.
We'll start filling in the claw by making the green shape in the object below. Make a copy of the two halves of the claw, and delete all the points that won't make up the side of the claw using the Direct Selection Tool (A) and the Delete key. Next, use the Pen Tool (P) to connect the two halves. Now we can position the side of the claw back into our object.
Using the same technique we can fill in the inside of the claw (purple), and for completeness we can make the bottom edge as well (blue).
With the front arm done, we can use the same methods to construct the robot's other arm.
The majority of this arm can be copied directly from the first arm, and tweaked using the Direct Selection Tool. The robot's hand, for instance, is completely identical so we don't need to redraw it. Recall that isometric objects are the same size no matter how far they are from the viewer, unlike true perspective, so the far arm's claw will be same size as the close one.
The last thing we're going to add to the robot is his backpack. I like to make a copy of everything so far, Group each arm independently (Ctrl + G), and adjust the stroke color to be lighter. That way we can keep each body part separate for future edits (like making the back view, or if we wanted to animate the robot) and it helps you see what you're working on right now.
Use the SSR method on the side view of the backpack we drew earlier, and then position it on the side of the robot. Since the backpack is curved, it doesn't need much work to make it fit into the isometric perspective. If it doesn't look quite right, use the Direct Selection Tool (A) to adjust the individual points.
Use the Pen Tool (P) to draw the front of the strap over the robot's shoulder.
Here I've moved the head and front arm out of the way so we can easily see where the backpack is going to go. Once the backpack as been drawn, we can add these shapes back.
And there he is! To unify him a bit, select the entire robot and change the stroke width to one value. In this case I chose 1 pt, but this depends on how big you've drawn your sprite.
This robot is now ready for some colors!
The first step is to change the stroke color to something less harsh then black. Here I've chosen dark grey, but depending on your sprite you may want to mix in some color.
Next we can fill in some base colors. Use the Selection Tool (V) to select the whole robot (except the eyes), and change the fill color to grey.
Select the eyes, mouth, button, and screen and change these to have a fill color of white. Color the backpack orange, and make the button red.
The next step is to choose a direction for the light source. I've decided to make it come from the left, so face-on to the robot.
The shading from here onward can be as detailed or as simple as you like. I've opted to keep the shading relatively simple, and ignore the fact that some objects can cast shadows on others. This will make it easier to use the sprite in animations later.
Start by selecting all shapes that will be in shadow and changing their fill color to a darker grey. Next, select all shapes that will be directly in the light and fill them with a lighter grey. For the flat shapes, this is easy, but the shadows on curved surfaces will require more work.
To illustrate how we can shade the curved surfaces, consider the body of the backpack.
Copy this shape, and paste-in-front using Ctrl + C, Ctrl + F. Now get rid of the stroke, and set the fill color to a dark orange.
Now we can use the Delete Anchor Point Tool (-) to trim down this shape, and then the Direct Selection Tool (A) to adjust it into the shape of a shadow. To fix the stroke, we make another copy of the backpack body and paste it in front. Remove the fill on this new shape, and move it forward (Ctrl + ]) to put it in front of the shadow shape.
Use this method to make shadows for the rest of the backpack, as well as for the other curved surfaces such as the cylinders in the arms, and the antenna.
To give the robot a little more character, we can add some highlights to his joints and feet.
Here I've made the wrists and feet a darker grey, and the elbows and feet lighter. I've also made the eyes a bit darker to make them stand out. Keep in mind the light source when adding more colors, as you need to keep the shading consistent.
To make the robot stand out a bit more, we can give him a slightly thicker outline.
Select the whole robot, Copy, and Paste in Front (Ctrl + C, Ctrl + F). Click Pathfinder > Add to Shape Area, then Expand to get a single combined shape. Change the fill color to white so we can clearly the new shape.
This shape will likely be a bit messy (caused by the fact that some shapes are not perfectly aligned) so we can use the Remove Anchor Point Tool (-) to clean it up a bit by removing the ugly points. Focus on making sure that the outer-most edges are smooth, as that will be all we can see when we're done.
Now use the Stroke window to change the corner type to be the middle option, "Round Join". This will make the corners smooth. Increase the stroke width of this shape to 3pt.
Select the outline shape and press Ctrl + Shift + [ to send this shape to the very back.
Here is an image of the two robots side-by-side: one with the outline and one without. The outline unifies the robot's shape, and will help him stand out against a more complex background.
Let's give the robot something to stand on. Since he's going to be used on an isometric game board, a game tile seems like a good choice. Make a square and then SSR it to be flat like the top of a cube. Position the tile under the robot using Ctrl + Shift + [ to move it to the very back.
In the last step we'll give the robot a simple shadow. Make a circle, and SSR it to be flat like the tile. Change the fill color to dark grey, and then set its Opacity to be about 15%. Position the shadow below everything except the tile (Ctrl + Shift + [, then Ctrl + ] to move it up one level).
And there we have it: an adorable isometric robot. Use these techniques to make isometric sprites for games, for technical diagrams, or to add a 3D punch to your designs.