# Seu primeiro sprite

Abra o editor, crie um sprite, desenhe e salve e exporte seu trabalho.

_Os atalhos estão escritos para Windows e Linux. No Mac, use ⌘ Cmd onde está Ctrl e ⌥ Option no lugar de Alt._

Este passo a passo mostra como fazer um sprite pequeno do começo ao fim: criá-lo, desenhar, desfazer
erros e gerar um PNG. Leva cerca de cinco minutos.

## Abrir o editor

Acesse [app.pxstud.io](https://app.pxstud.io). Não há nada para instalar nem conta para criar: o
editor começa com um projeto chamado "Projeto sem título" com um sprite em branco, "Sem título 1"
(64×64 pixels, transparente, com uma paleta inicial de 24 cores).

O layout padrão tem:

- a **barra de menus** no topo;
- a **paleta**, o **seletor de cor** e as **cores de primeiro plano e de fundo** à esquerda;
- a barra de **opções de ferramenta**, a **tela** e a **linha do tempo** no meio;
- a **barra de ferramentas** à direita.

Em um celular ou em uma janela pequena, o editor usa um layout compacto, com os painéis laterais
reunidos em abas. Tudo continua lá; veja [O espaço de trabalho](https://pxstud.io/pt-br/docs/manual/guides/workspace.md).

## Criar um novo sprite

Escolha Arquivo > Novo sprite... (`Ctrl+Alt+N`) ou clique em **+** no fim das abas de sprites. A caixa de
diálogo Novo sprite abre em 64×64.

![A caixa de diálogo Novo sprite com a aba de predefinições Em branco aberta, tamanhos quadrados de 8x8 a 256x256 e os campos Nome, Largura, Altura, Modo de cor, Fundo e Paleta à direita](https://pxstud.io/manual/images/start/new-sprite-dialog.light.webp)

_A caixa de diálogo Novo sprite_

- As **Predefinições** no topo preenchem tamanhos comuns: **Em branco** (quadrados e telas de
  jogos), **Redes sociais** (YouTube, Instagram e mais), **Consoles** (as telas nativas de sistemas
  clássicos e consoles de fantasia como o PICO-8), **Lojas** (Steam, itch.io e lojas de apps) e
  **Recentes** (tamanhos que você já usou).
- Para os tamanhos de Redes sociais e Lojas, uma linha **Tamanho do pixel** oferece telas menores
  que ampliam de forma exata. Escolha "320x180 ×4", desenhe em 320×180 e exporte a 400% para obter
  uma imagem nítida de 1280×720.
- **Largura** e **Altura** definem o tamanho por conta própria.
- **Modo de cor** é Cor RGBA (qualquer cor, com transparência), Tons de cinza ou Cor indexada (cada
  pixel é uma das cores da paleta).
- **Fundo** é Transparente, Branco ou a sua cor de fundo. Um fundo não transparente se torna uma
  [camada Plano de fundo](https://pxstud.io/pt-br/docs/manual/guides/layers.md#the-background-layer).
- **Paleta** inicia o sprite com a paleta padrão, uma de Minhas paletas ou uma paleta integrada.

Clique em **Criar**. O sprite abre em uma nova aba, no projeto atual.

## Desenhar

1. Escolha uma cor: clique em uma amostra da paleta para torná-la a cor de **primeiro plano**, ou
   clique com o botão direito para torná-la a cor de **fundo**. Pressione `X` para
   trocar as duas.
2. Escolha o Lápis (`B`) e arraste sobre a tela. O botão direito do mouse
   desenha com a cor de fundo.
3. Experimente o Balde de tinta (`G`) para preencher uma área, o Retângulo
   (`U`) para caixas e o Borracha (`E`) para apagar pixels.
   Manter `Alt` pressionado sobre a tela captura uma cor com o Conta-gotas.

Todas as ferramentas estão descritas na [referência de Ferramentas](https://pxstud.io/pt-br/docs/manual/reference/tools.md).

**Desfaça** com `Ctrl+Z` e **refaça** com `Ctrl+Shift+Z` ou `Ctrl+Y`. Cada sprite tem seu próprio histórico de
desfazer, e o botão de histórico abaixo deles na barra de ferramentas (ou Editar > Histórico de desfazer)
mostra cada etapa como uma árvore para que você possa voltar a qualquer uma, inclusive às etapas que
você desfez e depois substituiu por outra coisa.

## Mover-se pela tela

- **Dê zoom** com a roda do mouse ou um gesto de pinça no trackpad (o zoom é feito em torno do
  ponteiro), ou com `Ctrl+=` e `Ctrl+-`. `Ctrl+Shift+0` ajusta o sprite
  inteiro à janela.
- **Mova a visualização** com a rolagem de dois dedos no trackpad, o botão do meio do mouse ou a
  Mão (`H`).
- Em uma tela sensível ao toque, um dedo desenha e dois dedos fazem pinça para dar zoom e mover.
  Toque com dois dedos para desfazer, ou com três para refazer.

## Salvar

Você não precisa salvar: cada alteração é guardada no navegador enquanto você trabalha, e o
cabeçalho mostra **Salvo localmente** quando isso acontece. Feche a aba e volte mais tarde, e seu
projeto, os sprites e as abas que você tinha abertas continuam lá. O editor também funciona offline
depois de aberto uma vez.

Você também pode instalar o editor como um app, com janela e ícone próprios: no Chrome, no Edge e
em outros navegadores baseados em Chromium, use o ícone de instalação no fim da barra de endereço;
no iPhone e no iPad, toque em Compartilhar e depois em **Adicionar à Tela de Início**. Em um
computador ou em um celular Android, o app e a aba do navegador compartilham o mesmo trabalho. No
iPhone e no iPad, o app da Tela de Início guarda a própria cópia, separada da do Safari: entre no Sync
nos dois para ter os mesmos sprites.

- Arquivo > Salvar (`Ctrl+S`) salva na hora em vez de esperar um instante.
- Arquivo > Salvar como... (`Ctrl+Shift+S`) baixa o sprite como um arquivo `.pxstudio`, uma cópia que
  você pode guardar, compartilhar ou abrir de novo com Arquivo > Abrir... (`Ctrl+O`).

> **Aviso:** O trabalho salvo no navegador fica nesse navegador. Limpar os dados de sites do navegador o exclui,
> e ele não está nos seus outros dispositivos. Baixe uma cópia com Arquivo > Salvar como... para mantê-lo
> seguro, ou use o Sync no pxstud.io para guardar seu trabalho na sua conta.

## Exportar um PNG

Escolha Arquivo > Exportar... (`Ctrl+Alt+Shift+S`). A caixa de diálogo mostra uma prévia ao vivo do
arquivo que você vai obter.

- **Tipo:** PNG, GIF animado, PNG animado, sprite sheet, arquivo Aseprite, WebP, vídeo MP4 e mais.
- **Redimensionar:** amplie a imagem em passos inteiros (100% a 1600%) para que cada pixel continue
  um quadrado nítido. A pixel art costuma ser desenhada pequena e exportada grande.
- **Quadros:** todos, apenas o atual ou os quadros de uma tag.

Clique em **Exportar** e o arquivo é baixado.

## Encontrar qualquer comando

Pressione `Ctrl+K` para abrir a paleta de comandos e digite o que você quer
("flip", "onion", "export"). Ela lista todos os comandos com o menu e o atalho de cada um, e os que
você usou recentemente vêm primeiro.

## Próximos passos

- [Camadas](https://pxstud.io/pt-br/docs/manual/guides/layers.md): desenhe o contorno, as cores e o sombreamento separadamente.
- [O espaço de trabalho](https://pxstud.io/pt-br/docs/manual/guides/workspace.md): organize os painéis do jeito que preferir.
- [Menus](https://pxstud.io/pt-br/docs/manual/reference/menus.md): tudo o que há na barra de menus.