From Test-Scratch-Wiki

This article or section documents an outdated version of Scratch (version 2.0). For this article in Scratch 1.4, see Eng:Paint Editor (1.4).
The Bitmap Editor
The Vector Editor

The Scratch Paint Editor is Scratch's built-in image editor. Many Scratchers create their own sprites, costumes, 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 nicer but are slightly more difficult to draw with compared to the [[Eng:#Bitmap Editor|bitmap editor]]. The new 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 [[Eng:#Grouping|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. Why is this? 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. You can visualize close up the difference in a vector and bitmap circle by doing 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 [[Eng:#Vector Editor|vector editor]] is highly dependent on the [[Eng:#Spline Tool|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 [[Eng:#Converting from Vector to Bitmap|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 [[Eng:#Oval_Tool_.28Circle.29_2|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.

Bitmap Editor

The paint editor is switchable between both the vector and bitmap editor. The bitmap editor is the default editor when creating a new sprite because the Scratch Team thought it was easier for new users to understand. [citation needed] 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.

Vector Editor

The vector editor is not the default editor, but can be converted to with the "Convert to vector" button in the bottom-right. The vector editor utilizes [[Eng:#Vector Graphics|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 [[Eng:#Paint Bucket|#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. Unfortunately, the canvas cannot scroll in the vector editor, so accessing and precisely placing objects can be difficult due to the lack of visualizing their positions.

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 [[Eng:#Paint Bucket|Paint Bucket Tool]]. In the bitmap editor, you can fill any closed area; in the vector editor, you 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 its 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 [[Eng:#Reshape Tool|Reshape Tool]].

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 [[Eng:#Creating New Costumes (or backdrops)|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.

Why does the Scratch Cat Always Show Up on the Costume Bar? The Scratch Cat is automatically set up on a project page, but you can delete it by simply pressing the delete button on the top right hand corner, if you hover on that sprite.

Basic Options

Creating New Costumes (or Backdrops)

There are four ways to create a new costume or backdrop within the paint editor:

  • Draw your own in the paint editor
  • Select an image from Scratch's default sprites and backdrops library
  • Import from a local file on your computer (ex. import a downloaded or externally drawn image)
  • Plug your digital camera into your computer with a USB drive and take a picture

Switching Among Costumes/Backdrops

On the left-hand side of the paint editor is a scrollable list, the costumes pane, displaying the thumbnails of each costume in the selected sprite. 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.

Selecting a Color

Main article: Color Palette


The Scratch paint editor features two color boxes used for switching to and from stored colors. When a new color is selected, it will replace the color in the currently selected color box. The currently selected color box always appears in the front. To select the other one, just click on it. Scratch also uses two color boxes for use in merging colors in such cases as [[Eng:#Gradients and Transparency|gradients]].

There are two ways to select a color:

  • select one from the color palette
  • use the Color Picker to select a color already on the drawing

The color palette is the boxes with varying colors at the bottom of the paint editor. Those are the default colors in which you can quickly select. For more advanced colors, click on the small box with the color scheme, and the color palette will change to one with thousands of more colors. You select a color in the same way, just click on a spot in the palette. Near the top of the palette are more less saturated colors (grayish, colorless). To change the value (lightness/darkness) of your color just slide the bar on the right up or down. To go back to the basic color palette, just click on the small box displaying it.

The color picker can also be used to select a color. It is located at the bottom of the paint editor and appears as an eyedropper. When this is selected, click anywhere on the canvas to replace the current color to the one being clicked on. You can not select a color off the canvas.


Note Note: The top-right corner of the basic palette represents transparent. You can select "no color" in the basic color palette. It is in the top-right corner of it and has a red, diagonal slash across the small box. If a mixed bucket color is used with it, the color will become transparent.

Changing Pen Size

In the bottom-left of the paint editor is the pen size bar. The left end of the size bar is the smallest size, and the right end contains the largest. The slider can be dragged horizontally to many positions to yield the proper size. A preview of the current pen size is shown above the meter, depending on the currently selected tool.

Note Note: Often, when switching between tools, the pen size will be reset.

Naming Costumes

To name a costume, just click on the text bar at the top 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".

Advanced Options

Precise Object Movement

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

Importing Into a Costume

In both paint editors, there is the option at the top, "Import", which allows you to import an image stored on your computer, external hard drive, etc., into the currently selected costume without replacing it. You can take a costume that is still currently in progress and upload a new image not as a new costume, but into the current costume itself, combining them into one image. Another alternative in the online editor only is to utilize the backpack, as dragging costumes from the backpack into the canvas will combine them into one image, too.

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. When you click on an object, on the right-hand side will be two buttons which allow you to either move that object forward or backward one layer. If you hold down the shift key while doing this, it sends the object to the very front or back. Layering objects in the paint editor acts the same as layering sprites on the stage.

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

Grouping

If you have a bunch of objects in the vector editor that are getting in the way, it can be smart to group them. What grouping does is takes multiple objects and combines them into one. It does not change the shape or color of anything, it just makes multiple objects into a standalone object. To group objects, you must first select the mouse-pointer tool and click and drag a square around the objects you want to group. A dotted box will form around the objects you boxed in. On the right side of the editor there will be a button (has a square and circle connected together) that groups those objects when clicked. After grouping objects, when that new object is selected, a similar looking button will appear on the right that allows you to ungroup the objects.

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

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 top of the paint editor are two similar looking buttons (they have a semicircle and an arrow pointing to another). The one on the left flips the selected object horizontally, and the one on the right vertically.

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

Setting the Costume Center

See also: Rotation Center

The costume center is the point where the horizontal and vertical axes meet in a costume. In basic terms, it is the center of the costume. A costume always rotates around the center of it. If a costume center is set at the corner of a square, when the object changes direction or rotates it will rotate around that point. Also, when a sprite goes to another sprite, it goes to the costume center. To change the costume center, click on the button at the top of the paint editor that has two lines crossing. Then, click on anywhere in the paint editor, and position the two lines until the intersection of them meets at the point you want at the center. There is always a light-grey cross at the costume center, even when not editing it, to help position objects correctly.

Note Note: the costume center does not automatically change to the center of the resolution of the costume like in Scratch 1.4; you have to manually change it.

To visualize the difference in costume centers, follow these steps:

  • Draw a square with the square tool
  • With the paint bucket, fill it in any color
  • Set the costume center to the middle of the square (make sure the rotation style of the sprite is free)
  • Insert the following script into the sprite:
when gf clicked
forever
turn right (3) degrees
  • click the green flag and analyze the rotation of the square
  • change the costume center to a corner of the square
  • click the green flag and analyze the difference in the rotation

Gradients and Transparency

A gradient being used for transparency.

A gradient is a combination of two colors displayed as a gradual blend of a color fading into another when a region (in bitmap) or object (in vector) of the mixture is filled with the [[Eng:#Paint Bucket|paint bucket tool]]. There are three gradient options (shown on the right): horizontal, vertical, and radial gradient fills. A horizontal gradient makes a smooth color transition from the left end to right of a fill-in. A vertical gradient creates a gradual color change from the top to bottom of the fill-in. Lastly, a radial gradient blends the colors from the location of the paint bucket tool's click and outward. There is also an option to switch back to a solid fill, which is the option in the top-left box.

Gradients can also be used for a gradual change in transparency of a costume or backdrop. If one color is set to a real color (has hue, shade, saturation) and the other is set to no-color (the color box in the [[Eng:#Basic Color Palette|basic color palette]] with the red "/"), when the gradient is painted, the area that begins with the real color will gradually become more transparent and the end that begins fully transparent with no color (see-through) will gradually become more solid and visible. An example of transparent gradient can be seen in the image on the right.

Shift/Right-Click Options

One can right-click or shift-click on the thumbnail (icon) of a costume to pull up a menu. This menu has the following options:

  • info

— brings up some of the selected sprites info as well as a checkbox for can drag in player and showing

  • duplicate

— copies the costume as a new one

  • delete

— allows the costume to be deleted and removed from the sprite

  • save to local file

— saves the sprite to the user's computer or another specified drive

  • hide\show

— will hide or show the sprite depending on whether the sprite is showing or not

The bitmap editor tools

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. The following tools go in order of top to bottom in reference of the image shown.

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. When creating a perfect horizontal or vertical line, holding the "Shift" key will create either a vertical or horizontal line, depending on which way you take the line. The bitmap editor cannot create curvature with lines, although the vector editor can using the [[Eng:#Reshape Tool|reshape tool]]. The line tool in bitmap utilizes sub-pixels, causing inconsistency with some other tools and alignment troubles often, too.

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, at the bottom-left of paint editor 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.

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.

Text Tool

The six usable fonts

The text tool is used for typing text into a costume. 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. There are six different fonts available in the lower left.

Paint Bucket

The paint bucket is used to fill in any closed region of a consistent color with either one solid color or a [[Eng:#Gradients and Transparency|gradient]]. This can be accomplished by clicking in the desired area on the canvas. You can [[Eng:#Gradients and Transparency|read more about gradients above.]]

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.

Magic Wand

File:NewTool3.png
The greyed out parts after a selection is done


Note Caution: This is a new tool and can be glitchy.

This tool, also known as the Remove Background tool, is used to select an area of the image to keep and then remove the unmarked space, this is useful for cropping images into a non-rectangular graphic. To do this, draw around the area you want to keep and the pre-removed area will be black and white. To confirm the removal of the background, switch to a new costume or pane and then switch back.

Screen Region Grabber

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 dotted box will appear around that area. If you grab the center of it 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. Lastly, you can rotate the section with the green circle located above the selected region.

Stamper

The stamper is used to duplicate a region on the canvas. When this tool is selected, the mouse is used to drag a box around the desired canvas region. Then, immediately the area within the box copies itself, which then allows you to modify it, switching to the [[Eng:#Screen region Grabber|screen region grabber tool]].

The vector editor tools

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. The following tools go in order from top to bottom of the image shown on the right.

Mouse-pointer

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, an orange box will appear around it and the objectcan be moved by grabbing the center and moving the mouse. Rotation is accomplished by grabbing and dragging the small, grey circle above the selected object. 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. You may also click on the objects one at a time while pressing the Control key.

Reshape Tool

An image, edited with the reshape tool.

This tool is used for bending or changing the shapes of a spline in the vector editor by grabbing the points with the mouse and moving them around. When an object is selected, a box at the bottom of the editor will pop up saying "Smooth" which makes any bumpy lines or curves more smooth on that object. In more technical terms, it reduces the amount of control points on the object, which can lower the file size and possibly render faster. The reshape tool has many advanced features and specifications too:

  • Click on a spline without moving it to remove it.
  • Shift-clicking on a point without moving the mouse will delete the point and disconnect (cut) it from the shape.
  • 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 line segment that is curved on a straight segment or one that is straight 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.
  • Clicking on a point without moving the mouse will delete that point, causing its adjacent points to connect together.
  • You can connect the endpoints of shapes to close-in and combine them.

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 an can be modified. 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.

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 [[Eng:#Reshape Tool|reshape tool]], and shift-click anywhere on the line to create a new point which forms a curve on the line.

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.

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.

Text Tool

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 and a cursor will appear. Then you can begin typing. You can also set the horizontal and vertical boundaries of text by moving the resolution boxes that appear around the text box. After finishing typing, click on a blank area to exit the text editor. To resize the text then, you must select it with the [[Eng:#Mouse-pointer|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.

Note Note: The Text Tool has six available fonts available in the bottom-left of the paint editor to select from Gloria, Scratch, Helvetica, Mystery, Marker, and Donegal.

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).

Stamper

The stamper is a tool that duplicates an individual object in the vector editor. To duplicate an object, select the stamper and click on the object. Then, the tool will automatically switch to the [[Eng:#Mouse-pointer|mouse-pointer]], allowing you to place or modify the copied object. The only way to stamp multiple objects as a whole is to [[Eng:#Grouping|group]] them first. An individual object, though, can be stamped multiple times without reselecting the tool by holding shift while continually clicking to place the stamps. However, the very first stamp will be placed when the mouse is released unlike the rest, in which it must be clicked. This is likely due to a bug.

Other Tools

There are three more tools in the vector editor, but these tools are sub-classes of other tools. They are used to modify objects further particularly with the [[Eng:#Mouse-pointer|mouse-pointer]] tool and the [[Eng:#Reshape Tool|reshape tool]].

  • to read about the layering tools, [[Eng:#Layering|see the "Layering" section]].
  • to read about the grouping and ungrouping tool, [[Eng:#Grouping|see the "Grouping" section]].

Interaction With Other Programs

Images created in the Scratch Paint Editor can be exported outside of Scratch. The bitmap editor creates images in which most paint programs can read. Images created in the bitmap editor can be saved as a .png, .jpeg, and more file formats that read bitmap. To save a created costume to your computer, right-click or shift-click on the costume logo on the costumes pane on the left side, and select "Save to Local File". Then, it allows you to save the costume onto your computer. If it is a bitmap costume, there are multiple file formats to save the image in. However, vector costumes can only be saved as a ".svg" file type, which can be read by most other vector paint programs. Once a costume is saved, it can be opened inside another paint program.

Helpful Tips and Hints

  • The resolutions (width by height in pixels) of your costumes and backdrops are shown underneath the costume icons in the costume pane.
  • Costumes and backdrops can be renamed at the top by typing in the text box.
  • You can edit the thickness of an object by selecting it and moving the pen size bar.
  • 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
  • You can clear (not delete) a costume or backdrop by clicking the clear button at the top, which leaves it as a blank image.
  • 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 costumes 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, 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.
  • At the top toolbar of the Scratch program are two buttons for shrinking or increasing the size of sprites. However, when one of these tools is selected, individual or grouped objects in the vector paint editor can also be clicked on with the tool to have size manipulations. This is an alternative to selecting the object with the [[Eng:#Mouse-pointer|mouse-pointer tool]] and dragging the size boxes to adjust it.

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)
2013 February 9 Default stroke width was set to 2 pixels; spline tool smoothens as one draws; eraser icon changed; multiple bug fixes.[1]
2013 February 21 Ability to edit splines without ungrouping objects; clear button is not disabled when the default Scratch cat is opened; multiple bug fixes.[2]
2013 February 27 Option to switch to "single color" mode in the vector editor; miscellaneous updates to the unreleased bitmap editor.[3]
2013 March 7 Continuous color picker was added; ability to draw solid or hollow shapes; removed the eraser tool; moved tools to the right side; zooming now zooms on the currently selected object; replaced "paint bucket" icon with "paint-brush"; ability to shift-click on a control point to separate the path.[4]
2013 March 13 Added undo and redo shortcut keys; added ctrl-c and ctrl-v to copy and paste selections between costumes; costumes can be dragged into an image from the backpack; multiple bug fixes.[5]
2013 March 21 The bitmap editor is released.[6]
2013 March 27 Tools adjust to browser size; stage no longer shrinks on a 1024 pixels-width screen; the brightness slider appears as a gradient of lightest to darkest; costume center button moved to the top row; a second color swatch; transparent "checkered color" has smaller "checkers"; bug fixed where large imported costumes were off-centered.[7]
2013 April 10 Ability to draw multiple ellipses or rectangles in the bitmap editor without re-selecting the tool; the stamp tool revised in bitmap where one selects the tool, and clicks and drags a canvas region to stamp; the crosshair cursor is used for the screen region grabber and stamp tools in the bitmap editor.[8]
2013 April 23 The zoom percentage readout is displayed adjacent the zooming buttons; "paint" images now open in the bitmap editor[9]
2013 May 3 Multiple bug fixes, many having to do with importing costumes from the backpack directly into the paint editor.[10]
2013 May 10 Bug fixed where, in the bitmap editor, a transparent fill would become solid black.[11]
2013 May 16 Bitmap paint bucket tool supports [[Eng:#Gradients and Transparency|gradients and transparency]]; three gradient option buttons added as well as one for a solid fill; gradient buttons reflect the currently selected colors, as well as the ellipse and rectangle tools; ability to click multiple times in the same place with the paint bucket for a wider range of colors, increasing the color tolerance; added bitmap and vector editor distinction.[12]
2013 May 30 The top bar grow/shrink tools work on' the entire contents of the bitmap editor; paint editor retains settings when switching between costumes or editors.[13]
2013 June 13 Gradients added to the vector editor; maximum brush and eraser size increased in the bitmap editor; eraser size icon displays as a hollow circle in the bitmap editor; minimum brush size increased to avoid lines to small to be displayed on the stage.[14]
2013 June 20 "Import" button added to allow the importing of images directly into a costume; the screen region grabber rectangle in the bitmap editor snaps to the basic pixel grid instead of subpixels; smallest brush size is 1 pixel instead if subpixels; tool cursors do not show on scroll bars; new cursors for resizing, rotating, and moving; radial gradients fixed for rectangles so they do not have a focal point; multiple bug fixes.[15]
2013 June 27 Duplicate tool (stamp tool) in the vector editor displays a transparent image of what will be duplicated on rollover.[16]
2013 July 18 The text tools in both editors have multiple fonts (5); default size of the Helvetica font increased.[17][18]
2013 July 19 Glitch fixed where the Helvetica font size increase on the previous update caused all vector text to revert to the default size in all projects.[19]
2013 August 1 Both text tools get a new font called Donegal.[20]
2014 June 5 An "Add" button now appears at the top for importing images from the built-in library without creating an entirely new costume.[21]
2015 March 5 An "Crop" button was added and the crop feature was implemented, only in the bitmap editor.

[22]

Alternatives

Main article: Alternatives to the Paint Editor


SandCastleIcon.png This page has links to outside of the Scratch website or Wikipedia. Remember to stay safe when using the internet as we can't guarantee the safety of other sites.

The following external image editors are alternatives that can be used instead of Scratch's built-in paint editor:

— A free vector image editor with advanced capabilities

— Default bitmap editor on Windows computers

— A very basic paint editor for Mac computers

— An image editor focused on complex effects and design

— An expensive but professional software used for the most advanced image effects and editing

See Also

References

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