Como editar um PNG no navegador: passo a passo

O que você vai produzir

Este tutorial conduz um PNG local por um fluxo de trabalho completo de edição no navegador: abra-o no PhotoCraft, pinte uma marca óbvia, exporte um PNG e inspecione o arquivo fora do editor. Você também salvará um arquivo PSD salvo para que uma imagem exportada não seja sua única cópia restante. O exemplo usa nossa imagem de teste sintética 320 × 320 e a versão fixa v0.12.0 WebAssembly. Não precisa de conta ou serviço de upload de imagens.

O objetivo é uma pequena edição confiável, não uma afirmação de que todos os fluxos de trabalho de imagem são suportados. Comece com este exemplo simples antes de abrir um documento valioso. A interface original do editor é em inglês, mesmo quando o site ao redor é chinês ou português. Os nomes dos menus abaixo referem-se à tela do editor, não ao menu File do navegador. O site carrega GA4 e Plausible auto-hospedado para medir visitas; esses serviços não recebem o conteúdo das imagens nem os nomes de arquivos locais nas etapas de edição.

Prepare os arquivos e a área de trabalho

Baixe o exemplo PNG em uma nova pasta. Mantenha uma cópia intacta e crie uma pasta de saída separada. O exemplo não contém material pessoal. Se você substituir sua própria imagem, use uma duplicata e confirme que tem permissão para editá-la. Evite começar com um arquivo enorme: uma pequena amostra conhecida ajuda a distinguir um problema de inicialização de um problema específico de um documento.

Abra o editor de página inicial editor da página inicial em uma tela do tamanho de um desktop. Aguarde até que a tela e os menus do aplicativo estejam visíveis. O título da página inicial que aparece não significa que o aplicativo WebAssembly terminou de ser iniciado. Se o espaço de trabalho permanecer em branco, siga o guia de solução de problemas do renderizador antes de tentar importações repetidas.

Importe o PNG no editor

Arraste o PNG baixado para a tela do aplicativo. Solte-o dentro do editor, em vez de no artigo ao redor ou na barra de ferramentas do navegador. Alternativamente, use o menu File do aplicativo para selecionar o arquivo local. Confirme se a imagem aparece como um documento e se você está editando a guia esperada. Se um navegador abrir a imagem em uma página separada, retorne ao editor e tente o menu do aplicativo.

Clique dentro da área de trabalho antes de usar os atalhos do teclado. O foco do navegador e o foco do editor são separados. Em uma tela pequena, os controles do painel podem reduzir o espaço disponível para a imagem; use o botão de alternância do painel ao redor ou uma tela maior, se necessário. Um teste de tela estreita bem-sucedido não significa que a edição por toque seja igualmente confortável em todos os dispositivos. A interface original do canvas foi projetada em torno de controles no estilo desktop.

Faça uma alteração fácil de conferir

Selecione um pincel usando as ferramentas do editor e pinte um traço curto e claramente visível no meio do exemplo. Escolha uma cor que contraste com os pixels próximos. Para este primeiro exercício, evite trabalhar no limite da imagem ou fazer uma pequena marca de baixa opacidade. O objetivo é reconhecer a alteração no aplicativo e na saída baixada sem adivinhar.

Se nenhuma marca aparecer, verifique o documento ativo, a ferramenta selecionada e se o ponteiro está realmente sobre a tela. Desfaça a última operação através de Editar se o resultado estiver errado e tente novamente. Não presuma que um cursor com aparência alterada prova que os pixels mudaram. Nosso teste automatizado verifica os pixels exportados precisamente porque a exibição dos controles por si só não demonstra uma edição funcional.

Exporte um PNG e confira o arquivo baixado

Use o menu File do editor e seu comando de exportação PNG. Aguarde a conclusão do download do navegador e localize o arquivo real em disco. As políticas de download do navegador, prompts e nomes de arquivos duplicados variam. Se já existir um arquivo com o mesmo nome, seu navegador poderá anexar um número. Verifique o data e o horário e abra a saída correta em vez de confiar apenas no nome exibido.

Abra a exportação em um visualizador de imagens separado. Confirme se a marca está presente e se as dimensões da imagem permanecem 320 × 320 para este exemplo. Uma captura de tela da tela não é a imagem exportada: ela inclui dimensionamento da interface e pode conter painéis ou elementos da página. Inspecione o próprio PNG. Você pode compará-lo com o exemplo de saída editada, mas um traço pintado manualmente será naturalmente diferente do nosso traço automatizado.

Salve também uma versão editável

Um PNG é uma imagem renderizada, não uma promessa de preservar o documento editável completo. Use o comando Save As do editor para baixar um PSD com um nome de versão salva distinto. Mantenha o PNG de origem, o PSD salvo e o PNG final exportado juntos. Esta convenção de nomenclatura deixa cada função clara: entrada original, versão salva de trabalho e imagem de entrega.

Reabra o PSD no PhotoCraft antes de depender dele. Exporte um segundo PNG e compare-o com o resultado editado. Nosso registro de ida e volta publicado cobre esse pequeno fluxo de trabalho. Leia o guia de suporte PSD antes de extrapolar para camadas complexas, fontes ou uma entrega para o Photoshop. Salvar um arquivo com extensão PSD é apenas o começo de uma verificação de compatibilidade.

Problemas comuns e como investigar

Sintoma	Primeira verificação	Próxima etapa segura
O navegador abre PNG como uma página	Onde o arquivo foi solto	Use o menu File do editor
Um atalho salva a página da web	O foco está fora da tela	Cancelar e usar o menu do aplicativo
A imagem exportada parece inalterada	Documento ativo e nome de arquivo baixado	Faça uma marca clara e exporte um novo nome
Nenhum arquivo aparece na pasta esperada	Solicitações e histórico de download do navegador	Encontre o download concluído antes de continuar
A área de trabalho fica em branco	Inicialização do navegador ou falha gráfica	Salve quando possível e use o guia de solução de problemas

Não atualize a guia como a primeira resposta à incerteza. Esta compilação não possui salvamento automático ou recuperação de falhas. Se a tela ainda responder, salve uma cópia do documento antes de alterar os renderizadores, recarregar ou sair. Se não responder mais, preserve todos os arquivos já baixados; o site não pode recuperar um documento não salvo de uma cópia do servidor.

Conclua a entrega com arquivos verificados

Sua pasta completa deve conter a fonte intocada, um PNG editado e um arquivo PSD salvo verificado. Abra o PNG final uma última vez e verifique a alteração pretendida, as dimensões e o nome do arquivo. Compartilhe apenas os arquivos necessários ao destinatário e explique qual é a imagem de referência e qual se destina a edição posterior. Guarde suas próprias cópias até que a transferência seja aceita.

Os critérios práticos de sucesso são simples: o original permanece intacto, os pixels exportados mostram a alteração e uma versão salva guardada pode ser reaberto. Essas verificações fornecem mais confiança do que ver o carregamento de um editor. Para sessões mais longas, continue com o fluxo de trabalho de backup guia de salvamento e backup; para os limites mais amplos desta versão, leia a análise do navegador avaliação do editor no navegador.