--- title: "Sprite Maker: Draw and Animate Pixel Sprites Online" description: "Free sprite maker in your browser. Draw a character pixel by pixel, add frames with onion skin, preview the animation and export a sprite sheet or GIF." canonical_url: "https://spritesheetgenerator.online/sprite-maker" meta: author: "Dennis Postma" "og:description": "Free sprite maker in your browser. Draw a character pixel by pixel, add frames with onion skin, preview the animation and export a sprite sheet or GIF." "og:image": "https://spritesheetgenerator.online/og-image.png" "og:image:alt": "Spritesheet Generator editor showing sprites arranged on a sheet grid" "og:title": "Sprite Maker: Draw and Animate Pixel Sprites Online" "twitter:image": "https://spritesheetgenerator.online/og-image.png" "twitter:image:alt": "Spritesheet Generator editor showing sprites arranged on a sheet grid" --- > Index of every page on this site: [llms.txt](https://spritesheetgenerator.online/llms.txt) # **Sprite maker** Draw a character one pixel at a time, give it a few frames of movement, and export a sprite sheet your game can load. It runs in the browser, so there's nothing to install. [Start drawing](https://spritesheetgenerator.online/editor) *16 by 16 pixels and four colours. Click and drag to paint.* ## **From a blank square to a walk cycle** 1. ### **Open a blank frame** In the editor, switch to the Draw tab and click Add. An empty layer starts you on a 32 by 32 canvas. 2. ### **Draw the key pose** Pencil and eraser at brush size 1, fill for big areas, line and ellipse for shapes that are hard freehand. G toggles the pixel grid. 3. ### **Add the next frame** Onion skin shows the previous frame in red behind the one you are drawing, so you can see how far an arm or a foot moved. 4. ### **Play it** The Preview tab loops the frames at 1 to 60 FPS. Most pixel walk cycles look right somewhere between 8 and 12. 5. ### **Export** Download one PNG sheet, a GIF, the frames as a ZIP, or a sheet with a data file for Godot, Phaser, Tiled or an FNF mod. ## **Pick the size before the first pixel** Changing it later hurts. Doubling pixel art is clean, but any other scale invents pixels nobody drew and blurs the edges you placed by hand. The squares below are drawn to scale against each other. ### **16 × 16** Two pixels for an eye and not much else. Quick to animate, and every pixel matters. ### **32 × 32** Room for a face, clothes and a held item. The safe default for a first character. ### **64 × 64** Detailed portraits and big bosses. Four times the pixels of 32, and roughly four times the work per frame. ## **Before you start** ### ### ### ### Want the details on every tool? See the [**pixel art editor**](https://spritesheetgenerator.online/features/pixel-art-editor) page, or read the [**pixel art animation guide**](https://spritesheetgenerator.online/guides/pixel-art-animation). ## **Your character starts as one empty square.** [Start drawing](https://spritesheetgenerator.online/editor) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://spritesheetgenerator.online/#website","@type":"WebSite","description":"Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online/","publisher":{"@id":"https://spritesheetgenerator.online/#identity"}},{"@id":"https://spritesheetgenerator.online/sprite-maker#webpage","@type":"WebPage","description":"Free sprite maker in your browser. Draw a character pixel by pixel, add frames with onion skin, preview the animation and export a sprite sheet or GIF.","name":"Sprite Maker: Draw and Animate Pixel Sprites Online","url":"https://spritesheetgenerator.online/sprite-maker","breadcrumb":{"@id":"https://spritesheetgenerator.online/sprite-maker#breadcrumb"},"isPartOf":{"@id":"https://spritesheetgenerator.online/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://spritesheetgenerator.online/sprite-maker"]}],"primaryImageOfPage":{"@id":"https://spritesheetgenerator.online/#logo"}},{"@id":"https://spritesheetgenerator.online/#identity","@type":"Organization","description":"A free, browser based sprite sheet generator for 2D game developers and pixel artists.","name":"Spritesheet Generator","url":"https://spritesheetgenerator.online","logo":{"@id":"https://spritesheetgenerator.online/#logo"},"sameAs":["https://discord.gg/2vvfqwn5k7"]},{"@id":"https://spritesheetgenerator.online/sprite-maker#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://spritesheetgenerator.online","position":1},{"@type":"ListItem","name":"Sprite Maker","item":"https://spritesheetgenerator.online/sprite-maker","position":2}]},{"@id":"https://spritesheetgenerator.online/sprite-maker#/schema/question/1","@type":"Question","inLanguage":"en","name":"Is the sprite maker free?","acceptedAnswer":{"@type":"Answer","text":"Yes. Every tool and export is free, and you do not need an account. An account only adds saving projects to the cloud."}},{"@id":"https://spritesheetgenerator.online/sprite-maker#/schema/question/2","@type":"Question","inLanguage":"en","name":"What size should my first sprite be?","acceptedAnswer":{"@type":"Answer","text":"32 by 32 pixels. It has room for a readable face and a weapon, and a four frame walk cycle is an evening of work rather than a week."}},{"@id":"https://spritesheetgenerator.online/sprite-maker#/schema/question/3","@type":"Question","inLanguage":"en","name":"Can I import a sprite I drew somewhere else?","acceptedAnswer":{"@type":"Answer","text":"Yes. Drop PNG frames, a finished sheet or an animated GIF on the editor and keep drawing on top of them."}},{"@id":"https://spritesheetgenerator.online/sprite-maker#/schema/question/4","@type":"Question","inLanguage":"en","name":"Does it replace Aseprite?","acceptedAnswer":{"@type":"Answer","text":"No. Aseprite has layers inside each frame, a timeline and tilemaps. This is quicker to start and covers single sprites, short animations and the sheet export. A long project with dozens of animations is better off in a dedicated program."}},{"@id":"https://spritesheetgenerator.online/#logo","@type":"ImageObject","caption":"Spritesheet Generator","contentUrl":"https://spritesheetgenerator.online/web-app-manifest-512x512.png","inLanguage":"en","url":"https://spritesheetgenerator.online/web-app-manifest-512x512.png"}]} ``` ## Sitemap See the full [sitemap](https://spritesheetgenerator.online/sitemap.md) for all pages.