Clean a sheet. Draw a sprite.

Get to the drawing page

1. Click Workspace at the top of this site.
2. Wait until the page loads. There is no app store download.
3. You should see Drop a spritesheet you want to clean and update and the Create / Clean tabs.
4. Ignore the big drop box for now. That is for messy pictures someone already drew.
5. Find the Create tab.
6. Click Create.
7. A drawing screen should fill the page. It uses the same Blue, Sand, or Dark colors as the rest of the site.
8. The name at the top-right of the drawing square should say something like sprite.png.
9. You now have a blank square. That square is 64 by 64 tiny pixels.
10. Brush should already be on. You do not have to click Brush first.

Look at the square

11. Find the drawing square in the middle.
12. It may look empty, like a checkerboard. That is okay. Empty pixels are see-through.
13. To the left of that square, the first tab is Shortcuts. Click + to open a group. Click − to close it. Opening one group does not close the others.
14. Above the drawing square, each selected thing sits in its own box, starting at the left edge with no gaps: Canvas (W 64 H 64), plus the tool, color, shape, transform, frame, or layer you have selected. Above those boxes, from the left: Try Sample Art, Import image, and Remove background. Idle tools stay off. The numbers in those boxes sit in the middle. The sprite name sits at the top-right of that square, always ends in .png, and the pencil lines up with the right edge. Click the pencil to rename. The tick saves. The movie of your drawing sits on the left, as wide as Shortcuts. Its bottom lines up with the drawing square. Speed is a slider above that movie. Play / Pause is on the right.
15. The Canvas box above the drawing shows W 64 H 64. Click it to change the size.
16. Leave it at 64 for your first drawing. Bigger squares are harder.

Zoom in so the pixels look big

17. Look at the bottom-right corner of the drawing square for the zoom buttons. It should say 100%. If it says another number, click 1x.
18. Click the + button a few times.
19. Watch the percent number go up, like 200%, 400%, 600%.
20. Stop around 600% or 800%. The little squares should look chunky.
21. If you zoom too far, click − to go back a little.
22. The 1x button jumps back to 100%. Use that if you get lost.
23. The drawing square uses the whole space in the middle. 16 and 256 both fill that square. 16 is 16 big cells. 256 is 256 small cells. 100% is that full square. You cannot zoom out below 100%. + only makes the drawing inside bigger. The square outline stays. Picking 64 then 128 adjusts the art to 128 cells in the same square. You do not click anything extra.

Make your first mark

24. Brush is a tiny stamp. Default size is 2px. Default color is black.
25. Put the pointer on the drawing square.
26. Press and hold.
27. Drag a little.
28. Let go.
29. You should see black squares.
30. If nothing happens, click Brush so it looks pressed, then try again.
31. Draw a blob. A blob is a fine first drawing.
32. Draw slowly. Fast dragging skips squares. Tick Perfect to drop the extra corner pixel so a curve stays one pixel wide.
33. You are coloring whole pixels, not smooth paint. Edges will look blocky. That is the point.

If you mess up

34. Find Undo.
35. Click Undo. The last thing you did should disappear.
36. Click Undo again if you need to.
37. Redo brings it back if you undid too far.
38. Reset is the big panic button. It puts the picture back to how it looked when you opened this screen.
39. Do not click Reset unless you really want to start that picture over.
40. The X in the corner closes the editor and throws this drawing away. Do not click it if you like what you did.

Change the brush size

41. Next to Brush, find the Size slider. It should say 2px.
42. Drag it, or click it and use the arrow keys.
43. Slide to 1px if you want one tiny square at a time.
44. Slide to 2px for a small crayon.
45. Slide to 4px or 8px for filling bigger bits faster.
46. Huge sizes like 32 or 64 will cover most of a 64×64 square in one drag. That is usually too big.
47. The size you pick stays on this computer for next time.

Change the color

48. On the right, find the color squares. That is the palette. Starter, Fantasy 16, Dawn 16, and Greens are there.
49. Click a color. Red for a hat. Brown for hair. Whatever you want.
50. The extra square next to Brush opens any color the palette does not have.
51. Click the drawing square and paint with that color.
52. The color you pick stays on this computer for next time.
53. To copy a color already in your drawing, click Match color from image.
54. Then click a pixel in your drawing.
55. Brush now uses that color.
56. Press I if you like keyboard shortcuts. That is the same as Match color.

Use Fill like a paint bucket

57. Fill dumps color into a connected blob of the same color.
58. Click Fill. Or press G.
59. Pick the color you want.
60. Click inside an empty area or inside a blob.
61. That whole connected area should change color.
62. If Fill dumps over too much, you clicked an area that was all connected. Click Undo.
63. Switch back to Brush when you want to draw lines again. Or press B.

Use Eraser

64. Click Eraser. Or press E.
65. Slide the Eraser size. Small is safer.
66. Drag over pixels you want gone.
67. Gone means see-through, like glass.
68. Eraser is a square stamp, same idea as Brush.
69. Switch back to Brush when you want to draw again.

Draw a rectangle or a circle

70. Click Rectangle. Or press U.
71. Drag on the drawing square from one corner to the opposite corner.
72. Let go. A filled box appears in the color you picked.
73. Filled is the default. Its checkbox should be ticked. Only one of Filled or Hollow can be ticked.
74. Click Hollow if you want only the edge. Brush is the pen. There is no separate pen tool.
75. Hollow uses the Brush Size slider. Set it to 1px for a thin line, or 2px for a thicker one. Click Line. Or press Y. Drag from one pixel to another. Let go. A straight stroke appears at the Brush size. Hold Shift while you drag for a level, upright, or 45 degree line. Filled and Hollow do not change a line.
76. Click Filled again when you want color dumped inside the box.
77. Click Circle. Or press O.
78. Drag a box. Let go. A filled round shape appears, as round as whole pixels allow. Filled and Hollow work the same here.

Stamp an outline

Outline sits under Colors. Tick On and a stroke goes around the art on the frame you are on. The other frames stay as they are. While it is ticked, the color and Size (1 to 8) redraw that stroke. Untick it to take the stroke off. Pick Brush or any other tool, or go to another frame, and the stroke stays while Outline turns off. Undo takes it off later. A blank frame has nothing to stroke, so the box waits until you draw.

Cut out a shape with Lasso

79. Click Lasso. Or press L.
80. Drag a loop around the pixels you want gone.
81. Let go. Everything inside the loop is removed.
82. If you only wanted a few pixels gone, Undo and use Eraser instead.

Turn on the pixel grid

83. In the FRAMES row, find the grid button (it looks like a window / hash).
84. Click it.
85. You should see a grid over the drawing.
86. That helps you aim at one square.
87. Click it again to hide the grid if it gets in the way.

Move around a zoomed-in picture

88. If you zoomed in a lot, you may not see the whole square.
89. Hold Space.
90. Drag. The paper slides. You are not drawing while Space is held.
91. Let go of Space.
92. Now you can draw again.

Flip and spin (optional)

93. Flip horizontal makes a mirror, left and right swapped. Select, or press S, drags a box around pixels. Move, or press M, drags that box. With no box, Move drags the whole layer. Arrow keys nudge one pixel while Move is on, or while a box is showing. Hold Shift to nudge 4. Delete clears the pixels in the box. It does not remove the frame. Pixels that leave the canvas are gone.
94. Flip vertical makes it upside down.
95. Rotate turns the whole picture a quarter turn.
96. Try one. If you hate it, Undo.

Crop: leave it off while you draw

749. Crop is a tool for cutting a picture. It is not the pencil.
750. If you click Crop by accident, the drawing square wants a box, not a stroke. On Create, the box you drag stays on this frame and the rest of this frame is cleared. Other frames stay. Undo brings it back.
751. Click Crop again so it is not pressed.
752. Click Brush. Draw again.
753. On a blank New sprite, if you need a smaller page, use the Canvas box: 16 / 32 / 64, not Crop.
754. Crop is more useful later on a dropped sheet, when you want to keep one piece of a big picture.

Remove Background: not for drawings you painted

755. That button wants a photo with one flat wall color.
756. On a blank sprite it is often grey and cannot click. That is correct.
757. To make empty pixels, use Eraser, not Remove Background.

Make a second pose so it can move

97. One picture is a sticker. Two pictures in a row can look like a walk or a blink.
98. Under FRAMES, you should see one little thumbnail. That is Frame 1.
99. Click the + button. That is Add blank frame.
100. You now have Frame 2, empty.
101. The empty frame should copy your layers, but with no pixels yet.
102. Draw the next pose on Frame 2. Same character, one tiny change: arm up, or eyes closed.
103. Click Frame 1’s thumbnail to go back.
104. Click Frame 2’s thumbnail to go forward.
105. Arrow keys Left and Right also change frames.

Copy a frame instead of starting empty

106. Click the frame you like.
107. Click the duplicate button (two little pages).
108. You get a copy.
109. Change only a little on the copy: move a foot, blink, bounce.
110. Small changes make a smoother movie.

See the movie

111. Look at the big preview beside your drawing.
112. Click Play.
113. The preview should flip through your frames.
114. Your drawing square should stay on the frame you were editing. Play does not steal the canvas.
115. Click Play again to pause.
116. Speed is how fast the movie goes, in frames a second (FPS). Default is 12.
117. Slide it down to 6 if it is too fast.
118. Slide it up to 16 if it is too slow.
119. Speed goes from 1 to 60. It starts at 12. With two frames, Download GIF and Download as Spritesheet under the drawing become usable. One frame keeps them off.

Onion skin (the ghost of the last pose)

120. Onion skin shows a ghost of another frame so you can line things up.
121. Click the onion button for the previous frame. Ghost is red.
122. Click the onion button for the next frame. Ghost is green.
123. The ghost is only a helper. It will not be in the downloaded picture.
124. Turn onion off when it is distracting.

Reorder or throw away frames

125. Click a frame.
126. Use < to move it left in the movie.
127. Use > to move it right.
128. The trash can deletes that frame.
129. You cannot delete the last remaining frame. You need at least one.
130. Play uses the new order.

Layers (stickers stacked on one pose)

131. Find Layers.
132. Layer 1 is your paper.
133. Add layer makes a new sticker on top.
134. Click a layer name to draw on that layer.
135. Hide a layer with the hide button if you want it gone from view but not deleted.
136. The opacity slider makes a layer see-through.
137. Move layer up / down changes which sticker is on top.
138. You can have up to 8 layers.
139. When you download, layers get flattened into one picture per frame. The player will not see separate layers.

Canvas size (only if 64 feels too small or too big)

140. Click the Canvas box above the drawing (it shows W and H). Presets: 16, 32, 64, 128, 256.
141. 16 is tiny, like a bee.
142. 32 is a small game icon.
143. 64 is a good first character.
144. 128 and 256 are big and slower to draw.
145. Pick a size. The drawing stretches to the new cell count. There is no extra switch.
146. Picking 16 or 64 keeps the same on-screen square. 64 packs more cells into it. Brush 2px still paints two of those cells.
147. If the sprite is still blank and has one frame, the size changes at once.
148. If you already drew, or you have more than one frame, a warning asks first. Keep 64×64 stays. I know what I'm doing changes this frame and all other frames.
149. Going up (64 to 128) makes every pixel a bigger block. Going down (64 to 32) squeezes the whole drawing in. Detail does not come back.
150. Keep W and H equal if you want a square.

Change the page size after you already drew

758. You drew on 64 × 64 and want a bigger grid.
759. Click 128. If you already drew, or you have more than one frame, confirm with I know what I'm doing. The square stays. Your art stretches to 128 cells.
760. Going down (64 to 32) keeps the whole drawing but loses detail. Look before you Send to Clean.
761. Undo if that was a mistake.
762. The on-screen square does not grow. Only the cell count changes.
763. Keep W and H equal if you want a square.

Save your progress (this browser only)

151. At the bottom, click Save.
152. That keeps a draft on this browser.
153. You stay in the drawing screen.
154. A draft is like a notebook in this computer, not a file on your desktop.
155. Safari may throw drafts away if you stay away about 7 days.
156. Free keeps 3 drafts. Basic keeps 25. Pro keeps 100.

Finish the drawing

157. Save, Download this Frame, and Send to Clean sit under the drawing. They stay off until you draw a pixel or add a frame. Click Download this Frame when you have a drawn pixel, or more than one frame, and you want that pose as a file. You stay on Create. You do not have to open Clean.
158. Download GIF and Download as Spritesheet stay off until you add another frame. Hover them to see why.
159. Click Send to Clean only if you want the cleaner to treat the drawing as a sheet.
160. Send to Clean closes Create and opens the Clean tab with your strip.
161. After Send to Clean, Undo from the editor is gone. A new Create canvas starts clean.

Keep it for real

162. A draft on this browser is not enough.
163. Download this Frame on Create is the real keep for the pose you are on.
164. With two or more frames, Download GIF is a looping movie. Download as Spritesheet is a strip. Download this Frame is only the pose you are on.
165. You can still Send to Clean and download from there if you want Clean’s extras.
166. Free downloads have a watermark. Paid plans can take a clean file home.

Open it again later

167. Go back to Workspace.
168. Under Drafts on this browser, click your sprite.
169. It should open in the editor, not the cleaner.
170. Keep drawing.

Clean board: take the movie home

764. Click Send to Clean when the Play preview looks right.
765. Wait for Clean.
766. Play it there too, if you can.
767. Download GIF to show a friend a looping movie.
768. Download PNG if a game needs a strip of poses.
769. Free downloads may show a watermark. That is the free plan. The drawing is still yours on this browser.
770. After this, Create undo is gone. Open the draft or Create again to start a new edit.

Drafts: name your friends

771. Workspace shows Drafts on this browser.
772. If you see Rename, name them: `blink`, `walk`, `jump`, `idle`.
773. Names save you from opening the wrong movie.
774. Delete only a draft you truly do not want. Delete is not Undo.

Tiny first project (do this today)

171. New sprite.
172. Zoom in.
173. Draw a circle head in black.
174. Add two eye pixels.
175. Duplicate the frame.
176. On frame 2, move one eye pixel, or close the eyes.
177. Hit Play.
178. If it blinks, you did it.
179. Click Save so you do not lose it.
180. Click Download GIF. You stay on Create.
181. Or click Send to Clean if you want the cleaner.
182. You made a sprite.

Keyboard cheat sheet (optional)

183. On the left, open Shortcuts. B Brush.
184. E Eraser.
185. G Fill.
186. C Crop (leave this off while you draw).
187. I Match color.
188. Y Line. Hold Shift for a level, upright, or 45 degree line. U Rectangle. S Select. M Move.
189. O Circle.
190. L Lasso.
191. Space pan. + zoom in. − zoom out. 1 jump to 100%. P Play. X pixel grid. N add a blank frame. D duplicate. Delete remove a frame.
192. Left / Right previous / next frame. H flip horizontal. Shift+H flip vertical. R rotate right. Shift+R rotate left. [ onion previous. ] onion next. Letter keys are the same on every keyboard. Undo is Ctrl+Z or ⌘Z. You do not need a keyboard to draw with a finger.

A blink

Do this after the first blob. Same character. Only the eyes change.

193. Open New sprite (or open your draft).
194. Stay on 64 × 64.
195. Zoom in until the face is easy to see.
196. Turn the pixel grid on.
197. Click Brush. Size 1px or 2px.
198. Pick black.
199. Draw a round head in the middle of the square. Leave empty space under the head. That empty space is for a body later.
200. Click Save. Notebook save. You are still drawing.
201. Pick a skin color. Or keep black if you like a silhouette.
202. Fill the head if you outlined it. Click Fill, then click inside the head.
203. If Fill dumps the whole canvas, Undo. The outline had a hole. Close the hole with Brush, then Fill again.
204. Switch back to Brush.
205. Pick white or a light color.
206. Put two eye whites. Same row of pixels. Same size. Leave a gap for the nose.
207. Pick black.
208. Put one pupil pixel in each eye. Same height. That is Frame 1: eyes open.
209. Look at Frame 1’s thumbnail. You should see a tiny face.
210. Click Save.
211. Click Duplicate frame.
212. You now have Frame 2, a copy.
213. Frame 2 is selected. You are editing the copy.
214. Turn onion previous on. The red ghost is Frame 1.
215. On Frame 2, Eraser size 1px.
216. Erase the pupils and the eye whites.
217. Brush, black, 1px.
218. Draw a short flat line where each eye was. Two sleepy lines. That is eyes closed.
219. Turn onion off if the red ghost is loud.
220. Click Frame 1. Eyes open.
221. Click Frame 2. Eyes closed.
222. Look at the preview beside the drawing.
223. Click Play.
224. If it is a strobe, set FPS to 6.
225. If the blink is too fast to see, duplicate Frame 1 again and drag that copy to the end, so the open eyes stay on screen longer.
226. Frame order for a nice blink: open, closed, open.
227. If you only have open + closed, duplicate the open frame so you have open, closed, open.
228. Click Play again. It should wink, then look at you.
229. Click Save.
230. Click Send to Clean.
231. On the Clean board, download the GIF.
232. You made a blink.

Look left, look right

The feet stay. Only the face turns.

381. New sprite. 64 × 64. Draw a standing person facing you.
382. Eyes and a tiny nose. Remember which side the nose is on.
383. Click Save.
384. Duplicate Frame 1. Frame 2 is look left.
385. Onion on.
386. On Frame 2, erase the eyes and nose.
387. Draw both eyes a few pixels to the left. Move the nose left too.
388. Duplicate Frame 1 again. Drag it to the end if you need a “look at you” in the middle later.
389. Duplicate Frame 1. Frame 3 is look right.
390. On Frame 3, move eyes and nose a few pixels to the right.
391. Order: face you, look left, face you, look right, face you.
392. Duplicate the “face you” frame as many times as you need to fill that order.
393. Play. FPS 6.
394. If the whole head slides, you moved too many pixels. Undo. Move only eyes and nose.
395. Click Save, then Send to Clean.
396. Download the GIF.
397. You made a look-around.

Sleep

A sleep is a slow blink that stays closed, then maybe a Z.

445. Start from your blink draft.
446. Order: eyes open, eyes closed, eyes closed, eyes closed.
447. Duplicate the closed-eye frame until most of the movie is closed.
448. FPS 4. Sleep is slow.
449. Optional: Add layer. On that layer, paint a tiny Z above the head on the closed frames only.
450. Hide the Z layer. The face should still be there. Show it again.
451. Do not paint Z on the open-eye frame, or they snore while looking at you.
452. Play. They should doze.
453. Click Save, then Send to Clean.
454. Download the GIF.
455. You made a sleep.

Surprise

Idle, then a big tiny reaction: eyes wide, arms up, one extra pixel of stretch.

603. Frame 1: normal face, arms down.
604. Duplicate. Frame 2: bigger eyes (add a pixel of white). Mouth an O. Arms up.
605. Duplicate Frame 1 at the end if they calm down. Or hold Frame 2 if they stay shocked.
606. Optional: move the whole body up one pixel on Frame 2, like a hop of surprise.
607. Play. FPS 8.
608. If it is only a blink, the arms did not move. Put the arms up.
609. Click Save, then Send to Clean.
610. You made a surprise.

Cry

Slow. Tears are a layer. The mouth is a small sad shape.

611. Face on Frame 1, sad mouth.
612. Add layer for tears.
613. Frame 1: one tear pixel under an eye.
614. Duplicate. Frame 2: that tear one pixel down. Maybe a second tear on the other eye.
615. Duplicate. Frame 3: first tear lower or gone. Second tear down one.
616. Duplicate a blink-closed frame if they squeeze their eyes.
617. Play. FPS 4.
618. Do not shake the whole head unless you mean sobs. If you sob, bob one pixel only.
619. Click Save, then Send to Clean.
620. You made a cry.

Nod yes, shake no

Only the head moves. The body is a statue.

650. Stand. Onion on for every head change.
651. Yes: Frame 1 head normal. Frame 2 head one pixel down. Frame 3 normal. Frame 4 head one pixel down. Frame 5 normal.
652. No is a new draft, or extra frames after a pause: head one pixel left, center, one pixel right, center.
653. Do not move the feet. If the feet move, you grabbed the whole body. Undo. Nudge only the head pixels.
654. Play. FPS 6.
655. Click Save, then Send to Clean.
656. You made a yes or a no.

Laugh

Mouth bigger. Eyes smaller. Tiny bob.

687. Stand, happy mouth.
688. Duplicate. Frame 2: mouth one pixel taller or wider. Eyes into happy curves. Body up one pixel.
689. Duplicate Frame 1. Alternate 1, 2, 1, 2.
690. FPS 8.
691. Click Save, then Send to Clean.
692. You made a laugh.

Sneeze

Wind up, blast, recover.

693. Frame 1: normal.
694. Frame 2: eyes closed, head back one pixel, cheeks bigger if you can spare two pixels.
695. Frame 3: head forward, a tiny spray of pixels in front of the face on a new layer.
696. Frame 4: normal again. Spray layer empty or hidden.
697. Play. FPS 10.
698. Click Save, then Send to Clean.
699. You made a sneeze.

A walk

A walk is four poses of the same body. Only the legs change a little.

233. Open New sprite.
234. Stay on 64 × 64.
235. Zoom in.
236. Turn the grid on.
237. Imagine the square has a floor. The feet should sit on the same row of pixels in every frame. If the feet jump up and down, the movie will bounce.
238. Brush 2px, black.
239. Draw a simple body on Frame 1:
     • ·a box for the torso
     • ·a box for the head
     • ·two arms hanging
     • ·two legs, both almost straight, a tiny step forward
240. Keep the body in the middle. Do not glue it to the left or right edge.
241. Click Save.
242. This is Frame 1: contact. One foot is forward, one is back, both near the floor.
243. Click Duplicate frame. That copy is Frame 2.
244. Turn onion previous on.
245. On Frame 2, erase only the legs. Leave the head and body.
246. Draw the legs passing each other, closer together, one knee up a little. This is passing.
247. Check the feet. The lowest foot pixels should match Frame 1’s floor row. Use the red ghost.
248. Click Save.
249. Duplicate Frame 2. That copy is Frame 3.
250. On Frame 3, swap which foot is forward. This is the other contact.
251. Same floor row. Same body height.
252. Click Save.
253. Duplicate Frame 3. That copy is Frame 4.
254. On Frame 4, passing again, but the other knee is up.
255. You should have four thumbnails.
256. Click each thumbnail slowly: 1, 2, 3, 4. The body should stay put. Only legs swap.
257. If the whole character slides left, Undo that frame and nudge only the legs.
258. Turn onion off.
259. Click Play.
260. Set FPS to 8 for a first walk. 12 can look hurried.
261. If it moonwalks, a frame is in the wrong order. Select a frame and use < or > until Play looks like walking forward.
262. If it hops, a foot is higher on one frame. Fix that frame with onion on.
263. Click Save.
264. Click Send to Clean.
265. On the Clean board, play it again.
266. Download the GIF for a friend.
267. Download the PNG if you want the four poses in a strip for a game.
268. You made a walk.

An idle bounce

Idle means standing still, but breathing. The whole body moves up one pixel, then down. No walking.

269. Open your walk draft, or New sprite and draw the same standing body on Frame 1.
270. You only need a standing pose. If you have walk frames, click Frame 1 (both feet near the floor).
271. Duplicate Frame 1 until you have two frames that look the same.
272. Delete extra walk frames if this is a new idle movie. Keep two copies of the stand.
273. Click Frame 2.
274. Turn onion previous on.
275. On Frame 2, you will move the whole character up one pixel. Not two. One.
276. Easy way: Eraser the whole body on Frame 2, then redraw it one row higher. Slow way: erase the bottom row of the feet and add a row on top of the head.
277. The red ghost should sit one pixel below your new drawing.
278. Turn onion off.
279. Click Play.
280. Set FPS to 4 or 6. Fast idle looks like shivering.
281. If it hops too hard, you moved more than one pixel. Undo and do one row only.
282. Duplicate Frame 1 again and move that copy to the end: down, up, down. The bounce lands.
283. Click Save.
284. Click Send to Clean.
285. Download the GIF.
286. You made an idle.

A wave

A wave is a stand, plus one arm that goes up and down.

287. New sprite, or duplicate a standing draft so you do not wreck the walk.
288. 64 × 64. Zoom in. Grid on.
289. Draw the body on Frame 1 with both arms down.
290. Click Save.
291. Duplicate Frame 1. That is Frame 2.
292. Onion previous on.
293. On Frame 2, erase only the waving arm. Leave the other arm and the body.
294. Draw that arm bent, hand near the head. Like “hi”.
295. Duplicate Frame 2. That is Frame 3.
296. On Frame 3, move the hand a little higher or a little more to the side. Tiny change.
297. Duplicate Frame 1 and drag that copy to the end, so the arm comes back down.
298. Order: arm down, arm up, arm higher, arm down.
299. Play. FPS 8.
300. If both arms flap, you edited the wrong arm. Undo that frame and onion-check.
301. Click Save, then Send to Clean.
302. Download the GIF.
303. You made a wave.

A jump

A jump is crouch, then in the air, then land. The feet leave the floor, then come back to the same floor.

304. New sprite. 64 × 64.
305. Draw a standing body. Remember the floor row: the lowest foot pixels.
306. Count that row. Example: if feet sit on row 60, every landing frame must sit on 60 too.
307. Click Save.
308. Duplicate Frame 1. Frame 2 is the crouch.
309. Onion on.
310. On Frame 2, squash the legs shorter. The head may drop one or two pixels. Feet stay on the floor row.
311. Duplicate Frame 2. Frame 3 is in the air.
312. On Frame 3, move the whole character up. Legs can straighten or tuck.
313. The feet should be above the floor row now. Empty pixels under the feet. That is the jump.
314. Duplicate Frame 1. Drag it to the end. Frame 4 is land. Same as stand, same floor row.
315. Order: stand, crouch, air, land.
316. Play. FPS 8.
317. If it never leaves the ground, Frame 3 was not moved up.
318. If it never lands, the last frame is still in the air. Put a stand copy at the end.
319. If it slides sideways, onion-check the body against Frame 1. Nudge back.
320. Click Save, then Send to Clean.
321. Download the GIF.
322. You made a jump.

A run

A run is a walk that leans forward, with bigger steps and a little air.

411. New sprite, or duplicate the walk draft so the walk stays safe.
412. Four frames, same as walk: contact, passing, other contact, other passing.
413. On every frame, move the whole body one pixel up from a walk, and one pixel forward (toward the way they run).
414. Onion on. Legs swing farther than the walk. One foot can leave the floor on passing frames.
415. Arms swing bigger too. Opposite arm to opposite leg.
416. Floor row still matters on contact frames. Passing frames may have empty pixels under a foot. That is the hop of a run.
417. Play. FPS 12. Run wants to be faster than walk.
418. If they lean so far they fall, you moved the body too far forward. Nudge back one pixel.
419. If it looks like a walk, make the passing step higher.
420. Click Save, then Send to Clean.
421. Download the GIF.
422. You made a run.

Sit down

Stand, bend, sit. The floor stays. The hips go down.

423. Draw a stand on Frame 1. Same floor row as always.
424. Duplicate. Frame 2 is bend.
425. Onion on. Shorten the legs. Hips drop a few pixels. Head drops a little. Arms can go forward for balance.
426. Feet stay on the floor.
427. Duplicate Frame 2. Frame 3 is sit.
428. Legs bent more, or stuck straight out if they sit on the floor. Hips even lower.
429. If they sit on a chair, draw a tiny chair box behind them on a new layer, so you can hide the chair.
430. Duplicate Frame 1 and put it at the end only if you want them to stand back up. For “they sat down and stayed,” stop on the sit frame. Duplicate the sit frame so Play holds the sit.
431. Play. FPS 6.
432. Click Save, then Send to Clean.
433. Download the GIF.
434. You made a sit.

A poke

One arm goes out and back. The other arm stays.

435. Standing Frame 1. Both arms down or ready.
436. Duplicate. Frame 2 is wind up. The poking arm goes back a little.
437. Duplicate. Frame 3 is poke. That arm is straight out.
438. Duplicate Frame 1 and put it at the end: arm comes home.
439. Onion on for each arm change. Do not move the feet.
440. Play. FPS 10.
441. If both arms poke, you edited the wrong arm. Undo. Onion-check.
442. Click Save, then Send to Clean.
443. Download the GIF.
444. You made a poke.

A kick

One leg goes back, then out, then home. The other foot stays on the floor.

491. Stand on Frame 1. Both feet on the floor row.
492. Duplicate. Frame 2 is wind up. Kick leg goes back. Standing foot stays.
493. Duplicate. Frame 3 is kick. Kick leg is straight out.
494. Duplicate Frame 1 and put it at the end: land.
495. Onion on. The standing foot must not slide. If it slides, the whole body is skating.
496. Arms can swing opposite the kick, a little, not a lot.
497. Play. FPS 10.
498. If they fall over, you kicked and also moved the standing foot. Undo the standing foot.
499. Click Save, then Send to Clean.
500. You made a kick.

A tiny dance

Step left, step center, step right, step center. Head can bob.

510. Stand in the middle. Remember a center pixel on the body.
511. Duplicate. Frame 2: move the whole character two pixels left. Both feet still on the floor.
512. Duplicate Frame 1. That is back to center. Put it third if you need, or:
513. Duplicate Frame 1. Frame for two pixels right.
514. Order: center, left, center, right, center.
515. Optional: on left and right frames, raise one arm.
516. Play. FPS 8.
517. If they moonwalk, a frame is facing the wrong way. You do not need Flip for this dance.
518. Click Save, then Send to Clean.
519. You made a dance.

Fall down

Stand, tip, sit-fall, lie. Then stay down unless you add a get-up.

520. Stand. Floor row noted.
521. Duplicate. Frame 2: body tilts. One foot stays. Arms out.
522. Duplicate. Frame 3: hips down, like a clumsy sit.
523. Duplicate. Frame 4: lie on the floor. Head to one side. Legs stick out.
524. The lie should rest on the floor row, not float.
525. Duplicate Frame 4 so Play holds the lie. They stay down.
526. Play. FPS 8.
527. Click Save, then Send to Clean.
528. You made a fall.

Get up

This is the fall in reverse. Start from the lie, not from a new blob.

529. Open the fall draft.
530. Duplicate the lie frame.
531. Then duplicate the sit-fall.
532. Then duplicate the tilt.
533. Then duplicate the stand.
534. You may have fall-down frames and get-up frames in one Play. That is a full trip.
535. Or delete the first fall and keep only lie → sit → tilt → stand.
536. Play. FPS 8.
537. If they pop up too fast, duplicate the sit frame so they pause.
538. Click Save, then Send to Clean.
539. You made a get-up.

Climb

Hands up, body up, feet up. Same wall. The wall is a layer you do not animate.

540. Add layer first. Paint a vertical wall or ladder on the left. That is the wall layer.
541. Click Layer 1. Draw the person at the bottom, hands on the wall.
542. Hide the wall. Person stays. Show the wall.
543. Duplicate the frame.
544. On Frame 2, click the person layer only. Move the whole person up two pixels.
545. Change which hand is higher, like climbing.
546. Duplicate. Frame 3: up two more pixels. Swap the hands again.
547. Duplicate. Frame 4: up again.
548. Do not move the wall layer.
549. Play. FPS 8.
550. If the wall crawls, you drew on the wall layer by mistake. Undo. Click the person layer.
551. Click Save, then Send to Clean.
552. You made a climb.

Swim

No floor. The body tilts. Arms cycle. A little bob.

553. New sprite. Do not sit them on the bottom row. Leave water room under them.
554. Optional: a new layer of blue dots for water. Hide it to see the body.
555. Frame 1: body almost flat. One arm forward, one back.
556. Duplicate. Frame 2: swap the arms. Bob the body one pixel up.
557. Duplicate. Frame 3: arms like Frame 1. Bob one pixel down.
558. Duplicate. Frame 4: arms like Frame 2. Bob up again.
559. Play. FPS 8.
560. If they walk on the bottom, you left feet on the floor. Erase the floor contact. They should float.
561. Click Save, then Send to Clean.
562. You made a swim.

Turn around

Use Flip horizontal so you do not redraw the whole body.

398. Open a standing drawing that faces one way. A side view is best: one eye, a nose pointing left or right.
399. If you only have a front view, draw a simple side view on a new draft: head, body, one visible arm, one visible leg.
400. Click Save. That is Frame 1: facing left (or right).
401. Duplicate Frame 1.
402. On Frame 2, click Flip horizontal. The character now faces the other way.
403. Play. They should turn in one snap.
404. If a snap-turn looks too sudden, add a middle frame: duplicate Frame 1, erase the face, draw the nose as a tiny front view (both eyes, nose in the middle). Put that frame between the two flips.
405. Order: face left, face you, face right.
406. Play. FPS 8.
407. If Flip also mirrored the wrong frame, Undo and make sure Frame 2 was selected first.
408. Click Save, then Send to Clean.
409. Download the GIF.
410. You turned them around.

Duck

Head and shoulders go down. Feet stay.

657. Stand.
658. Duplicate. Frame 2: shorten the legs, drop the head a few pixels, maybe arms over the head.
659. Feet on the same floor row.
660. Duplicate Frame 1 at the end if they pop back up.
661. Play. FPS 8.
662. Click Save, then Send to Clean.
663. You made a duck.

Push

Both hands go forward. The body leans. Feet stay planted.

664. Stand, side view if you can (nose pointing the way they push).
665. Duplicate. Frame 2: lean one pixel forward, arms stretch forward.
666. Duplicate. Frame 3: arms a little more forward. Body still. Feet glued.
667. If there is a box, put the box on its own layer and move the box one pixel on Frame 3 only.
668. Play. FPS 8.
669. Click Save, then Send to Clean.
670. You made a push.

Pick up from the floor

Bend, hand on the floor, stand with the thing.

671. Stand.
672. Duplicate. Frame 2: bend, like the sit-bend. One hand lower.
673. Add layer for the item on the floor, in front of the hand.
674. Duplicate. Frame 3: item layer moves to the hand.
675. Duplicate. Frame 4: stand back up. Item stays in the hand (move item layer up with the body).
676. Play. FPS 8.
677. If the item stays on the floor while they stand, you forgot to move the item layer on Frame 4.
678. Click Save, then Send to Clean.
679. You made a pick-up.

Drop it

The pick-up in reverse.

680. Start from the stand-with-item frame.
681. Duplicate. Hand opens (erase a grip pixel).
682. Duplicate. Item layer moves down to the floor.
683. Duplicate. Person stands empty-handed. Item stays on the floor layer.
684. Play. FPS 8.
685. Click Save, then Send to Clean.
686. You made a drop.

Hurt

They got bonked. One frame of ouch, then back to stand.

633. Start from a stand.
634. Duplicate. Frame 2 is hurt.
635. Onion on. Move the whole body one pixel in the hit direction, like they got shoved.
636. Eyes can be > < or just closed lines. Mouth a small dash.
637. Optional: a tiny star or line near the head on a new layer. Hide that layer to check the face.
638. Duplicate Frame 1 at the end so they recover.
639. Play. FPS 8.
640. If they fly across the square, you moved too many pixels. One or two is a bonk. Ten is a launch.
641. Click Save, then Send to Clean.
642. You made a hurt.

Faint

Hurt that does not get up. Hold the down pose.

643. Do the fall or sit.
644. End on the lie or sit.
645. Duplicate that last frame two or three times so Play stays down.
646. Optional closed eyes on those hold frames.
647. FPS 6.
648. Click Save, then Send to Clean.
649. You made a faint.

Victory

Arms up. Maybe a two-frame hop.

700. Stand.
701. Duplicate. Arms straight up, like a Y.
702. Duplicate. Optional hop: whole body up one pixel, same Y arms, tiny shadow.
703. Duplicate the grounded Y so they land.
704. Play. FPS 8.
705. Click Save, then Send to Clean.
706. You made a victory.

Guard

Arms in front. Hold it.

707. Stand.
708. Duplicate. Both arms up like a wall in front of the chest.
709. Duplicate that guard frame so Play holds the block.
710. Play. FPS 8.
711. Click Save, then Send to Clean.
712. You made a guard.

A shirt on its own layer

Layers let you change the shirt without redrawing the body.

323. Open a standing drawing.
324. Find Layers. You should see Layer 1.
325. Click Add layer. That is Layer 2.
326. Click Layer 2 so it is the one you draw on.
327. Pick a shirt color.
328. Paint the shirt only on Layer 2. Do not paint the head.
329. Click the hide button on Layer 2. The shirt should vanish. The body stays.
330. Show Layer 2 again.
331. Click Layer 1. Draw on the body. The shirt should stay on top if Layer 2 is above.
332. If the shirt is hiding under the body, select Layer 2 and Move layer up.
333. Duplicate the frame. Both layers copy.
334. Recolor the shirt on Frame 2, still on Layer 2, if you want a flicker-free color swap later.
335. Hide Layer 1. You should see only the shirt. That means you painted the shirt on the right layer.
336. Show Layer 1 again.
337. Click Save.
338. When you Send to Clean, layers flatten. The download is one picture per frame, shirt baked in.
339. You used a layer.

Recolor without flicker

340. Open the walk.
341. Pick the shirt color.
342. Click Fill.
343. Click Frame 1’s shirt. Fill it.
344. Click Frame 2. Fill the shirt the same color.
345. Do Frame 3. Do Frame 4.
346. Same color on every frame or the shirt will blink like a broken light.
347. Play to check.
348. If one frame is the wrong color, click that thumbnail and Fill again.
349. Click Save.

Idle, then wave

Same standing person. First they breathe. Then they say hi. Then they stand again.

350. Open your idle draft, or make a two-frame bounce from the idle steps.
351. Click the last idle frame.
352. Duplicate it. That copy is the start of the wave.
353. Onion on.
354. Erase only one arm on this new frame.
355. Draw the arm up, hand near the head.
356. Duplicate that wave frame.
357. Move the hand a little. Tiny change.
358. Duplicate the first standing frame.
359. Drag that stand copy to the very end.
360. Play from the start. Bounce, bounce, hi, hi, stand.
361. If the wave starts too soon, duplicate a standing frame and slide it in before the wave.
362. FPS 8.
363. Click Save, then Send to Clean.
364. Download the GIF.
365. You combined two movies.

Walk with a blink

The body walks. On one step, the eyes close. Then they open again.

366. Open your walk draft.
367. You should have four walk frames.
368. Click Frame 2 (a passing pose).
369. Duplicate Frame 2. Keep the extra copy next to Frame 2.
370. On that extra copy, onion on.
371. Erase only the eyes.
372. Draw two sleepy lines. Same as the blink lesson.
373. Leave the legs alone. If you bump a foot, Undo.
374. Order should look like: step, step+blink, step, step.
375. Play. FPS 8.
376. If the blink is too short to see, duplicate the blink frame once more.
377. If the walk stutters, you accidentally made two frames with the same legs. Delete the extra, keep the blink on only one step.
378. Click Save, then Send to Clean.
379. Download the GIF.
380. You walked and blinked.

Hold a ball

The ball is a layer. The hands move. The ball stays in the hands.

456. Draw a stand on Layer 1.
457. Add layer. Call this the ball layer in your head. Paint a round ball near one hand.
458. Duplicate the frame.
459. On Frame 2, click the ball layer.
460. Erase the ball from the old spot.
461. Paint it a few pixels over, still touching the hands.
462. If the hands need to follow, click Layer 1 and nudge only the hands. Not the feet.
463. Duplicate and move the ball again if you want a toss. Up, then down, then back in the hands.
464. Hide the ball layer. You should see empty hands. Show it. The ball returns.
465. Play. FPS 8.
466. If the ball slides through the body, the ball layer is behind the body. Move layer up.
467. Click Save, then Send to Clean. Flatten is fine. The download still shows the ball.
468. You made a hold.

Two characters, one canvas

Keep them on two layers so they do not glue together.

469. Layer 1: person A on the left.
470. Add layer. Layer 2: person B on the right.
471. Leave a gap of empty pixels between them.
472. Duplicate the frame.
473. On Frame 2, click Layer 2 only. Move person B one pixel toward A, or wave B’s arm.
474. Hide Layer 2. Only A remains. Show Layer 2. B returns.
475. Play. One person can move while the other stands still.
476. If they smear into one blob, you painted both on the same layer. Undo. Use two layers.
477. Click Save, then Send to Clean.
478. Download the GIF.
479. You made a two-person shot.

Throw the ball

The ball leaves the hands, flies, and is gone. Then a new ball can come back if you want.

480. Start from the hold-a-ball drawing.
481. Frame 1: ball in the hands.
482. Duplicate. Frame 2: ball one step away, still near the hands.
483. Duplicate. Frame 3: ball farther, higher if it is an arc.
484. Duplicate. Frame 4: ball near the edge of the square, or gone (erase it).
485. Keep the body on Layer 1. Move only the ball layer.
486. Hands on Layer 1 should follow a little on Frame 2, then rest.
487. Play. FPS 10.
488. If the ball teleports, you skipped too many pixels. Add a frame in between.
489. Click Save, then Send to Clean.
490. You made a throw.

Eat

Hand to mouth. Chew. Hand down.

501. Stand. Draw a tiny food pixel or two in one hand. Food can be its own layer.
502. Duplicate. Frame 2: hand and food move up to the mouth.
503. Duplicate. Frame 3: food is gone (erase food layer). Mouth can be a smaller line, like a bite.
504. Duplicate. Frame 4: chew. Move the mouth line one pixel. Or blink while chewing.
505. Duplicate the stand, no food, at the end. Hand down.
506. Play. FPS 6. Eating is slower than a poke.
507. If the food floats, it left the hand layer-wise. Keep food and hand moving together, or parent them in your head: move food first, then the hand to match.
508. Click Save, then Send to Clean.
509. You made an eat.

Rain

Rain is a layer. The person can idle underneath.

563. Draw a standing person on Layer 1.
564. Add layer. That is rain.
565. Paint short vertical dashes, not a solid sheet. Leave gaps.
566. Duplicate the frame.
567. On Frame 2, click the rain layer. Erase the old dashes. Paint new dashes two pixels lower.
568. Duplicate. Frame 3: dashes lower again, or back to the top if they fell off the square.
569. Hide rain. Person is dry. Show rain. It pours.
570. Play. FPS 12. Rain wants to be quicker than idle.
571. If the person smears, you painted rain on Layer 1. Undo. Rain layer only.
572. Click Save, then Send to Clean.
573. You made weather.

A shadow

The shadow proves they are on the ground.

574. Person on Layer 1.
575. Add layer. Move this layer down so it sits under the person (behind).
576. Pick a dark color, not pure black if the line art is black. Dark gray is fine.
577. Paint a flat oval under the feet, a few pixels wide.
578. Duplicate. If the person jumps later, on the air frame make the oval smaller and lighter (fewer pixels).
579. On land frames, fat oval. On air frames, tiny oval.
580. Play a jump with this shadow. The shadow should shrink in the air and grow on land.
581. If the shadow covers the feet, the shadow layer is on top. Move layer down.
582. Click Save, then Send to Clean.
583. You made a shadow.

A pet that follows

Tiny second character, two layers, two pixels behind.

584. Person on Layer 1, left-ish.
585. Add layer. Draw a tiny pet on the right of the person: four pixels of body, two of head.
586. Duplicate.
587. On Frame 2, move the person one pixel left (or right).
588. Then click the pet layer. Move the pet the same way, but one frame late if you want a follow: on Frame 2 the pet can stay, on Frame 3 the pet catches up.
589. Three frames: person moves, pet lags, pet catches up.
590. Play. FPS 8.
591. If they glue together, gap was zero. Leave one empty pixel between heel and pet.
592. Click Save, then Send to Clean.
593. You made a follower.

Open a door

The door is a layer. The person can stay still.

594. Paint a door rectangle on Layer 2, on the right side of the square.
595. Person on Layer 1, on the left.
596. Duplicate.
597. On Frame 2, click the door layer. Erase the door. Draw it thinner, like a line, as if it swung.
598. Duplicate. Frame 3: door even more open, or gone, showing empty space.
599. Optional Frame 4: person walks one step toward the opening. Person layer only.
600. Play. FPS 6.
601. Click Save, then Send to Clean.
602. You made a door.

Copy your own head onto a new job

Steal the face so every movie looks like the same friend.

621. Open the blink draft.
622. Zoom in on the head.
623. You cannot copy-paste pixels yet, so you redraw, counting.
624. Count how many pixels wide the head is. Write the number.
625. Count how many pixels from the top of the square to the top of the head.
626. Count eye row. Count gap between eyes.
627. New sprite. Same 64 × 64.
628. Draw the head using those counts. Same colors. Match color from image does not reach the other draft, so remember the hex or pick by eye.
629. Now add new legs for a walk, or a sit, or a swim.
630. Play. If the face matches, it is the same character in a new job.
631. Click Save. Keep this as the “master friend” draft.
632. Next movies duplicate from this master, not from a random blob.

Look at 1×

Zoom lies. Games often show the sprite small.

713. Draw anything you like at 600%.
714. Click 1x.
715. Squint. Can you still tell it is a person?
716. If it is a gray smear, the silhouette is weak. Zoom back in. Make the outline darker or the shape simpler.
717. Check the play preview too. That is closer to game size than a huge zoom.
718. Fix, then 1× again, until the blob reads as a friend.

Four colors only

Too many colors make flicker and mud.

719. Pick four colors for one friend: line, skin, shirt, extra (hair or shoes).
720. Write them down or keep the swatches in a corner of the canvas on a hidden layer.
721. Match color from image to reuse them. Do not pick a new red every frame.
722. Fill shirts with the same shirt color on every frame.
723. Play. If a frame flashes, that frame used a fifth color by accident.

Onion previous and next together

724. A walk with four frames.
725. Click the middle frame.
726. Turn onion previous on (red).
727. Turn onion next on (green).
728. You should see ghosts on both sides.
729. Use them to keep the head in one place.
730. Turn both off before you call it done, so you see the real pixels.

Throw away a bad frame

731. Make three frames on purpose. Make Frame 2 ugly on purpose.
732. Click Frame 2.
733. Click the trash can.
734. Frame 2 is gone. The others close the gap.
735. Play. The ugly one should not appear.
736. You cannot trash the last frame. If only one remains, that is your paper.

Reorder a movie

737. Make frames in the wrong order on purpose: closed eyes, then open, then closed, when you wanted open, closed, open.
738. Click a frame.
739. Use < or > until Play looks right.
740. Play after every move. Do not guess.

Undo is small, Reset is huge

741. Draw a mark.
742. Undo. The mark goes.
743. Redo. The mark returns.
744. Draw five marks.
745. Undo five times.
746. Now draw a whole face.
747. Do not hit Reset unless you want the face from when you opened this editor session, not from your last Save.
748. Reset is not “undo one.” Reset is “throw this session back to the start.”

One friend, many jobs (the real finish)

This is the last big project. Same head. Separate drafts. You already know every piece.

775. New sprite. 64 × 64.
776. Draw the master friend: head counts, four colors, feet on a floor row.
777. Save. This draft is master.
778. Duplicate frames only when this paper says so. For new jobs, prefer New sprite and redraw the head with your counts, or keep working copies from master if you are still in one file on purpose.
779. Make a blink draft. Two or three frames. Save. Send to Clean. Download GIF. Name it blink.
780. Make an idle draft. Two frames, one-pixel bob. Download GIF. Name it idle.
781. Make a walk draft. Four frames. Floor row. Download GIF and PNG. Name it walk.
782. Make a jump draft. Crouch, air, land. Shadow shrinks in the air if you want extra credit. Name it jump.
783. Make a hurt draft. Name it hurt.
784. You now have a tiny actor. Idle in place, walk, jump, blink, ouch.
785. Put the GIFs in a folder on your computer. That folder is the real backup. The browser notebook can vanish.

If something feels broken

786. Brush does nothing: click Brush so it is pressed. Crop should be off.
787. You painted the wrong frame: look at which thumbnail is highlighted. Click the right one.
788. You painted the wrong layer: look at which layer says active. Click the right one.
789. Play looks frozen: you only have one frame. Duplicate and change something.
790. Play is on the left, drawing is in the middle, Shortcuts is on the left above Play. Watch Play on the left. Draw in the middle.
791. You closed with X and it is gone: that throws away unsaved work. Next time click Save first.
792. You cannot find the drawing tomorrow: open Drafts on this browser, or Download next time. A draft is not a file on your desktop.
793. Fill ate everything: the outline had a gap. Undo, close the gap, Fill again.
794. You are on a tablet: one finger draws. Two fingers pinch to zoom and pan. Do not rest your palm on the square.
795. Two drafts got mixed: blink on one draft, walk on another. Name them when you can.
796. Flip turned the wrong pose: select the frame first, then Flip. Undo if it was the wrong one.
797. Combined movies feel random: write the order on paper first. Example: bounce, bounce, wave, stand.
798. The wall, rain, ball, or door moved with the person: you drew on the wrong layer. Hide layers one by one until you see which.
799. The sprite looks good zoomed and bad at 1×: simplify the silhouette. Fewer pixels, darker outline.
800. Colors flicker in Play: you used a different color on one frame. Match color, then Fill.

You are done

801. You can open New sprite.
802. You can make a mark, undo a mark, and save a draft.
803. You can make frames, hit Play, and see a movie beside the drawing.
804. You can keep the movie with Download, not only with Save.
805. You can build one friend: blink, idle, walk, jump.
806. That is the whole canvas course.

If you want another movie after this, invent it the same way: stand, duplicate, change one thing, Play, Save, Download. You do not need more paper. You need another mark.