# Your first sprite

Open the editor, make a sprite, draw, and save and export your work.

_Shortcuts are written for Windows and Linux. On a Mac, use ⌘ Cmd where they say Ctrl, and ⌥ Option for Alt._

This walks through making a small sprite from start to finish: creating it, drawing, undoing
mistakes, and getting a PNG out. It takes about five minutes.

## Open the editor

Go to [app.pxstud.io](https://app.pxstud.io). There's nothing to install and no account to make: the editor starts
with a project called "Untitled Project" holding one blank sprite, "Untitled 1" (64×64 pixels,
transparent, with a 24-color starter palette).

The default layout has:

- the **menu bar** across the top;
- the **palette**, **color picker** and **foreground/background colors** on the left;
- the **tool options** bar, the **canvas** and the **timeline** in the middle;
- the **toolbar** on the right.

On a phone or a small window, the editor uses a compact layout instead, with the side panels
folded into tabs. Everything is still there; see [The workspace](https://pxstud.io/docs/manual/guides/workspace.md).

## Make a new sprite

Choose File > New Sprite... (`Ctrl+Alt+N`), or click **+** at the end of the sprite tabs. The New
Sprite dialog opens on 64×64.

![The New Sprite dialog with the Blank presets tab open, square sizes from 8x8 to 256x256, and the Name, Width, Height, Color Mode, Background and Palette fields on the right](https://pxstud.io/manual/images/start/new-sprite-dialog.light.webp)

_The New Sprite dialog_

- **Presets** across the top fill in common sizes: **Blank** (squares and game screens),
  **Social** (YouTube, Instagram and more), **Consoles** (the native screens of classic systems
  and fantasy consoles like PICO-8), **Stores** (Steam, itch.io and the app stores) and
  **Recent** (sizes you've used).
- For Social and Stores sizes, a **Pixel Size** row offers smaller canvases that scale up exactly.
  Pick "320x180 ×4", draw at 320×180, and export at 400% to get a crisp 1280×720 image.
- **Width** and **Height** set the size yourself.
- **Color Mode** is RGBA Color (any color, with transparency), Grayscale, or Indexed Color (every
  pixel is one of the palette's colors).
- **Background** is Transparent, White, or your background color. A non-transparent background
  becomes a [Background layer](https://pxstud.io/docs/manual/guides/layers.md#the-background-layer).
- **Palette** starts the sprite with the default palette, one of My Palettes, or a built-in
  palette.

Click **Create**. The sprite opens in a new tab, in the current project.

## Draw

1. Pick a color: click a swatch in the palette to make it the **foreground** color, or right-click
   it to make it the **background** color. Press `X` to swap the two.
2. Pick the Pencil (`B`) and drag on the canvas. The right mouse button draws
   with the background color.
3. Try the Paint Bucket (`G`) to fill an area, the Rectangle
   (`U`) for boxes, and the Eraser (`E`) to clear pixels.
   Holding `Alt` over the canvas picks up a color with the Eyedropper.

Every tool is described in the [Tools reference](https://pxstud.io/docs/manual/reference/tools.md).

**Undo** with `Ctrl+Z` and **redo** with `Ctrl+Shift+Z` or `Ctrl+Y`. Each sprite has its own undo history,
and the history button under them in the toolbar (or Edit > Undo History) shows every step as
a tree so you can jump back to any of them, including steps you undid and then replaced with
something else.

## Move around

- **Zoom** with the mouse wheel or a trackpad pinch (it zooms around the pointer), or with
  `Ctrl+=` and `Ctrl+-`. `Ctrl+Shift+0` fits the whole sprite in view.
- **Pan** with a two-finger trackpad scroll, the middle mouse button, or the Hand
  (`H`).
- On a touch screen, one finger draws and two fingers pinch to zoom and pan. Tap with two fingers
  to undo, or three to redo.

## Saving

You don't have to save: every change is kept in your browser as you work, and the header shows
**Saved locally** once it is. Close the tab and come back later, and your project, its sprites and
the tabs you had open are still there. The editor also works offline once you've opened it.

You can also install the editor as an app, with its own window and icon: in Chrome, Edge and
other Chromium browsers, use the install icon at the end of the address bar; on iPhone and iPad,
tap Share, then **Add to Home Screen**. On a computer or an Android phone, the app and the browser
tab share the same work. On iPhone and iPad, the Home Screen app keeps its own copy, apart from
Safari's: sign in to Sync in both to have the same sprites.

- File > Save (`Ctrl+S`) saves right away instead of waiting a moment.
- File > Save As... (`Ctrl+Shift+S`) downloads the sprite as a `.pxstudio` file, a copy you can
  keep, share, or open again with File > Open... (`Ctrl+O`).

> **Warning:** Work saved in the browser stays in that browser. Clearing your browser's site data deletes it, and
> it isn't on your other devices. Download a copy with File > Save As... to keep it safe, or use
> Sync on pxstud.io to keep your work in your account.

## Export a PNG

Choose File > Export... (`Ctrl+Alt+Shift+S`). The dialog shows a live preview of the file you'll
get.

- **Type:** PNG, Animated GIF, Animated PNG, Sprite Sheet, Aseprite file, WebP, MP4 video and more.
- **Resize:** scale the image up by whole steps (100% to 1600%) so every pixel stays a sharp
  square. Pixel art is usually drawn small and exported big.
- **Frames:** all of them, only the current one, or one tag's frames.

Click **Export** and the file downloads.

## Find any command

Press `Ctrl+K` to open the command palette and type what you want ("flip",
"onion", "export"). It lists every command with its menu and shortcut, and the ones you used
recently come first.

## Next

- [Layers](https://pxstud.io/docs/manual/guides/layers.md): draw the outline, colors and shading separately.
- [The workspace](https://pxstud.io/docs/manual/guides/workspace.md): arrange the panels the way you like.
- [Menus](https://pxstud.io/docs/manual/reference/menus.md): everything in the menu bar.