Vapor Pixel

Tools

Arrow keys move the cursor. Space or Enter uses the current tool on that cell. Delete clears it. The status line reads the cell and its color.

Colors
Any color
#000000

Photo to pixel art

The photo is cropped to a square from its center.

Import sprite sheet

Frames are read left to right, top to bottom. The lines on the sheet show where it is cut.

Palette

All colors. Tap a color to add it to this palette, tap it again to remove it.

Palettes from lospec.com, the pixel art palette list.

Colors in this palette
Shades of the current color
Save this palette as a file

.gpl opens in GIMP, Aseprite and Krita. .ase opens in Photoshop and Illustrator. .hex is one color per line.

Policies

Music

Vapor Pixel mix HoliznaCC0 01 A

Press Play

    All tracks are CC0 (free to use). The music keeps playing when you close this window.

    Buy me a coffee

    Vapor Pixel is free. No account, no ads, nothing to install. If it helped you make something, a coffee is a nice way to say so.

    Checkout is on Stripe and shows Glenmore Studio, the company that makes Vapor Pixel.

    Sprite library

    Tools

    Draw
    Lines, shapes and text
    Dither brush, for shading
    Grid

    Settings

    Drawing
    Panels
    Look
    Support
    Policies

    Built by Glenmore Studio

    How it works

    Drawing

    Pick a tool and a color, then tap or drag on the grid. Undo and Redo sit above the grid, top left.

    Your drawing stays in this browser and comes back when you return. Clearing the site's data in your browser deletes it.

    Grid size in Settings has square sizes from 8 x 8 to 512 x 512, and Custom size for any width and height up to 512, with where the drawing stays when the size changes.

    History, in Settings, lists every change by name. Tap one to go back to it; the later ones wait below until you tap them or draw something new.

    Drawings, in Settings, holds every drawing you make in this browser, each with its own layers, frames, palette and timelapse. Start a new one, open, rename, copy or delete one, or open a Vapor Pixel or Aseprite file.

    With a mouse, the right button erases with whatever tool is in hand. Hold E to use the eraser until you let go. With an Apple Pencil on iPad, double-tap the Pencil to switch between drawing and erasing.

    Today's prompt, at the top of Drawings, gives one theme a day with a grid size and a palette. Draw it starts a drawing set up for it; sharing that drawing adds it to the day's page of drawings.

    Draw together, in Drawings, opens a room for the drawing on the grid and gives a link. Everyone who opens the link draws on the same drawing, live; each person's pointer shows as a square in their color. Leave the room from the Live button; everyone keeps a copy in Drawings.

    Tools

    The row under the grid scrolls sideways. The Tools button opens every tool on one screen.

    PencilColors one cell with the current color. Drag to draw a stroke. Tap the pencil again for brush size, round or square, pixel perfect (clean 1-pixel curves) and Lighter or Darker ink, which steps pixels along the palette for shading.
    EraserEmpties a cell. Empty cells save as transparent. Tap the eraser again for its size.
    FillColors every connected cell of the same color. Tap it again for Gradient: drag across an area and the color fades out along the drag, in dots.
    Dither brushPaints a checkered pattern of dots for shading. Pick 25%, 50% or 75% for how many cells it colors.
    Replace colorTap a cell. Every cell of that color in the frame takes the current color.
    Select and moveDrag a box, then drag inside it to move those cells. Tap the tool again to select with a lasso or by color, select all, or paste. The panel flips, turns, doubles or halves the selection, draws an outline around it, copies, cuts or deletes it. Tap Put down to finish, or Cancel to put everything back.
    Pick a colorTap a cell to make its color the current color.
    LineDrag from one end to the other.
    TextTap the grid where the text starts, type, then tap Add to drawing. Text is 10 to 32 cells tall.
    Rectangle, circle, triangleDrag to draw the shape. Drag its sides or corners to resize it, or its middle to move it. Choose Outline or Filled, then tap Add to drawing.
    MirrorEverything you draw also appears mirrored. Tap to step through sides, top and bottom, both ways, and off.
    Tiled 3 x 3Shows the drawing repeated 3 x 3. A stroke past an edge continues on the opposite edge, for seamless patterns.
    Grid linesShows or hides the lines between cells.
    Clear the gridEmpties the whole frame. Undo brings it back.
    Colors and palettes

    The square at the start of the color row is the current color. Tap it to pick any color by hue and brightness, or type a hex, RGB, HSL, HSB or CMYK value.

    The other squares are the palette. Change the palette in Settings. Edit palette lets you add and remove colors and save your own palettes, and export them for GIMP, Aseprite, Krita or Photoshop.

    Adjust colors changes hue, saturation and brightness of the selection, this layer or everything, and shows it as you drag. Keep to the palette turns every changed color into the nearest palette color.

    To change a palette color everywhere, double-click it in the colors panel, or use Change selected color in Edit palette: every pixel of that color changes with it. Palette only leaves the drawing as it is.

    From Lospec, in Edit palette, gets any palette from lospec.com by its name or link and saves it as your own.

    Shades of the current color, in Edit palette, makes 3, 5 or 7 shades around the current color: darker ones lean toward blue, lighter ones toward yellow, as in hand-shaded pixel art. Add these shades puts them in the palette.

    Photo to pixel art

    Open it from Settings, or drop a photo on the grid. The app crops it to a square from the center and shrinks it to the grid size you pick.

    Colors: take 4, 8, 16 or 32 colors from the photo, or use the current palette.

    Dither mixes dots of two colors to fake the shades in between. Floyd-Steinberg gives smooth gradients. Atkinson gives a lighter, higher-contrast look. Bayer repeats a fixed pattern: 2 x 2 is the coarsest, 8 x 8 the finest.

    Your browser does the work. The photo is not uploaded.

    Reference and sprite library

    Reference shows a sprite next to your drawing to copy from. Pick one from the sprite library or choose your own image. The app finds the sprite's real pixel size, even when the file is scaled up.

    Under the grid places the sprite behind your drawing, 1 sprite pixel per cell, to trace. Put it on the grid copies it onto the grid and saves its colors as a palette.

    Click the picture in Reference to take a color from it.

    Layers

    Layers are off until you open them in Settings. Each layer is a separate drawing, stacked on the ones below it. The layer at the top of the list is in front.

    Tap a layer to draw on it. Drag a layer to move it up or down. The eye shows or hides it; the lock stops any drawing on it. Double-tap a name to rename it.

    Blend sets how a layer mixes with the ones below, for example Multiply for shadows. Keep transparent paints only on pixels the layer already has. Clip to layer below shows the layer only where the layer below has pixels. Same on every frame shares one layer across all animation frames, for a background.

    PNG, SVG and GIF save the layers merged, as you see them. Merge all turns every visible layer into one. Undo brings layers back.

    Tiles, for games

    Tiles, in Settings, cuts the drawing into 8, 16 or 32 pixel tiles. Identical tiles become copies of one tile: drawing on one copy changes every copy, with any tool. The panel lists the different tiles; pick one and click places on the grid to put copies there, or use Own tile so a place changes on its own.

    Save then offers a tileset PNG and a map for Tiled, a tile map editor whose files Godot, Unity and Phaser read.

    Animation

    Turn on the animation timeline in Settings. New frame copies the frame you are on. Drag frames to reorder them. Show previous frame shows the last frame faintly under this one. Play runs the animation at the speed you pick.

    This frame sets how long the frame you are on shows, in milliseconds; Speed sets every frame. Tag frames names a run of frames and how it plays: forward, reverse or ping-pong. Loop picks the tag Play repeats. Onion skin shows up to 3 frames before (red) and after (blue). The box at the end of the timeline plays the animation while you draw.

    Saving

    Save gives you a PNG at the grid size, a large PNG, or an SVG that scales to any size. With more than one frame it also offers an animated GIF. PNG and SVG save the frame you are on.

    A Vapor Pixel file keeps everything: layers, frames, palette and settings. Open it again with Open a file in Settings, or drop it on the grid. Aseprite files (.aseprite) open and save too.

    Every change you make is kept as a step. Save, then Timelapse video, plays them back as a video of the drawing being made: square for posts or tall for stories, 10 to 60 steps a second.

    Share a link, in Save, puts the drawing on its own page at vaporpixel.com. Anyone with the link can see it and tap Remix it to get a copy of their own to change. Your links are listed in the same window, where you can delete them.

    GB Studio, in Save, makes files for GB Studio, a tool for making real Game Boy games: a background in its 4 greens, padded to at least 160 x 144, and, for 16 x 16 drawings, a sprite with the frames side by side.

    Music

    Music opens a cassette deck with 5 tapes: lo-fi, dungeon, synthwave, vaporwave and bossa. Pick a tape, then play, skip or change the volume. The music keeps playing when you close the deck. Every track is free to use under CC0; Credits in the Menu lists them.

    Settings and Menu

    Settings holds the grid size, the palette, Photo to pixel art, the reference and animation panels, and dark mode. Menu holds Buy me a coffee and the policies.

    Game Boy screen, in Settings, shows every pixel as a square with a thin gap around it, as on the original Game Boy. The big PNG, the big GIF and the timelapse video save with it too.

    Size, flip and turn

    The drawing stays
    The whole drawing, every frame and layer
    Common sizes

    Tag

    Plays

    Adjust colors

    0
    0
    0
    Change

    Timelapse

    Speed
    Shape

    Every change you make is kept as a step in this browser. The video shows the frame you were on.

    History

      Vapor Pixel Pro

      FreePro
      Every tool, palette and export on the websiteYesYes
      Saved drawings3No limit
      Layers in a drawing364
      Grid sizeUp to 128 x 128Up to 512 x 512
      Aseprite filesOpenOpen and save
      Timelapse videoWith vaporpixel.com in the cornerWith or without it

      One payment. No subscription and no ads.

      Drawings

      Draw together

      Invite people to draw on this drawing with you, live. Anyone with the link can draw on it while the room is open.

      Share a link

      Anyone with the link can see this drawing and make a copy of it to change. The link keeps the drawing as it is now; you can delete it here.

      Draw together

      Everyone in the room draws on the same drawing. Each person's pointer shows as a square in their color. The room closes when everyone leaves; each person keeps a copy in Drawings.

      Save