Scr atch Pa in t E ditor

Scratch has a built-in Paint Editor that you can use to

create or edit sprites, costumes, and backdrops. This
editor supports two drawing modes: bitmap g ­ raphics
(also called raster graphics) and vector graphics. In
this appendix, you’ll learn the difference between
these modes and how to use the Paint Editor to create
your own program features.

Image Representation
An image is composed of small picture elements called pixels. These pixels
are arranged in a rectangular area, sometimes referred to as a raster. The
image size is frequently given by its width and height in pixels, as illustrated
in Figure 1.
 16 pixels

The image description

16 pixels
includes the color of
each of its pixels.

Figure 1: A 16 × 16–pixel bitmap image

When you use an image editor, the software saves certain information
that allows it to reload the image when you want to open it again. The saved
data and the way that data is arranged give rise to the image format.
One option is to save the information associated with each pixel of the
image, including its position and color. This approach is usually called bit-
map graphics (or raster graphics). Common bitmap image formats include
BMP, JPEG, PNG, GIF, and TIFF.
Other formats, called vector graphics, store the instructions or rules for
drawing pixels instead of information about the pixels themselves. These
rules use points, lines, curves, and mathematical expressions to represent
the image. Sprites drawn with vector graphics usually look much smoother
than bitmaps when you zoom in on them. Scratch recognizes the Scalable
Vector Graphics (SVG) format.
Scratch’s Paint Editor allows you to create both bitmap and vector
graphics. Bitmap graphics are the default, and vector graphics were added
in Scratch 2. The layout of the Paint Editor changes based on which mode
you select.

Bitmap Mode
When you create a new sprite or costume, the Paint Editor starts in bitmap
mode, as illustrated in Figure 2.
If you have used programs like Microsoft Paint, you’re probably famil-
iar with many of these options. You may be able to guess what the buttons
in Figure 2 do, but if you can’t, each button has a tool tip that describes its
function. You can see the tool tip by hovering the mouse pointer over any
button. The following sections provide more information, but the best way
to get familiar with this tool is to try it out as you read along.

2   Scratch Paint Editor

 Costume name Undo/Redo Clear/Import

Flip left-right
Flip up-down
Toolbar Set costume center
Drawing
canvas

Foreground and background colors Zoom buttons

Bitmap/Vector mode
Options area Color and alternate palettes

Figure 2: Scratch’s Paint Editor in bitmap mode

Toolbar and Options Area

The toolbar and the options area provide the tools you need to draw on the
Canvas. Just click the button for the tool you want, adjust the settings in the
options area, and start drawing.
Table 1 provides a description of each tool available from the toolbar
along with the options you can change when you select it. Unless the descrip-
tion says otherwise, a drawing tool uses your current foreground color.

Table 1: Toolbar Buttons in Bitmap Mode

Icon Function Description

Brush Paint freehand. The slider changes the brush size.

Line Draw a line (shift-drag for a straight horizontal or vertical

line). Use the slider to change the line width.

(continued)

Scratch Paint Editor   3

 Icon Function Description
Rectangle Draw a filled or outlined rectangle (shift-drag for a square).
You can choose a fill style (solid or outlined) and change the
outline thickness with the buttons shown below.

Ellipse Draw a filled or outlined ellipse (shift-drag for a circle). You

can change the fill style (solid or outlined) and outline thick-
ness with the buttons shown below.

Text Add text. Click anywhere on the Canvas, type the text you
want when you see the cursor, and then click outside the text
area. The Select tool (see below) automatically selects your
text so you can change its size and orientation.
Click on the Canvas
1
and start typing.

When done, click Use the grippers to change

2 3
outside the box. size and orientation.

Fill Fill a closed region with a solid color or gradient. Choose

one of the fill styles (solid color, horizontal gradient, vertical
gradient, or radial gradient) shown below. Gradients blend
from the selected foreground color to the selected background
color.

Eraser Erase with freehand strokes and adjust the eraser size with the
slider. The areas that you erase become transparent.

Select Select a rectangular region and move it to a new location.

Press the delete key to remove the selection, or use shift- delete
to crop (that is, delete the nonselected part of the image).
Stamp Select a rectangular region to create a copy of it. Drag the
copy and place it where you want.

4   Scratch Paint Editor

Other Paint Editor Buttons
The Paint Editor also contains a number of buttons that don’t draw. The
function of each of these buttons is summarized in Table 2.

Table 2: Button Controls in the Paint Editor

Icon Function Description

Undo/Redo If you make a mistake, you can click Undo as
many times as needed to reverse your most
recent actions. Click Redo if you want to restore
those actions.
Clear Click this button to remove all content from the
Canvas.
Import Click this button to open an image from a file
and add it to the Canvas.
Flip Flip the Canvas content (or just the current selec-
tion) horizontally or vertically.
Costume center Clicking this button displays a set of cross-axes
on the Canvas that represent the costume’s cen-
ter of rotation. Drag these axes to pick a new
center of rotation.
Zoom Increase or decrease the view magnification
of the Canvas. When the zoom is greater
than 100 percent, scroll bars are used to pan
around the Canvas. Zoom does not change the
size of the image.

Color Settings
The color controls allow you to set the foreground and background colors
of your drawing. These controls are described in Table 3.

Table 3: Buttons for Setting the Drawing Color

Icon Function Description

Current colors This control shows the current foreground and
background colors. Click the squares to switch
the two colors.

Color palette Pick a color from this palette to specify a new

foreground color. The transparent option is in
the upper-right corner.

Alternate palette Switch between the default palette and the con-
tinuous color palette.

Scratch Paint Editor   5

 Drawing in Bitmap Mode: Some Practice
Let’s put some of the tools described into practice by drawing a truck.
Follow these steps to create the drawing:

1. Using the Rectangle tool, create two rectangles, as shown in Figure 3.

Figure 3: Create two rectangles using the Rectangle tool.

2. Use the Line tool to draw three diagonal lines across the corners of the
two rectangles, as shown in Figure 4.

Figure 4: Use the Line tool to draw diagonal lines.

3. Use the Eraser tool to erase the parts of the rectangles that extend
beyond the lines you just drew. Then use the Line tool to draw a verti-
cal line as shown in Figure 5.

Figure 5: Use the Eraser tool to delete some parts of the figure
and use the Line tool to draw a vertical line.

6   Scratch Paint Editor

4. After you use the Ellipse tool to create a circle, create an identical
copy of this circle with the Stamp tool. Move the two circles to be the
wheels of your vehicle, as shown in Figure 6.

Figure 6: Use the Ellipse and Stamp tools to create two tires.

5. Use the Eraser tool to clean up the horizontal lines inside the circles,
as shown in Figure 7.

Figure 7: Use the Eraser tool to erase the lines inside the wheels.

6. Using the Line, Circle, and Stamp tools, finish the drawing as shown in
Figure 8.

Figure 8: Use the Line, Circle, and Stamp tools to add the finishing touches.

Scratch Paint Editor   7

 7. Using the Fill tool, color the truck in any way you like. My finished
drawing is shown in Figure 9.

Figure 9: Color the car using the Fill tool.

Vector Mode
Let’s now learn how to draw in vector mode. Start by clicking the Paint new
sprite button in the Sprite List area to create a new sprite. The Paint Editor
will start in the default bitmap mode, so click the Convert to vector but-
ton at the bottom-right corner of the Paint Editor. The editor should now
appear as shown in Figure 10.

Toolbar

Current mode

Figure 10: Scratch’s Paint Editor in vector mode

8   Scratch Paint Editor

Toolbar
The toolbar now appears at the right side of the Paint Editor, and the but-
tons in this toolbar are different from the bitmap buttons. Table 4 describes
these buttons. Note that some of the buttons in Table 4 only show up when
an object (or a group of objects) is selected.

Table 4: Toolbar Buttons in Vector Mode

Icon Function Description

Select Use this tool to move, resize, or rotate objects. When you
click an object, a box appears around it, as illustrated in
the following figure.

Use this handle to rotate the object.

Use these handles to resize the object.

Use this to move the object.

To rotate the object around its center (the small green cir-
cle in the figure), grab and drag the small, gray circle of the
selection box. You can resize the object by dragging any
of the small square boxes around the edges of the object.
When you move the mouse close to the object’s center, the
mouse pointer changes to a hand cursor, which allows you
to move the object around the Canvas. You can also move
a selected object using the keyboard arrow keys.
Click and drag the mouse over multiple objects to select
them all at once. You can also shift-click to add an object
to (or remove it from) a selection. Press the delete key to
delete the selected object(s).
Reshape Use this tool to change the shape of an object. Select the
object you want to reshape, and a set of control points will
appear on the object’s perimeter, as shown below.
Control point
Click and drag
the control points
to reshape the
object.

The control points can be used to reshape the object.

You can create additional control points by clicking the
object’s perimeter. To delete a control point, click it with-
out moving it.
The Smooth button that appears in the options area lets
you remove sharp edges from the shape’s outline.

(continued)

Scratch Paint Editor   9

 Icon Function Description
Pencil This tool is similar to the Brush tool in the bitmap mode.
Hold down the mouse cursor and move it to scribble a
curve on the Canvas. The curve is defined by a set of con-
trol points (rather than pixels), which you can change with
the Reshape tool, as illustrated below.
The letter L drawn with
the Pencil tool

You can refine the curve

using the control points.

Line A line is defined by the two control points at its two ends.
To draw a line, click the mouse where you want the line to
start and drag it to the endpoint. To create a horizontal or
vertical line, press shift while dragging the mouse.
To draw a curved line, start with a straight line. Then
using the Reshape tool, shift-click anywhere on the line
to create a new control point. Drag the new control point to
create and shape your curve.

Rectangle Use this tool to draw rectangles using the current fore-
ground color. Click to mark the first corner and drag (shift-
drag for a square) until the shape is the size you want. You
can change the fill style (solid or outlined) and the outline
thickness using the buttons in the options area. The resulting
rectangle has four control points, one at each corner.
Ellipse Use this tool to draw ellipses using the current foreground
color. Click where you want to draw the ellipse, and drag
(shift-drag for a circle) to the size you want. You can change
the fill style (solid or outlined) and the outline thickness
using the buttons in the options area.
Text Select this tool, click anywhere on the Canvas, and enter
the text you want where the cursor appears. When you’re
done, click outside the text area. The Select tool will auto-
matically select your text so you can change its size and
orientation.
Unlike text in bitmap mode, vector-mode text can be
edited anytime, even after you exit the Paint Editor. Just
select the text box and edit its contents.
Color Use this tool to fill the interior or the outline of an object.
This works differently from bitmap mode, where the tool
fills connected regions. After selecting this tool, click on the
outline or interior of any object to fill it with the current fore-
ground (or gradient) color.

10   Scratch Paint Editor

 Icon Function Description
Duplicate After selecting this tool, click on the object (or group)
you want to duplicate. The duplicate will automatically
be selected, allowing you to move it wherever you want.
shift-click to create multiple copies.

Forward When you have multiple objects in your drawing, they

can appear in front of or behind one another. This tool
lets you move an object (or a group) one layer to the front.
shift-click to bring the object in front of all other objects in
the drawing.

Select this object

and click the
Forward button
to bring it to the
front.

Back This button is similar to the Forward button, but it moves the
selected object (or group) back one layer. shift-click to send
the object behind all other objects in the drawing.
Group Use this tool to group multiple objects so that they will stay
together if they are moved. Click and drag over the objects
to select them, and then click this button to create the group.
Ungroup When you select a group, this button becomes visible,
allowing you to ungroup the objects.

More on the Reshape Tool

The Reshape tool has some other handy features. For example, you can
shift-click a straight line segment to create a curved segment. Similarly, you
can shift-click a curved segment to create a straight segment, as shown in
Figure 11.
SHIFT-click
a straight segment
to create a curved segment

SHIFT-click
a curved segment
to create a straight segment

Figure 11: Using shift-click to create straight and curved segments

Scratch Paint Editor   11

 You can also merge two segments by connecting their endpoints. The
resulting segment will have the color and thickness of the segment whose
control point has been dragged to form the connection, as shown in
Figure 12.

Figure 12: Merging segments by connecting their endpoints

You can create a gap in a segment by using shift-click on a control

point without moving it, as illustrated in Figure 13. Alternatively, you can
connect the endpoints of a segment to create a closed path.

Figure 13: Breaking a connected seg-

­ment by shift-clicking a control point

Drawing in Vector Mode: Some Practice

Let’s go through a simple example that demonstrates how you can use these
tools: We’ll draw a penguin.

1. Draw two black ellipses for the body and the wings, as shown in
Figure 14.

Figure 14: Drawing the body and

the wings

12   Scratch Paint Editor

2. Draw another ellipse for the belly and fill it with a gradient color, as
shown in Figure 15.

Figure 15: Drawing the belly

3. Draw an ellipse for the foot. Use the Duplicate tool to create another
copy, and position the two feet as shown in Figure 16. Use the Back but-
ton to send the two feet back so that they appear to originate behind
the body.

Figure 16: Adding the feet

4. Use the Ellipse tool to draw circles for the two eyes and the pupils, as
shown in Figure 17.

Scratch Paint Editor   13

 Figure 17: Adding the eyes

5. Use the Rectangle tool to draw the beak. Reshape the rectangle as
shown in Figure 18 by dragging the control points.

Figure 18: Adding the beak

And there it is—a penguin! What else can you draw with these tools?

14   Scratch Paint Editor