By Derek Breen

Feel free to use any shapes you have already created in Scratch to make a customized robot. Begin your design with rectangles for parts with sharp corners and ellipses for parts that will be round. It may also help to expand the size of the Paint canvas.

  1. Click the Paint New Sprite icon.

  2. Click the Toggle button to expand the Paint canvas (or choose Edit→Small Stage Layout.

  3. Click the Convert to Vector button.

  4. Drag the Line Width slider to adjust the line width.

  5. Draw several mechanical parts using the Rectangle and Ellipse tools.

  6. Use the Reshape tool to sculpt parts into more irregular shapes.

    image0.jpg

  7. Choose a gray color swatch and use the Color a Shape tool to fill in the parts.

    image1.jpg

  8. Use the Select tool to click and drag the parts into position.

    image2.jpg

  9. Use the Ellipse tool and hold the Shift button to draw solid circles for joints at the wrist, elbow, shoulder, and neck.

    image3.jpg

Move parts to different layers

In Vector mode, each shape you draw in a costume or backdrop gets its own layer (just as each sprite on the Stage is on a different layer). In addition to moving vector shapes across the Paint canvas, you can also move objects behind other objects, or bring them above other objects by using the Back a Layer and Forward a Layer buttons.

The Forward a Layer and Back a Layer buttons are hidden until after you select a shape.

  1. Click one of the robot joints with the Select tool.

  2. Hold the Shift key while clicking the Back a Layer button.

    Shift-clicking sends the object all the way to the back, while clicking without the Shift button would only send the object back one layer at a time (which works for the Forward a Layer button, too).

  3. Repeat Steps 2 and 3 to send all the joints back, so they appear inside the robot body parts.

    image4.jpg

Group shapes together

Vector graphics also enable you to group shapes together. Can you guess why it might be helpful to have groups of objects within one sprite? What can you do if all the parts of the arm are grouped?

  1. Click the Select tool.

  2. You can select multiple objects two ways:

    1. Click beside the first object (like the hand) and drag over all the objects you want to group. This works well when parts are isolated, making it easier to select them without dragging over other parts.

    2. Hold the Shift key and click each object you want to group. This ensures you get each part, but you might have trouble selecting smaller objects, hollow shapes with thin outlines, or objects that are behind other objects.

  3. Click the Group button.

    Notice how the shoulder that you sent to the back layer now appears to be in front of the robot body again? That’s because when you group objects, the group is automatically moved to the top layer.

    The Group tool is hidden until you select more than one shape.

  4. Click any object in the group to drag all grouped objects to a new location. Drag the group away from the robot body for now.

    image5.jpg

If you find you’ve grouped more objects than you meant to, you can use the Ungroup button and then try to reselect just the ones you meant to move. If you’re still having trouble, you may need to drag objects out of the way and then try to select and group them again.

What can you do with that arm group besides just moving? You can rotate or resize all grouped objects at once. Can you see why this would make a sprite made of vector shapes so much better than bitmap graphics for animating?

You may want more than one arm and one leg for your robot. But don’t race ahead and start drawing more parts because here’s a shortcut for you!

Duplicate groups of body parts

Have you already guessed why you would draw just the left arm and leg? It’s because you can use the Duplicate tool to copy groups and then use the Flip buttons to flip the new limbs vertically or horizontally. This not only saves time, but also ensures parts on each side of the body are exactly the same shape and size.

  1. Click the Duplicate tool.

  2. Click and drag the arm group to copy it to a new position.

    image6.jpg

  3. Click the Flip Left-Right button and adjust the arm position again.

    image7.jpg

  4. Click and drag both arms back into the robot body.

    image8.jpg

  5. Select each arm group and Shift-click the Back a Layer button so the shoulder joints appear inside the body.

    image9.jpg

See how much time you saved? Now you can use the same technique on the left and any other parts that you wish to appear on both sides of the robot. In design, having the same parts on each side of the object is referred to as being symmetrical. The Flip Left-Right and Flip Up-Down buttons make it easy to create symmetrical backdrops and sprites. This is particularly handy for drawing people, animals, and mechanical objects.

Use gradients for a metallic look

What makes metal look like metal? If a shape is filled with a solid color, it will look flat, like a cartoon or simple illustration. A way to simulate the reflective nature of metal is to use a gradient fill. You can blend gray and white for a bright look or gray and black for a darker shade.

  1. Click the Fill with Color tool.

  2. Choose a medium gray color swatch.

  3. Click the swatch behind your current gray swatch to swap ­colors, and then choose the white swatch.

  4. You will find the order of the colors (which color is on top and which on the bottom) can make a big difference on how the gradient turns out.

  5. Click the Radial Fill button for round shapes or one of the Linear Fill buttons for more rigid shapes (with sharp corners).

  6. Move your cursor into each object and click to fill.

  7. If you do not like the gradient, swap the foreground and background colors and click to fill the shape again.

    image10.jpg

The circular gradient has an advantage over the other gradient options: If you click and drag inside a shape, you can specify where the center of your circular gradient will appear. This is a handy way to specify exactly where a highlight or dark spot should appear.

Add details with the Line tool

You can use the Line tool to draw straight lines between two points. It appears to work the same way in Vector mode, clicking to start the line and dragging to the end point, then releasing your mouse or trackpad button to finish the line. But if you continue to click and drag, you create a continuous outline that you can close by clicking back on the beginning point.

image11.jpg

Once a shape is closed, you may find a corner appears messy (like the bottom-right corner of the triangle). You can usually fix these corners by selecting the Reshape tool, clicking the points of the corners, and dragging them into place.

image12.jpg

Use the Line tool, along with the Ellipse, Rectangle, and Reshape tools to add more details to your robot.

image13.jpg

You can adjust the width of any line (including shape outlines) in Vector mode by selecting the line or shape and using the Line Width slider (to the left of the color swatches).

The last details to add are shadows to offset the gradient highlights.

Add shadows to vector shapes

A quick way to add a shadow is to duplicate a shape part, fill it with a darker color, make the edges the same color, use the Reshape tool to squish them, and then select and drag back onto the object.

image14.jpg