# Abrir, importar e exportar

Abra sprites e imagens, transforme imagens em pixel art, recorte sprite sheets e exporte imagens, animações, sheets, vídeo e timelapses.

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

O pxstud.io guarda seu trabalho no navegador conforme você avança ([Seu primeiro sprite](https://pxstud.io/pt-br/docs/manual/start/first-sprite.md#saving)).
Esta página trata de colocar arquivos para dentro e para fora. O que cada formato consegue fazer está em
[Formatos de arquivo](https://pxstud.io/pt-br/docs/manual/reference/file-formats.md).

## Abrir arquivos

Arquivo > Abrir... (`Ctrl+O`) abre um arquivo `.pxstudio` ou do Aseprite, um arquivo de outro
editor (Photoshop `.psd`, OpenRaster `.ora`, Piskel, Pixilart, Pixelorama, Pyxel Edit), ou uma
imagem (PNG ou PNG animado, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC),
como um novo sprite no projeto atual, com o nome do arquivo.
Você também pode **soltar** arquivos sobre o editor:

- Várias imagens de uma vez perguntam se devem ser abertas como **sprites separados** ou como **uma animação**
  (um quadro por imagem, na ordem do nome de arquivo).
- Uma imagem grande (com mais de 512 pixels de lado) pergunta se deve **importá-la como pixel art** ou abri-la
  como está.
- Outras imagens que o navegador consegue mostrar (SVG e assim por diante) vão para Importar como pixel art.

Quando algo em um arquivo não pode ser mantido, um aviso diz o quê, por exemplo o perfil de cor de um arquivo do
Aseprite, um modo de mesclagem que o pxstud.io não tem ou uma camada de ajuste do Photoshop. O que os arquivos de cada editor
mantêm está em [Formatos de arquivo](https://pxstud.io/pt-br/docs/manual/reference/file-formats.md).

Arquivo > Salvar como... (`Ctrl+Shift+S`) baixa o sprite como um arquivo `.pxstudio`, que mantém
tudo e abre de novo exatamente como estava.

## Importar

### Imagem como pixel art

Arquivo > Importar > Importar imagem como pixel art... transforma uma foto ou um desenho em pixel art.

1. **Escolher imagem...** ou solte uma aqui. (Imagens maiores que 4096 pixels são reduzidas antes.)
2. Defina o **tamanho**: largura e altura, ou um lado maior de 16, 32, 64 ou 128.
3. Escolha um **algoritmo**:
   - **Equilibrado (SLIC + k-means)**, o padrão, agrupa pixels em regiões de cor parecida;
   - **Suave com contornos (bilateral)** suaviza áreas e pode escurecer as bordas entre elas;
   - **Formas nítidas (Kopf-Lischinski)** mantém formas e contornos nítidos.
4. Escolha uma **paleta**: **Auto** encontra as melhores cores (de 2 a 64), ou use a paleta do sprite,
   uma de Minhas paletas ou uma paleta integrada.
5. Clique em **Iniciar** para ver o resultado, ajuste e clique em **Iniciar de novo** para atualizá-lo.
6. **Importar como** um novo sprite, ou como uma nova camada no sprite atual (centralizada), e clique em
   **Importar**. **Adicionar as cores da paleta à paleta do sprite** deixa as cores à mão para retoques.

### Sequência de imagens

Arquivo > Importar > Sequência de imagens... escolhe várias imagens e cria um sprite com um quadro por imagem,
em ordem natural de nome de arquivo (`run2` antes de `run10`). O sprite recebe o nome do primeiro arquivo
sem o número. Imagens de tamanhos diferentes ficam no canto superior esquerdo da maior.

### Sprite sheet

Arquivo > Importar > Sprite sheet... corta uma sheet em quadros. Escolha uma imagem, ou **Usar o sprite atual**.

- **Detectar grade automaticamente** procura os espaços vazios entre os quadros (transparentes, ou da cor de
  fundo da sheet) e ajusta o tipo, o tamanho do quadro, o deslocamento e o espaçamento de acordo. Ele roda quando você
  escolhe uma imagem, e de novo sempre que você clica nele. Precisa de espaços entre os quadros, então uma sheet
  cujos quadros se tocam mantém suas configurações e avisa.
- **Encontrar quadros por** **Detecção de cada sprite** serve para sheets que não estão em uma grade. Veja
  [Detectar sprites](https://pxstud.io/pt-br/docs/manual/guides/import-export.md#detecting-sprites) abaixo.
- **Tipo:** Faixa horizontal, Faixa vertical, Por linhas ou Por colunas.
- **Larg. quadro** e **Alt. quadro**, **Deslocamento**, **Espaçamento**, e se devem ser incluídas células parciais e
  ignoradas as vazias. Uma grade sobre a sheet mostra onde os cortes caem.
- **JSON do Aseprite...** lê os quadros, durações e tags do arquivo JSON que o Aseprite exporta
  com uma sheet, em vez da grade. Quadros recortados voltam ao seu lugar na tela completa, e
  o espaçamento interno do Aseprite fica de fora de cada quadro.
- **Criar** um novo sprite, ou **substituir os quadros do sprite atual** (um passo de desfazer).

#### Detectar sprites

Para sheets compactadas ou com espaçamento irregular, escolha **Detecção de cada sprite**. Cada grupo de
pixels que não são de fundo vira um quadro, mostrado como uma caixa numerada sobre a sheet.

- **Fundo:** Automático usa a transparência se a sheet tiver alguma, senão a cor mais comum
  dela. Ou escolha Transparente, ou uma cor.
- **Tolerância** (0 a 255): quão longe do fundo um pixel pode estar e ainda contar como vazio.
  Aumente para ignorar ruído leve ou a granulação de JPEG.
- **Distância de união:** caixas com no máximo essa quantidade de pixels vazios entre elas viram um só sprite, então uma
  espada ou faísca solta fica com seu personagem. 0 junta apenas caixas que se sobrepõem.
- **Pixels mín.:** sprites com menos pixels que isso são descartados como manchas.
- **Conexão:** se pixels que se tocam apenas em um canto pertencem ao mesmo sprite.
- **Ordem:** os quadros seguem linha por linha ou coluna por coluna.
- **Tamanho do quadro** é o tamanho do maior sprite, ou um tamanho personalizado (sprites maiores são cortados). A
  **Âncora** decide onde cada sprite fica nessa tela: embaixo no centro mantém os pés em uma linha,
  o que evita que um ciclo de caminhada trema.

Para corrigir o resultado à mão, clique em uma caixa para selecioná-la. Você pode mudar seu X, Y, L e A, deslocar
onde ela fica no quadro (**Deslocar X** e **Deslocar Y**), movê-la para **Antes** ou **Depois** na
ordem, ir para a caixa **Anterior** ou **Próxima**, ou **Excluí-la**. Arraste em uma parte vazia da sheet
para desenhar uma nova caixa, que é adicionada por último. Mudar uma configuração de detecção ou clicar em **Detectar de novo**
executa a detecção outra vez e descarta essas edições.

Sprites que se tocam não podem ser distinguidos e saem como uma só caixa; separe-os à mão, ou use a
grade.

## Exportar

Arquivo > Exportar... (`Ctrl+Alt+Shift+S`) abre uma caixa de diálogo para todos os formatos, com uma prévia do
arquivo real. Camadas ocultas, camadas de referência e [camadas de rascunho](https://pxstud.io/pt-br/docs/manual/guides/layers.md#draft-layers) nunca são
exportadas (um arquivo do Aseprite mantém todas as camadas).

**Para todos os tipos:**

- **Redimensionar (%)** escala em passos inteiros, de 100% a 1600%, para os pixels continuarem quadrados nítidos.
- **Aplicar proporção de pixel** estica pixels não quadrados ao seu formato.
- **Quadros:** todos, o quadro ativo ou os quadros de uma tag. **Direção da animação:** para frente,
  para trás ou ping-pong (para uma tag, para frente mantém a direção da própria tag).
- **Reproduzir subtags e repetições** (quando o sprite tem tags, ativado por padrão como no Aseprite): os
  quadros são exportados do jeito que a reprodução os toca, por cada tag na sua direção, incluindo tags
  aninhadas e contagens de repetição, então um quadro pode aparecer mais de uma vez. Desative para exportar
  cada quadro uma vez, em ordem (um arquivo por quadro em uma sequência de PNG).
- **Área** (quando o sprite tem [slices](https://pxstud.io/pt-br/docs/manual/guides/slices.md)): a tela inteira, um slice ou **Cada
  slice**, que grava uma exportação por slice. Um slice que se move ou muda de tamanho entre quadros é exportado
  na caixa que o cobre em todos os quadros exportados, para que todos os seus quadros tenham o mesmo tamanho. Com
  cada slice, `{slice}` no nome do arquivo vira o nome do slice (`{slice}.png` dá `head.png`);
  sem ele, o nome vai antes da extensão (`sprite-head.png`, `walk-head001.png`). Não vale para
  sprite sheets nem para os tipos de arquivo completo.
- **Nome do arquivo.** Para uma sequência de PNG, um número no nome define a numeração: `walk001.png` dá
  `walk001.png`, `walk002.png` e assim por diante; sem um número, os quadros são numerados como `sprite-001.png`.

**Por tipo:**

| Tipo | Opções |
| - | - |
| **PNG** | Uma imagem, ou uma por quadro. |
| **GIF animado** | **Número de repetições** (0 repete para sempre, ou usa a repetição da tag). **Dithering**: um GIF guarda 256 cores, então uma animação com mais cores recebe uma paleta escolhida a partir de todos os seus quadros, e isso escolhe como as cores intermediárias são desenhadas (as mesmas opções de [converter para indexado](https://pxstud.io/pt-br/docs/manual/guides/color.md#color-modes); padrões ordenados não piscam entre quadros). Pixels com menos de metade da opacidade ficam transparentes; o GIF guarda durações em passos de 10 ms, no mínimo 20 ms. |
| **PNG animado (APNG)** | **Número de repetições**. Mantém todas as cores, transparência suave e durações exatas; salvo como `.png`. Apps sem suporte a APNG mostram o primeiro quadro. |
| **WebP** | Estático ou animado; **Sem perdas**, ou uma **Qualidade** de 0 a 100; número de repetições. |
| **Sprite sheet** | Abaixo. |
| **Arquivo Aseprite** | O sprite inteiro, com camadas, grupos, cels vinculados, tags, slices e tilemaps. A opacidade e os modos de mesclagem dos grupos aparecem no Aseprite com **Experimental > Compose groups** ativado. |
| **Arquivo do Photoshop (PSD)** | O quadro ativo com suas camadas, grupos, modos de mesclagem, opacidade, visibilidade e recorte, mais a imagem mesclada. Abre no Photoshop, Krita, GIMP e Photopea. |
| **OpenRaster (ORA)** | O quadro ativo com suas camadas e grupos, para Krita, GIMP, MyPaint e Pixelorama. |
| **Arquivo Piskel** | Todos os quadros e camadas visíveis. Os grupos são achatados, e o arquivo recebe uma única taxa de quadros (da duração mais comum). |
| **Tilemap (JSON / Tiled)** | Imagens de tileset mais um mapa do Tiled ou um arquivo JSON ([Tilemaps](https://pxstud.io/pt-br/docs/manual/guides/tilemaps.md#exporting)). |
| **Vídeo MP4** | **Taxa de quadros** (Auto mantém todas as durações exatas), quantas vezes ele é **reproduzido** e uma **cor de fundo** (vídeo não tem transparência). Oferecido apenas onde o navegador consegue criar vídeo. |
| **Vídeo WebM (VP9)** | Quantas vezes ele é **reproduzido** e uma **cor de fundo** (vídeo não tem transparência). Mantém a duração exata de cada quadro. Oferecido apenas onde o navegador consegue criar vídeo. |
| **FLC** | O formato do Autodesk Animator: até 256 cores, a transparência vira preto. |
| **JPEG** | **Qualidade** e uma **cor de fundo**. |
| **AVIF** | **Qualidade**: 100 (o padrão) é sem perdas; menos gera um arquivo menor que não é exato em pixels. |
| **ICO, CUR** | Ícones e cursores do Windows, até 256×256. **Todos os tamanhos** também guarda cada tamanho inteiro maior até 256 (um sprite de 32×32 dá 32, 64, 96 … 256), para o Windows escolher um nítido. O ponto de clique de um cursor é o pivô de um slice chamado `hotspot`. |
| **ANI** | Um cursor animado do Windows, até 256×256. Cada quadro selecionado vira uma imagem do cursor exibida pela duração do quadro (arredondada para 1/60 s); quadros repetidos (ping-pong) são guardados uma vez. Defina o ponto de clique com **Hotspot X / Y** (começa no pivô do slice `hotspot`). |
| **PDF de artesanato** | Um padrão imprimível de ponto cruz, miçangas ou perler do quadro atual: uma capa com uma prévia e a contagem de cores, o gráfico dividido em páginas quadriculadas, e uma legenda listando o símbolo, a amostra, o hex, o nome do grupo da paleta e a contagem de pontos de cada cor. Defina o **tamanho da célula** (mm), o **tamanho da página** (A4 ou Carta), uma **linha de grade** mais grossa a cada N células, e **símbolos** ou **preenchimentos de cor**. Células transparentes são ignoradas; o modo de símbolos aceita até 56 cores. |
| **Netpbm** | `.pgm` não compactado (tons de cinza opacos), `.ppm` (cor opaca) ou `.pam` (com transparência); a extensão acompanha a imagem. |
| **TIFF** | Sem perdas, compactado com LZW. Sprites indexados mantêm a paleta (a menos que usem a cor transparente); outros sprites salvam RGB, ou RGBA quando algo é transparente. Um arquivo por quadro. |
| **JPEG XL** | Sem perdas, com transparência. Limitado a 1024×1024 pixels, então reduza o redimensionamento em exportações grandes. Um arquivo por quadro. |
| **BMP, TGA, PCX, QOI, SVG** | Um arquivo por quadro. O SVG desenha cada sequência de pixels da mesma cor como um retângulo. |

### Predefinições e fila

**Predefinições e fila**, na parte de baixo da caixa de diálogo Exportar, salva e agrupa exportações. Nada nela
pede confirmação.

- **Predefinições** guardam o tipo e todas as opções dessa aba (redimensionamento, quadros, área, nome do arquivo e as
  opções por tipo, como qualidade, fundo, hotspot, tamanho da célula ou as configurações da sprite sheet)
  sob um nome que você escolhe. **Salvar predefinição** com um nome existente a substitui. **Aplicar** preenche a
  caixa de diálogo com uma predefinição, e **Renomear** e **Excluir** fazem o que dizem. As predefinições ficam neste
  dispositivo e não exigem conta. Uma escolha de tag, slice ou quadro de uma predefinição que o sprite atual
  não tem volta para todos os quadros ou a tela inteira.
- **Fila:** **Adicionar atual à fila** (ou **Adicionar à fila** de uma predefinição) coloca na fila uma exportação com as
  configurações como estão agora. **Executar fila** cria todos os arquivos de uma vez: um download, ou um único
  `pxstudio-export.zip` quando os itens geram vários arquivos. Cada item mostra Aguardando, Concluído ou o
  erro que o interrompeu; um item que falha não interrompe os outros, e **Executar fila** de novo tenta
  os que falharam de novo. **Remover** tira um item. A fila é para o sprite e a caixa de diálogo que você tem
  abertos, e fica vazia de novo quando a caixa de diálogo é fechada.

### Sprite sheets

O tipo **Sprite sheet** tem quatro abas, organizadas como as do Aseprite:

- **Layout:** faixa, linhas, colunas ou **Compactado**; um número fixo de colunas ou linhas, ou uma largura
  ou altura fixa; melhor ajuste; mesclar quadros duplicados; ignorar os vazios.
- **Sprite:** quais camadas e quadros, se camadas ou tags devem ser separadas, e o recorte.
- **Bordas:** margem da borda, espaço entre formas e margem interna, e **Extrusão** (repete os pixels da borda, para evitar
  emendas em jogos).
- **Saída:** uma **Predefinição de engine**, o **Arquivo de dados** (JSON do Aseprite como Hash ou Array, ou um
  SpriteFrames `.tres` do Godot 4) e, para JSON, como cada quadro é nomeado.

Os layouts funcionam como os do Aseprite, então as mesmas opções dão a mesma sheet:

- Faixas, linhas e colunas colocam cada quadro no seu próprio tamanho, então quadros recortados não ocupam o
  espaço do maior. Sem restrição, **Por linhas** e **Por colunas** fazem uma grade quase
  quadrada.
- **Separar camadas** coloca os quadros de cada camada um depois do outro, e **Separar tags** os de cada tag.
  **Por linhas** começa uma nova linha para cada camada e tag (**Por colunas**, uma nova coluna), a menos que uma
  largura (altura) fixa as quebre.
- **Compactado** encaixa os quadros, do maior ao menor, na menor sheet possível, perto de um quadrado (100
  quadros recortados de 4 a 43 px dão 258×236 px, como no Aseprite). **Melhor ajuste: Menor área** tenta mais alguns
  tamanhos, e **Menor potência de dois** dá uma sheet com potência de dois.
- Uma largura ou altura fixa é a largura ou altura da sheet, mesmo que os quadros usem menos.
- A prévia avisa quando a sheet passa de 16384 px de lado, o que muitas GPUs e engines não conseguem
  carregar.

Recorte:

- **Recortar sprite** corta todos os quadros na área que qualquer quadro usa. **Recortar cels** corta cada quadro no
  seu próprio conteúdo. Com uma camada Plano de fundo visível, os dois removem a cor de fundo (a
  cor do pixel do canto superior esquerdo) em vez da transparência.
- **Recortar pela grade** expande a área recortada até as linhas da grade, para qualquer um dos dois recortes.
- O JSON mantém os quadros em coordenadas da tela: `sourceSize` é o tamanho da tela e
  `spriteSourceSize` é onde os pixels do quadro ficam nela, então engines e reimportações mantêm cada
  quadro no lugar.

Nomes de quadro: deixe **Nome do arquivo do item** vazio para os nomes do Aseprite, `{title} {frame}.{extension}`,
com ` ({layer})` acrescentado para uma camada e ` #{tag}` para uma tag (`hero (Body) #walk 0.aseprite`).
`{frame}` conta a partir de 0 para cada camada e tag. Os tokens são os do Aseprite:

| Token | Vira |
| - | - |
| `{title}`, `{extension}`, `{name}` | O nome do arquivo sem a extensão, a extensão (`aseprite`) e os dois. |
| `{layer}`, `{group}` | A camada, quando os quadros vêm de uma camada, e o grupo dela. |
| `{tag}`, `{innertag}`, `{outertag}` | A tag exportada, ou a menor tag que contém o quadro; `{outertag}` é a maior. |
| `{frame}`, `{tagframe}` | O número do quadro e o número dele dentro da tag. Os dígitos definem o início e a largura: `{frame1}` conta 1, 2, …; `{frame001}` dá 001, 002, …. |
| `{duration}` | A duração do quadro em milissegundos. |

Você recebe o PNG da sheet e um arquivo de dados com o mesmo nome. O JSON lista a posição e a duração
de cada quadro, as tags, as camadas exportadas e os slices, e pode ser lido por engines de jogo e
ferramentas que leem o JSON do Aseprite. Diferente do Aseprite, o retângulo `frame` de um quadro não inclui a
margem interna, e os intervalos das tags contam os quadros da sheet. Como no
Aseprite, os quadros de uma tag ficam na ordem da linha do tempo na sheet, e a direção e a contagem de repetição dela
estão no JSON para a engine de jogo aplicar.

As **predefinições de engine** configuram o layout para uma engine de jogo em um clique: **Godot 4** e
**Phaser / PixiJS** compactam os quadros, recortam cada um no seu conteúdo, mesclam duplicados e adicionam 1 px de
extrusão, para que os quadros não peguem as bordas dos vizinhos quando a câmera se move ou a textura é
filtrada. O Godot 4 também escolhe o arquivo de dados `.tres`. **Padrões do Aseprite** devolve o layout a uma
faixa simples. Você pode mudar qualquer opção depois.

#### Godot 4

Com o arquivo de dados **Godot 4 SpriteFrames (.tres)**:

- Cada tag vira uma animação com o nome da tag. Um sprite sem tags recebe uma animação
  chamada `default`. Com **Separar camadas**, as animações se chamam `layer/tag`.
- As durações dos quadros passam exatamente: a velocidade da animação vem da duração de quadro
  mais comum, e quadros mais longos ou mais curtos recebem uma duração relativa correspondente.
- O Godot não tem configuração de reverso, ping-pong ou repetição, então os quadros são escritos na ordem de reprodução. Uma
  tag com contagem de repetição é reproduzida essa quantidade de vezes (cada sentido de um ping-pong conta uma vez) e não
  fica em loop; as outras tags ficam em loop.
- Quadros recortados mantêm o tamanho e a posição completos, então o sprite não pula entre quadros.

Coloque o PNG e o `.tres` na mesma pasta do seu projeto Godot, depois escolha o `.tres` como os
**Sprite Frames** de um **AnimatedSprite2D**. Para pixels nítidos, defina **Project Settings >
Rendering > Textures > Default Texture Filter** como **Nearest**.

## Exportar timelapse

Arquivo > Exportar timelapse... cria um pequeno GIF ou MP4 do seu sprite sendo desenhado, para compartilhar.

- **Animar:** **Desenhar o sprite pronto** (os pixels aparecem em uma ordem que você escolhe: uma varredura,
  dissolução aleatória, varredura diagonal, espiral, a partir do centro ou cor por cor), ou **Reproduzir minhas
  edições** (seu histórico de desfazer real desta sessão, traço por traço: os passos que levaram
  até onde você está agora, sem passos desfeitos nem outras ramificações). Escolha um intervalo de edições (**Da edição**
  / **Até a edição**) e **Mostrar a cada** N edições para acelerar construções longas.
- Com várias camadas ou quadros, escolha se são desenhados juntos ou um por vez.
- **Tempo:** tempo de desenho, taxa de quadros, ritmo (suave no início e no fim, constante, acelerar, desacelerar), uma
  pausa entre quadros, uma pausa no final e quantas vezes a animação pronta é então reproduzida.
- **Saída:** GIF ou MP4, escala (o padrão mira 1080 pixels), margem, uma tela quadrada e
  a cor de fundo (ou transparente, para GIF).