Captura de antes e depois

Uma captura de antes e depois é um par de imagens do mesmo assunto, uma tirada antes de uma mudança e outra depois dela. O par é mostrado lado a lado, empilhado ou como uma sobreposição com controle deslizante, para que a diferença seja visível de imediato.

Uma comparação justa mantém tudo constante, exceto a mudança. As duas imagens precisam da mesma área de captura, do mesmo tamanho de viewport, da mesma densidade de pixels, da mesma posição de rolagem e do mesmo estado do aplicativo, como a mesma conta conectada e os mesmos dados de teste. Se a segunda imagem estiver deslocada em apenas alguns pixels, o conteúdo que não mudou também parecerá diferente em uma comparação de pixels.

Por que o antes e depois importa

Uma captura isolada mostra um estado. Um par mostra uma mudança, que é o que revisores, clientes e gestores normalmente precisam avaliar. Ele também registra como a tela era antes da mudança, o que é difícil de recriar depois.

Onde as capturas de antes e depois são usadas

• Notas de versão e changelogs que mostram uma tela redesenhada.
• Relatórios de bugs e confirmações de correção.
• Revisões de design e de acessibilidade, como uma correção de contraste.
• Relatórios para clientes sobre atualizações de site.

Como fazer pares de antes e depois eficazes

1. Capture a imagem de "antes" primeiro, antes de qualquer mudança ser publicada.
2. Registre as configurações: tamanho da janela, área, nível de zoom, tema e dados de teste.
3. Capture a imagem de "depois" com as mesmas configurações.
4. Exporte as duas no mesmo formato e apresente-as com rótulos correspondentes.

Para páginas da web, execute o Website Capture do Temposhot duas vezes com a mesma URL e as mesmas configurações de Device e Area. Para aplicativos de desktop, use a fonte Custom Area no Auto Capture. O seletor reabre na área salva, então a segunda captura usa o mesmo retângulo.

Erros comuns

• Comparar uma captura Retina com uma captura 1x. Cada pixel tem um tamanho diferente.
• Alterar o zoom do navegador, o tema ou o tamanho da janela entre as capturas.
• Esquecer de capturar o "antes" até que a mudança já esteja no ar.
• Recortar as duas imagens de maneira diferente.

Repetindo as mesmas capturas o tempo todo?

Mantenha uma lista de URLs salva em automação de capturas de tela de sites e execute-a antes e depois de cada lançamento.

Perguntas frequentes

Devo usar JPG ou PNG em pares de comparação?

PNG. A compressão com perda adiciona pequenas diferenças que aparecem em comparações de pixels.

Como encontro diferenças pequenas?

Carregue os dois arquivos no Compare Images para destacar os pixels alterados.

Fontes

• Screenshot (Wikipedia)

Recursos relacionados

• Opções do Website Capture: configurações de dispositivo, área e espera.
• Fontes de captura: reutilize uma Custom Area salva.
• Stitch Screenshots: junta duas imagens em um único arquivo.