MIT SCRATCH COURSE
paint editor
Paint editor
Use the Paint editor to create your own backdrops and costumes, and to edit existing backdrops and costumes.
Create a new backdrop in the Paint editor
Go to the Choose a Backdrop menu and click on Paint:
You will be taken to the Paint editor, where the new backdrop will be highlighted in the list. If you have other backdrops in your project, you will also see them in the list.
To set the main colour of the backdrop, click on the Rectangle tool, then use the Fill colour chooser to select a colour, then drag the shape over the full backdrop canvas:
If you want to add more details to your backdrop, you can use the Rectangle tool, Circle tool, or Brush tool, or a combination of all three!
When you have finished, make sure that you give your new backdrop a name that makes sense:
Your new backdrop will be shown on the Stage and will be available to use in Looks blocks.
Create backdrops and sprites using shapes
You can create backdrops and costumes for sprites in the Paint editor, using just shapes.
Go to the Choose a Sprite or Choose a Backdrop menu and choose the Paint option:
Select which tool(s) to use to make the shape(s) that you want:
- Circle: Click on the Circle tool to draw a circle. Press and hold the Shift key on your keyboard to draw a perfect circle.
- Rectangle: Click on the Rectangle tool to draw a rectangle. Press and hold the Shift key to draw a square.
- Triangle: Use the Rectangle tool to draw a rectangle or a square. Click on the Reshape tool and select the corner that you want to remove. Click on the Delete tool to turn your shape into a triangle.
You can use the Fill tool to change the colour of a shape:
You may need to use the Forward and Backward tools to move your shapes forward or backward so that they are positioned correctly within your image:
You can select all the shapes and Group them together so that you can adjust them or move them as one shape:
Here is an example of a sprite created with the Circle and Rectangle tools:
Pig: See inside
Remember to name the costumes and backdrops that you create in the Paint editor.
Use the Text tool
Click on the Fill colour chooser and select the colour that you want for your text:
Select the Text tool:
Click on the Paint editor and start typing.
Click on the Font drop-down menu and select the font that you want:
If you want to resize your text, click on the Select (Arrow) tool and select the text, then drag the corner handles to resize the text:
If you want to change the Fill colour of your text, use the Fill colour chooser to select a colour, then select the Fill (Bucket) tool and hold your mouse cursor over the text (or if you are using a tablet, tap the text). The text will automatically change colour. Click on the text to make the change:
If you want each word in a message to be a different colour, size, and font, follow the process above for each word in your message.
Position your text and/or group of words with the crosshair in the centre of the Paint editor:
To layer your words, use the Forward and Backward tools:
Add a costume to a sprite
Click on the Costumes tab and then on Choose a Costume to add any costume to the sprite from the Costume Library:
You will need to position and resize the added costume in the Paint editor, to match the sprite’s other costumes.
Tip: If you position a sprite on the Stage and then change its costume, the sprite might appear to ‘jump’ or change size. You will need to position and resize the costumes in the Paint editor so that they all appear in the right position on the Stage.
Centre your costumes
Sprites rotate around their centre. You can see if your sprite is centred by looking at the small grey crosshair shown in the Paint editor:
If the crosshair is not at the centre of your costume, you can use the Select tool to highlight the full costume. A cross will then show in the centre of your highlighted costume:
You can drag the highlighted costume so that the cross in the costume aligns with the crosshair:
Occasionally, you might want to choose a point to rotate around that is not the centre of the costume. In that case, you can align your chosen costume rotation point with the crosshair in the Paint editor:
Copy parts between sprite costumes
Click on the Costumes tab for your sprite.
Tip: Duplicate the costume that you want to edit — so that you can still use the original costume if you need to. To do this, right-click (or on a tablet, tap and hold) on the costume and choose duplicate. You will now have a copy of the costume:
To remove any part of the costume that you do not need any more, click on the part to select it, then click on Delete:
The duplicated costume with parts removed should look something like this:
Tip: If you make a mistake in the Paint editor, you can click on Undo: 
Go to the costume with the part that you want to add and click on the part that you need, then click on Copy:
If you want to add a part from a costume that is not already shown in the Costumes tab, you need to add the costume to your sprite first. Click on the Choose a Costume icon, then find the costume that you want and click on it to add it to your sprite:
When you have copied the part that you need, go back to the duplicated costume and click on Paste. The duplicated costume should now look something like this:
Now, switch to the Code tab. You will be able to use the new costume in your code blocks:
Duplicate and edit a costume to use in an animation
Some Scratch sprites just have one costume, or have multiple costumes that don’t work as an animation. If you choose one costume, then duplicate it (make a copy of it) and make a small change, it can create an animation effect.
Robot animation: See inside
Switch to the Costumes tab for your sprite.
Choose the costume that you want to use, and delete the other costumes, because you will not need them for your animation. For example, the Robot sprite comes with costumes for three different robots, so you should choose one of the costumes and delete the other costumes.
Right-click (or on a tablet, tap and hold) on the costume, and choose duplicate.
Make small changes to the copy of the costume. For example, you can move, rotate, or change all or part of the costume. You can also add movement lines.
If your costume uses vector graphics, then you can select parts of a costume and change each part separately.
You can duplicate the costume again and make more changes to add more frames to your animation.
You can now use your costumes in a simple sprite animation.
Use the Fill tool to change the colours in a costume
You can change the colour of your sprite. First, select your sprite in the Sprite list below the Stage and then click on the Costumes tab.
Use the Select (Arrow) tool to highlight the part of the costume you want to change colour.
Go to the Fill colour chooser and select a colour. It will automatically fill the shape that you have selected.
Repeat the steps above for any part of the costume that you have missed, or for any other part of the costume you want to change colour.
Use the tips below to help you to create your own designs for your sprites in the Paint editor.
Create scenery as sprites
Hill as a sprite: See inside
To make your own Hill sprite, shown in the example above, you can use the Circle and Rectangle tools in the Paint editor:
- Go to Choose a Sprite and select Paint to create a new sprite costume.
-
Choose a Fill colour. Click on Outline and deselect it (to do this, click on the box with the diagonal line in the bottom left-hand corner of the menu). Now, use the Circle tool to draw an oval. Then, select the Rectangle tool and draw a rectangle underneath the oval.
-
If you use varying colours for the shapes, you may need to use the Front and Back tools in the Paint editor to move your shapes forward or backward so that they are positioned correctly within your background.
-
You can select all the shapes and Group them together so that you can adjust them or move them as one shape.
Now, make other sprites for your scenery, if this fits in with your project idea.
Remember to name your sprite(s).
Use the Line tool to create a triangle
You can create polygons, such as a triangle, and use these shapes to create roofs or mountains.
Go to Choose a Sprite and select Paint to create a new sprite costume. In this example, you will make houses.
House: See inside
If you follow the instructions below, you can use the Line tool to create any shape:
- Choose a Fill colour. To choose the colour black, decrease the Brightness to zero (
0).
- Select No outline.
- Use the Rectangle tool to draw a rectangle.
- Use the Line tool to draw a triangle. Make sure that you complete the triangle, otherwise it will not fill with colour.
- Move the two shapes together.
- Select the Fill (Bucket) tool and fill the triangle with colour.
- Use the Rectangle tool to draw another rectangle for the chimney.
- You can use the Front and Back tools in the Paint editor to move your shapes forward or backward so that they are positioned correctly. In this example, you will not need to do this, because the shapes are black to make a silhouette.
- Select all the shapes and Group them together so that you can adjust them or move them as one shape.
To create duplicate shapes of your house (for example, to make a skyline), follow the tips under Duplicate shapes to create a scenery costume below.
Duplicate shapes to create a scenery costume
You may want to duplicate shapes within a costume so that your scenery appears busier or more crowded.
Multiple clouds: See inside
The effect of multiplying shapes is used by professional animators to create the impression of weather patterns, such as rain or clouds; a cluster of objects, such as buildings or a wood; or a crowd of people in a scene.
To multiply any type of shape:
- Go to Choose a Sprite and select, in this example, the Cloud sprite
- In the Costumes tab, use the Select tool to highlight the whole of the shape
- Use the Copy and Paste tools to create duplicates of the shape
- Use the Select tool to move the shape within the Paint editor
- You can vary the size of the shapes to help to create a greater sense of 3D effects, for example
- You can select all the shapes and Group them together, so that you can adjust them or move them as one shape
Use Saturation and Brightness to create depth
In the real world, objects that are further away appear lighter in colour. To achieve more realistic 3D scenery, you can decrease the colour Saturation and/or Brightness of each sprite so that they appear further and further away.
Create a sprite with gaps that you can see through
You can create a sprite that has gaps that you can see through. If it is positioned as the front layer and is the size of the Stage, it can appear like a view through the bars of a cage or a window.
Caged lion: See inside
To create a type of masking sprite:
- Go to Choose a Sprite and select Paint
- Choose a Fill colour with no Outline and draw a vertical rectangle
- Use the Copy and Paste tools to repeat this shape
- Use the Select tool to move the shapes around
- As you place your shapes, make sure that they are touching the edge of the Stage to fit in with your project idea
Tip: If you find it hard to manage the sprites on your Stage, such as having a large sprite that keeps covering a much smaller one, you can click on Hide so that you don’t see a sprite or sprites. Then, when you have finished, click on Show again.
