Revision as of 19:33, 3 January 2019 by CrazyBoy826 (talk | contribs) (3.0 released)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

The Bitmap Editor
The Vector Editor

The Scratch Paint Editor is Scratch's built-in image editor. Many Scratchers create their own sprites and backdrops using it. These images can be used in many ways, each having its own impact on its project. This is one of the features that makes Scratch different from many other programming tools, because many others do not provide a built-in image creator.

The Paint Editor utilizes both vector graphics and raster graphics (bitmap graphics). Vector graphics, unlike bitmaps, store the image as rules rather than an array of pixels, for more smooth images in any stage size.

Note Note: This article mentions "costumes" often, but almost all of the information applies to backdrops, too.

Types of Graphics

Vector Graphics

Main article: Vector Graphics

Vector graphics make drawings look much smoother, as colors are stored in shapes instead of pixels, but are often slightly more difficult to draw with compared to the bitmap editor. The pen tool renders a spline (mathematical curve) through a set of control points. The control points can be dragged later on to modify a shape, so getting a complex organic shape to look perfect is simpler. Objects can be manipulated individually, too, so one can stretch and rotate one element separately (or group multiple elements to do these operations collectively). Vector graphics also have greater clarity and resolution due to anti-aliasing, and usually have smaller file sizes. The less splines that make up a vector image, the lesser the file size will typically be.

Objects

Contrary to bitmap graphic's "pixels", vector graphics use "objects". Objects are modifiable whole parts of a vector image; they consist of the building-blocks of vector, control points and splines. Objects can have many parts and various colors to their style. They can even be grouped together or broken apart into multiple objects. In more advanced terminology, an object is a linkage of splines or groups of splines into one united piece.

Bitmap Graphics

Main article: Raster Graphics

Bitmap graphics, also known as raster graphics, are both saved and modified differently. Unlike vector graphics, bitmap graphics store images as arrays of pixels in a grid formation. Bitmap graphics do not anti-alias, but can still render transparency. The various file formats a bitmap image is saved in determines its quality and file size. A lower quality bitmap image stores less data on an image, also known as compression. Bitmap images, though, are helpful for creating pixel-perfect images mathematically aligned.

Why Vector Graphics Appear Smoother

The difference in a vector and bitmap circle.

Even though they're being displayed on a screen of the same resolution and pixel density, vector graphics look much smoother than bitmap. It's because in vector the edges of lines and objects gradually become more transparent, fading into the background or layer behind, which is called anti-aliasing. For example, if one draws a black circle on a white background in Scratch 1.4, the edges will look very bumpy. However, in vector they appear smooth because the edges of the circle fade out into the white background, or in this case gradually become lighter colored. The difference between vector and bitmap graphics can be demonstrated through the following steps:

  • Draw a circle in the vector paint editor
  • Right-click on the costume logo in the pane
  • Save the costume to a local file
  • Open up a bitmap paint editor outside of Scratch (ex. MS Paint)
  • Import the circle into it
  • Draw a circle in bitmap
  • Zoom in to view the difference
Note Note: Some bitmap paint editors create figures that appear similar to or as smooth as vector graphics; however, when zoomed in they will not stay smooth looking but will instead be pixelated.

Spline-Based Shapes

Splines are mathematical curves through a set of control points. Each spline is proportional to one another by some value. The vector editor is highly dependent on the spline tool, which allows one to create and modify splines. This allows for smoother drawing and easier editing, but disallows bitmap editing capabilities. There is an option to convert to bitmap, too, which will remove the splines.

The Scratch vector editor does not allow objects to have branching splines. For example, two splines cannot extend from one control point; the splines must connect from one point directly to only one other. Due to this incapability, creating, for example, tree branches may be difficult without making and merging many separate branch objects.

Splines can have curvature to them without squeezing many control points to create the illusion of a curve. The splines can have mathematical curves that give them a realistic sense. The vector circle tool uses mathematics to create the smooth curvature of a circle. Most professional 3D games have "circles" made of octagonal or more-sided shapes, as seen when close up. The 2D vector graphics in Scratch avoid this restriction.

Vector Editor

The vector editor is the default editor. The vector editor utilizes vector graphics with its specialized tools. The tools vary from the bitmap editor's, but there are same ones, too. These tools can function differently, though, such as the #Paint Bucket. One benefit of using the vector editor is the capability to design various parts of an image separately and then join them all together.

When the vector editor is in use, objects have the ability to extend off the canvas, or "drawing area" of the paint editor. This allows vector costumes and backdrops to have a greater resolution than 480x360, though resolution is less important in vector graphics. The bitmap editor prohibits any pixels outside of the canvas, one downside and restriction of it.

Bitmap Editor

The paint editor is switchable between both the vector and bitmap editor. It was the default editor in 2.0 and earlier. When you switch from bitmap to vector, what was created in bitmap will stay in bitmap since the paint editor can not convert the previous drawings into spline-based shapes. However, some external programs can use tracers to render a vector image based on patterns in a bitmap image. Also, when a drawing made in another program is imported into a project it will be in bitmap. When viewing a bitmap sprite or backdrop in full screen they appear pixelated.

Bitmap and Vector Comparison

Both paint editors have their own advantages. The bitmap editor tends to be easier to use, while the vector editor can be complicated in certain tasks, such as the Paint Bucket Tool, although it makes images look more professional. In the bitmap editor, one can fill any closed area; in the vector editor, one must first draw a polygon connecting from a starting point and back to that point and then fill it in. If multiple objects are placed next together and form a closed in area, that area cannot be filled in in the vector editor because it's not one shape from a starting point to that same point. However, the vector graphics look much more smooth when complete and especially in full screen mode. They are also more beneficial for bending or stretching shapes with the Reshape Tool. One can also move text boxes in vector mode, while in bitmap only once.

Paint Editor Conversion

At the bottom-right of the paint editor is the option to switch to the other (bitmap or vector) editor. When converting the images to the new editor, or new format, the program has to manipulate them.

Converting Bitmap to Vector

When converting a bitmap image to the vector editor, the entire bitmap image becomes one united, single object in the vector editor. It contains its bitmap appearance, but the difference is when resizing the converted bitmap image. The vector editor resizes all objects differently than the bitmap editor, often more accurately to the original display. Any shapes converted from bitmap to vector do not transform into a vector shape or obtain splines; the program reads it as before.

Converting Vector to Bitmap

The option to convert to the bitmap editor.

When converting a vector image to bitmap, any objects that extend off the canvas will no longer be included; only a 480x360 resolution image can be created at maximum in the bitmap editor. Unlike from bitmap to vector, vector graphics lose the properties that are unique to them. Specifically, anti-aliasing (for more information, read the section Why Vector Graphics Appear Smoother) is removed. Therefore, a smooth vector object may become very jagged and pixelated in appearance.

Note Caution: After converting from vector to bitmap, converting back to vector will not retain the vector properties as the objects had before; however, undoing will bring back the properties.

Costume Pane

The costume pane.
Main article: Costume Pane

The left-most part of the paint editor is the costume pane. It consists of the buttons for creating new costumes as well as icons for each costume. In the costume pane, each costume of the selected sprite is listed. To edit the different costumes in the paint editor, simply click on the desired costume from the pane. The pane can even scroll if there are too many costumes to vertically fit its size.

Switching Between Costumes

Creating New Costumes (or Backdrops)

At the bottom of the costume pane there is a blue cat icon. Hover over it and four options will pop up. You can choose a sprite from the library, draw your own, upload it from your computer, take a picture, or choose a surprise costume.

Switching Among Costumes/Backdrops

In the costume pane, the currently selected costume has a blue box around it and you can see a "x" button on it. The canvas of the paint editor only displays the currently selected costume. To access the different costumes of a sprite, simply click on the thumbnail of the desired costume from the costumes pane. Then, the canvas will display the newly selected costume and allow for its modification.

The advanced color palette.

Common Options

These are all located above the costume. All of these are common to both the vector and bitmap editors.

Changing Colors

The Scratch paint editor has a color dropdown that has three sliders that can be used to select colors: color, saturation (how opaque something is), and brightness. It is found in the middle-left side of the editor.

Two Colors

Above the three sliders, there are four options. These allow you to blend an area between the two selected colors. Selecting "Swap" at the bottom switches the two colors' orders.

Color

Changing the color slider changes the hue of the color (for example, from red to blue). This tool is the most used, as it has the largest difference between colors.

Saturation

The saturation of a color is how transparent it is: 0 saturation is completely transparent, 50 saturation is partially see-through, and 100 saturation is opaque (blocks the view of other objects behind it).

Brightness

This option changes low light or dark the color is. The left is completely black, while the right is the selected color.

Picking Up a Color

At the bottom right, there is an icon that allows you to pick up a color from the costume. It will magnify the costume when the mouse-pointer is on it. Click to select a color.

Changing Pen Size

In the middle of the paint editor is the pen size bar. It is marked by a paintbrush icon. There is an input to select the pen size.

Naming Costumes

To name a costume, just click on the text bar at the top-left of the paint editor and enter the new name. The name of the costume is important for organization and also in programming the project at times. It is best not to name costumes as just numbers without any other characters because it causes confusion with the costume blocks; this is due to each costume having both a name and numerical order value in the costumes pane, so switching to costume "2" could mess up if the third costume was named "2".

Copying and Pasting

To the right of the outlines there are two options: copy and paste. The copy option copies the region that is selected, while the paste puts it somewhere else. This is especially useful when one needs to duplicate an item. You can also do this by dragging a costume in the costume pane to another sprite's icon, dragging a sprite icon into another sprite's costume pane, or dragging the costume in the pane right into the selected costume.

Vector-only Options

These options are unique to the vector editor and are not found in the bitmap editor.

Precise Object Movement

In the vector editor, when an object is selected, the arrow keys can be used to move it precisely one pixel. In the bitmap editor, a section grabbed with the select tool can also be moved with the arrow keys. This can be useful for making exact, precise measurements or aligning objects in an organized, structural pattern.

Outlines

To the right of the color dropdown, there is a dropdown that changes the outlines of objects. It also has the three sliders; however, you cannot blend two colors in currently. To the right of that dropdown is an input to select the thickness of the outline.

Layers

The layering of Giga in front of Nano.

The paint editor also includes the feature of layering objects in the vector editor. Layering objects is placing them in front or behind one another. At the top-right will be four buttons which allow you to layer objects in front or behind another. On the lect side, Forward and Backward move objects one layer at a time, while Front and Back move them to the very front or back, in front of or behind all other objects in that costume.

Note Note: You can only layer objects, not individual splines.

Grouping

When there are many objects that you need to move at once, it can be useful to group them. Use the select tool to select a specific region of the costume, and click group. These objects are now one object and can be moved together. The ungroup button does the opposite; one grouped item selected can be broken up into smaller portions.

Note Note: When you group objects, it does not take away the splines of the objects; they can still be modified

Horizontal and Vertical Flipping

From left to right, top to bottom: No flip, horizontal flip, vertical flip, horizontal and vertical flip.

When you select an object, there is the option to horizontally and/or vertically flip it. Flipping objects makes a reverse image of it. In advanced terms, when an object is flipped, it takes each pixel and sets it in the opposite location of a center with the origin of (0,0). At the bottom right are two similar looking buttons (they are two arrows pointing to a line). The one on the left flips the selected object horizontally, and the one on the right vertically.

Curved/Pointed

When using the reshape tool, there will be two options to the right of the outlines that makes the splines either curved, like a circle, or pointed, like a rectangle. This is useful when creating shapes with both curved and pointed edges. This only works if a spline is shift-clicked first.

Vector Tools

Vector tools, unlike bitmap, create splines instead of an array of pixels to store costumes and backdrops. Many of the tools, though, work in a very similar style. They are found to the left of the costume.

Select

The first tool, the mouse-pointer tool is used for modifying the location of an object, stretching or compressing it, or rotating it. When an object is selected with this tool by mouse-click, a blue box will appear around it and the object can be moved by grabbing the center and moving the mouse. Rotation is accomplished by dragging the two small arrows below the box. The object rotates in relation from the object's center to the rotation circle's position. Lastly, objects can be stretched and compressed with the measurement boxes that appear on the outer edge of the selection box.

Note Note: to select multiple, ungrouped objects as a whole, click the mouse in a blank area and a box will drag around the desired area; then all objects within will be selected.

Reshape Tool

An image, edited with the reshape tool.

This tool is used for bending or changing the shapes of a spline in the editor by grabbing the points with the mouse and moving them around. In Scratch 2.0 and earlier, there was a "Smooth" button that removed some splines.

  • Click on a spline without moving it to remove it.
  • Shift-click a spline to select it and use the curved/pointed feature.
  • If you have a closed shape that is filled in, if you break the shape (open the polygon) the fill color will go away.
  • You can remove the spline you are editing with the delete key or backspace key.
  • Click on a line or border of a shape where there is no point to add one.
  • If you shift-click on a line or border where there is no point, it will add curved segment on a straight segment or a straight segment on a curved segment.
  • Moving an endpoint of one closed shape to another will merge them, causing them to have the same thickness and color.
  • You can connect the endpoints of shapes to close-in and combine them. The center of the object can now be filled in with a color.

Spline Tool (Drawing)

The spline tool acts as the paint brush tool for the vector editor. However, instead of creating pen marks on the canvas like in bitmap, it creates splines, mathematically calculated and stored shapes, which will not become pixelated and can be modified using the reshape tool. To draw, hold down the mouse on the canvas. Drawing from an existing point on an existing spline will automatically match the size and color to the existing spline and also connect the splines together.

Eraser

The eraser pushes splines within its range outside of the circled area. This tool was first introduced in Scratch 3.0. It is different than the bitmap eraser tool because it leaves an outline.

Paint Bucket

The paint bucket tool can often be confusing because instead of filling in a region it only fills in vector objects or the outline of a vector object. For example, you cannot fill in the blank background of a costume or backdrop with the paint bucket in vector because it is not an object. When the paint bucket is selected, click on any object's interior or outline to manipulate the color to the currently selected one.

Note Note: One cannot fill in any closed area with the vector paint bucket because it must be an object. When filling in backgrounds, it may be best to perform the action in the bitmap editor first and then switch to vector.

In bitmap, any region, closed or unclosed to the background, or the borders themselves, may be filled, but in the vector editor the splines must be connected into a uniform, closed-in object (when filling the interior).

Text Tool

The fonts in the vector editor.

The text tool is used to type characters onto the canvas, which can be resized after completion. To type text, click anywhere on the canvas; when a cursor appears, begin typing. One can set the horizontal and vertical boundaries of text by moving the resolution boxes that appear around the text box. Click on a blank area to exit the text editor once finished. To resize the text afterward, select it with the mouse-pointer and drag the measurement boxes to have the text reach the desired size. Text can be edited after exiting the text editor by clicking on existing text with the text tool.

The Text Tool has nine available fonts available in the bottom-left of the paint editor to select from: Sans Serif, Serif, Handwriting, Marker, Curly, Pixel, 中文, and two others. More fonts can be obtained using Google Drawings by making a drawing, typing the desired text in, choosing the font, downloading the image, then importing the image into the desired sprite in Scratch and resizing or moving the text to fit one's need.

Line Tool

The line tool is used for drawing straight lines in the vector editor. A line consists of two points of the spline: one in the beginning and one at the end. To draw a line, click and hold the mouse, and release to draw the line from the starting point of the mouse-click to the release point.

Note Note: to draw a curved line, you must first draw a straight line, select the reshape tool, and shift-click anywhere on the line to create a new point which forms a curve on the line.

Oval Tool (Circle)

The circle tool is used to draw ovals or perfect circles. This can be done by clicking and holding the mouse on the canvas. Then, an oval will form in relation to the mouse's starting and ending coordinates. To draw a perfect circle, hold the shift key while drawing with the oval tool.

Rectangle Tool (Square)

The rectangle tool is used to create a geometric rectangle (4-sided with right-angle corners). When the tool is selected, the rectangle can be drawn clicking and holding down the mouse-pointer, then releasing. The rectangle has four points on it, each at a corner.

Bitmap Tools

The bitmap editor's tools are similar to the vector editor's, but instead use a grid of pixels on a region instead of spline creation. All the bitmap tool icons are pixelated.

Paint Brush

The paint brush is a tool simply for drawing wherever the mouse-pointer is clicked. The color and size modify the display of the paint brush's pen marks. To change the brush's size, simply go to the slider at the bottom left-hand corner and change it to your desired size.

Line Tool

The line tool is used for drawing straight lines. Prior to Scratch 3.0, holding shift would make the line perfectly horizontal or vertical. There was a bug with the shift feature where the line actually ended up where the mouse-pointer was, not perfectly straight.

Oval Tool (Circle)

The oval tool, commonly known as the "circle" or "ellipse" tool, is used for creating ovals of any shape and size. Just like the rectangle tool, when the oval tool is selected there will be two buttons in the bottom-left of the paint editor. The first is used to create an oval with a hollow center, and the adjacent one is used to create a solid, filled-in oval. The oval tool can also create perfect circles by holding down the shift key while drawing.

Note Note: The oval tool icon is actually an octogon, because of how the image was pixelated.

Rectangle Tool (Square)

The rectangle tool, commonly known as the "square tool", is used for drawing rectangles (4-sided, geometric shape with all right angles). These rectangles can either be solid or transparent in the center. When the tool is selected, to the right of the color selection will be two buttons, one consisting of a hollow rectangle, and one consisting of a solid one. By default, the hollow one is selected. This means that any drawn rectangle will have an open, see-through center. If the button consisting of the solid rectangle is selected, the drawn rectangle will be one solid mass.

Text Tool

The nine usable fonts

The text tool is used for typing text into a costume or backdrop. When the tool is selected, click anywhere on the canvas for a cursor to appear. Then, you can type in a desired text. To modify the size of the text, you must drag the small size buttons (tiny squares) to the desired measurement. You can also, with these buttons, stretch and compress your text, but this can only be done after finishing typing. However, you can only resize the text once. When typing, the text appears just like vector, but when the text is deselected, the words become pixelated. There are nine different fonts available in the lower left.

In Scratch 1.4 and before, fonts were loaded from the computer, which meant that the user could choose to use any font they please. However, this was removed in Scratch 2.0, as it included an online editor that could not load the fonts from the computer.

Paint Bucket

The paint bucket is used to fill in any closed region of a consistent color with one solid color. This can be accomplished by clicking in the desired area on the canvas. The color spreads everywhere that has the same color on it.

Note Caution: If your shapes have small holes in them, the color will spread out of the shape. Check for any holes before using this tool.

Eraser

The eraser tool is used to remove (or erase) a clicked area on the canvas. The colors that are erased are replaced with no color, meaning that area is see-through. Unlike the vector editor, it does not leave an outline.

Select

The select tool (formerly the screen region grabber) is used to grab an area on the canvas and relocate, stretch and compress, or modify it in some way. This can be done by clicking and dragging around the desired area. Then, a blue box will appear around that area. If you grab the center of the dotted box with the mouse, you can move the section around. Also, you can stretch and compress it with the measurement boxes that appear around the outside. Rotate the section with the blue arrows located below the selected region.

The vector editor tools

Helpful Tips and Hints

  • The resolutions (width by height in pixels) of your costumes and backdrops are shown underneath the costume names in the costume pane.
  • Costumes and backdrops can be renamed at the top by typing in the text box.
  • To zoom in or out, click on the magnifying glass tools in the bottom-right. The one with the "+" zooms in and the one with "–" zooms out. The button between them sets the zoom to 100%. Zooming in when drawing can help to create smoother lines than when zoomed out.
  • If you make a mistake, you can click the undo or redo button at the top.
    • ctrl-z or cmnd-z is a shortcut for undoing
  • To delete a costume, click on the "x" located at the top-right of the icon, or right-click or shift-click on the costume's icon in the costume pane and select "delete".
  • To duplicate a costume, right-click the desired costume thumbnail. From the pop-up menu, select "Duplicate".
  • To place costumes and backdrops in a desired order, drag their icons to another location in the costume pane.
  • To fill in the background of a costume or backdrop in the vector editor, create a large rectangle around the borders of the editor, and then fill the space and edges in with the desired color using the paint bucket tool.
  • Objects and pixels can be placed or drawn outside of the canvas in vector mode, although they may be cut off, as in backdrops, on the stage.
  • To break the stage edges in Scratch 2.0, meaning for a sprite to move freely past the borders, create four vector shapes, fill them transparently, and drag them to each outermost edge of the canvas. Doing so will not physically allow the sprite to move at an infinite location off the stage but far enough to remain unseen, portraying the same sense.

Example Uses

  • Simply to draw something
  • Attach one image to another image
  • Resize an image
  • Censor content, such as the user's face

History

See also: Scratch Update History

The following table provides a list of publicly announced updates to the paint editor mainly on the forums. There are many other edits unspecified directly by the Scratch Team.

Year Month Day Update(s)
2019 January 2 Paint editor updated to Scratch 3.0. The information on this page is about this version. All previous information can be found at Paint Editor (2.0).

See Also

References

Cookies help us deliver our services. By using our services, you agree to our use of cookies.