Pular para o conteúdo principal

Image Editor

O Image Editor integrado da Copera permite anotar capturas de tela e imagens diretamente dentro de qualquer mensagem de chat — sem necessidade de ferramenta de captura separada. Cole ou arraste uma imagem em um canal de texto, mensagem direta ou chat em grupo, e o editor abre automaticamente com seis ferramentas (selecionar, caneta, seta, texto, retângulo, elipse), oito cores predefinidas mais entrada hex personalizada, três espessuras de traço e um toggle de preenchimento para formas. Seja para apontar um bug, dar feedback de design ou ocultar conteúdo sensível, você marca e envia a imagem em segundos.

Quando o Image Editor aparece​

O Image Editor abre automaticamente sempre que você anexa uma imagem a uma mensagem de chat. Depois de soltar uma imagem em uma conversa ou colar uma captura de tela, uma prévia em tela cheia abre com as ferramentas do editor prontas para uso. Você pode enviar a imagem como está ou anotá-la antes.

O editor está disponível em:

  • Canais de texto -- Quando você anexa ou cola uma imagem em qualquer canal de chat.
  • Mensagens diretas -- Quando você envia uma imagem para um colega em uma DM.
  • Chats em grupo -- Quando você compartilha uma imagem com um grupo.

Você pode enviar várias imagens em uma única mensagem. Cada imagem ganha seu próprio editor, então você pode anotá-las de forma independente antes de enviar todas juntas.

Primeiros passos​

Aqui está um fluxo de trabalho típico com o Image Editor:

  1. Cole ou arraste uma imagem para a área de mensagem do seu chat.
  2. A prévia da imagem abre em tela cheia com a barra de ferramentas do editor na parte inferior.
  3. Selecione a ferramenta que você precisa (caneta, seta, texto, retângulo ou elipse).
  4. Desenhe na imagem para adicionar sua anotação.
  5. Altere cores ou espessuras de traço conforme necessário.
  6. Digite sua mensagem na caixa de texto na parte inferior.
  7. Clique em Enviar para compartilhar a imagem anotada.

Se decidir não enviar, clique no X no canto superior esquerdo para fechar a prévia. A Copera pede confirmação para evitar que você perca suas anotações por engano.

Ferramentas de anotação​

A barra de ferramentas tem cinco ferramentas de desenho mais uma ferramenta de seleção. Cada uma é projetada para um tipo específico de marcação.

Selecionar​

O ícone de cursor é a ferramenta de seleção. Clique nele para parar de desenhar e alternar para o modo de seleção. No modo de seleção, você pode:

  • Clicar em qualquer anotação existente para selecioná-la.
  • Arrastar anotações selecionadas para movê-las pela imagem.
  • Redimensioná-las ou transformá-las usando os controles de canto.
  • Abrir o menu de seleção com opções rápidas de formatação e exclusão.

Use a ferramenta de selecionar sempre que quiser ajustar, reposicionar ou remover algo que já desenhou.

Caneta​

O ícone de lápis é a ferramenta de caneta à mão livre. Clique e arraste para desenhar qualquer forma ou linha que quiser -- assinaturas, rabiscos, círculos aproximados, notas escritas à mão. A caneta segue o cursor exatamente como você o move.

Ótimo para:

  • Circular algo com um traço irregular feito à mão.
  • Escrever uma pequena nota manuscrita.
  • Sublinhar uma palavra ou área.

Seta​

O ícone de seta desenha uma linha reta com uma ponta de seta em uma extremidade. Clique para definir o ponto inicial, arraste até onde a seta deve apontar e solte.

Ótimo para:

  • Apontar para um botão ou elemento específico.
  • Indicar uma direção em um mapa ou diagrama.
  • Conectar duas partes de uma imagem com um vínculo visual claro.

Texto​

O ícone de texto adiciona um rótulo de texto à imagem. Clique em qualquer lugar da imagem para posicionar uma caixa de texto e digite sua mensagem. Pressione Esc ou clique fora do texto para finalizar.

Ótimo para:

  • Rotular elementos em uma captura de tela.
  • Adicionar uma legenda ou nota.
  • Destacar um valor específico como um preço ou pontuação.

Retângulo​

O ícone de retângulo desenha uma caixa retangular. Clique e arraste para definir o tamanho do retângulo. A forma pode ser uma caixa com contorno ou uma caixa preenchida sólida (veja Preenchimento abaixo).

Ótimo para:

  • Destacar uma área específica de uma captura de tela.
  • Marcar uma região para ocultação ou edição.
  • Enquadrar parte de uma imagem para dar ênfase.

Elipse​

O ícone de círculo desenha uma elipse (oval ou círculo). Clique e arraste para definir o tamanho da forma. Assim como retângulos, elipses podem ter contorno ou preenchimento.

Ótimo para:

  • Circular um rosto, logo ou outro objeto arredondado.
  • Destacar um ponto-chave com um estilo visual mais suave do que retângulos.

Cor e espessura​

A barra de ferramentas inclui controles para mudar a aparência das suas anotações.

Seletor de cores​

Passe o mouse sobre a amostra de cor para revelar uma paleta de oito cores predefinidas mais um campo de cor personalizada:

CorUso típico
VermelhoErros, avisos, problemas críticos
LaranjaCuidado, atenção
AmareloDestaques, dicas
VerdeSucesso, aprovações, bons exemplos
AzulInformação, links, anotações gerais
RoxoDestaques especiais, categorias
PretoAnotações neutras em imagens claras
BrancoAnotações neutras em imagens escuras

Para uma cor personalizada fora da paleta, use o campo de cor hex na parte inferior do seletor.

Espessura do traço​

Use a alternância S / M / L para escolher quão grossos são os traços da caneta, setas e contornos de formas:

  • S (Pequeno) -- 2 pixels, para detalhes finos.
  • M (Médio) -- 4 pixels, o padrão.
  • L (Grande) -- 8 pixels, para anotações marcantes que se destacam.

Para a ferramenta de texto, S/M/L controlam o tamanho da fonte em vez disso (16, 24 ou 32 pixels). Isso mantém sua hierarquia tipográfica visível ao combinar texto com desenhos.

Alternância de preenchimento para formas​

Quando você tem um retângulo ou elipse selecionado, o ícone do balde de tinta aparece no menu de seleção. Clique nele para alternar entre:

  • Contorno -- Apenas a borda é desenhada. Use quando quiser destacar uma área sem cobrir o que está dentro.
  • Preenchido -- A forma inteira é preenchida com a cor selecionada. Use para cobrir completamente ou ocultar parte de uma imagem.

Alternar entre preenchido e com contorno é instantâneo -- você não precisa redesenhar a forma.

Editando e reorganizando anotações​

Depois de desenhar algo, você pode continuar refinando.

Selecionando​

Clique em qualquer anotação com a ferramenta de seleção para selecioná-la. Uma caixa aparece ao redor dela e o menu de seleção abre com opções contextuais.

Movendo​

Arraste uma anotação selecionada para reposicioná-la em qualquer lugar da imagem.

Redimensionando​

Segure os controles de canto de uma forma, seta ou caixa de texto selecionada e arraste para redimensionar. Isso funciona para retângulos, elipses, setas e caixas de texto.

Alterando propriedades depois de desenhar​

Com uma anotação selecionada, o menu de seleção mostra:

  • Amostras de cor -- Mude a cor sem redesenhar.
  • Espessura do traço ou tamanho da fonte -- Ajuste a grossura ou o tamanho do texto.
  • Alternância de preenchimento -- Para formas, alterne entre contorno e preenchido.
  • Duplicar -- Copie a anotação e cole-a levemente deslocada para repetições rápidas.
  • Excluir -- Remove a anotação imediatamente.

Desfazer e refazer​

A seção Histórico da barra de ferramentas te dá três controles:

  • Desfazer (seta curva para a esquerda) -- Volte pelas suas anotações uma de cada vez.
  • Refazer (seta curva para a direita) -- Reaplique uma anotação que você desfez.
  • Limpar tudo (ícone de lixeira) -- Remove todas as anotações da imagem de uma só vez.

Desfazer e refazer funcionam em todo o seu histórico de edição, então você pode experimentar livremente sem se preocupar com erros.

dica

Se você limpar tudo por engano com o botão de lixeira, basta apertar desfazer logo em seguida. Limpar é reversível até você fazer outra alteração.

Enviando uma imagem anotada​

Quando estiver satisfeito com suas anotações, envie a imagem como qualquer outra mensagem:

  1. Digite seu texto de acompanhamento na caixa de entrada na parte inferior (opcional).
  2. Pressione Enter ou clique no botão enviar.
  3. A imagem é enviada com todas as suas anotações fundidas nela, então os destinatários as veem como parte da própria imagem.

Como as anotações são incorporadas na imagem final, os destinatários não precisam de nenhum visualizador ou software especial para vê-las -- sua imagem marcada fica igual para todos.

Casos de uso comuns​

Relatórios de bug​

Tire uma captura de tela de um bug e anote:

  • Retângulo vermelho ao redor do elemento quebrado.
  • Seta vermelha apontando para o problema exato.
  • Rótulo de texto com uma breve descrição do que está errado.

Envie a imagem anotada para seu canal de rastreamento de bugs para um relatório visual claro.

Feedback de design​

Compartilhe um mockup e marque-o com feedback:

  • Marcas de verificação verdes (feitas à mão com a ferramenta de caneta) ao lado de coisas que estão boas.
  • Círculos laranjas ao redor de elementos que precisam de ajustes.
  • Chamadas de texto explicando o que mudar e por quê.

Isso dá ao seu designer uma lista visual precisa em vez de um feedback verbal vago.

Marcando documentos​

Se você estiver compartilhando uma página de PDF ou foto de um documento em papel:

  • Ferramenta de caneta amarela como marca-texto sobre texto importante.
  • Retângulo ao redor de uma passagem-chave.
  • Notas de texto nas margens para levantar questões.

Isso transforma qualquer imagem em um documento marcado sem precisar de um editor de PDF.

Ocultando conteúdo sensível​

Antes de compartilhar capturas de tela publicamente ou com clientes:

  • Retângulos pretos preenchidos sobre nomes, e-mails ou outras informações pessoais.
  • Elipses pretas preenchidas sobre rostos ou logos que você quer esconder.

Isso permite que você compartilhe contexto útil mantendo detalhes sensíveis em sigilo.

Direcionando atenção​

Para onboarding de novos membros da equipe ou treinamento de um colega:

  • Setas apontando para os botões que eles precisam clicar.
  • Rótulos de texto numerados (1, 2, 3) mostrando a ordem dos passos.
  • Retângulos coloridos agrupando controles relacionados.

Uma captura de tela bem anotada costuma ser mais rápida e clara do que instruções escritas.

Dicas e boas práticas​

dica

Use cores de forma consistente em toda a equipe. Se todos usarem vermelho para bugs e verde para aprovações, suas imagens anotadas ficam mais fáceis de escanear rapidamente.

dica

Combine rótulos de texto com setas para máxima clareza. Uma seta mostra para o que você está apontando; um rótulo de texto explica por que isso importa.

dica

Mantenha as anotações mínimas. Uma ou duas setas bem posicionadas e um rótulo de texto curto costumam comunicar mais do que uma imagem cheia com dezenas de marcações.

dica

Use a ação Duplicar para fazer anotações repetidas mais rápido. Se você precisa de cinco retângulos idênticos, desenhe o primeiro, selecione-o e duplique em vez de redesenhar do zero.

Perguntas frequentes​

Posso editar uma imagem depois de enviá-la?​

Não. Uma vez enviada, as anotações são fundidas na imagem e os dados originais da anotação não são mantidos. Se você precisar revisar, envie uma nova versão anotada.

O destinatário pode mover ou remover minhas anotações?​

Não. As anotações fazem parte da imagem final, então os destinatários as veem como pixels em vez de elementos editáveis. Isso é uma funcionalidade, não uma limitação -- sua marcação não pode ser alterada por engano por outra pessoa.

O Image Editor funciona no mobile?​

A barra de ferramentas e as ferramentas de anotação estão disponíveis no fluxo de prévia do chat em navegadores mobile modernos. Gestos de toque permitem desenhar com a ferramenta de caneta, selecionar anotações e ajustá-las. Controles de cor e espessura ficam acessíveis pela mesma barra de ferramentas.

Quais formatos de arquivo o editor suporta?​

O editor funciona com todos os formatos de imagem comuns, incluindo PNG, JPG, GIF, WebP e SVG. GIFs animados são achatados em um único quadro quando anotados.

A imagem original é substituída?​

Quando você anota e envia, a imagem enviada inclui suas anotações. A versão original (não modificada) não é mantida, a menos que você também a tenha salvado separadamente antes de anotar. Se quiser manter uma cópia limpa, salve-a no Drive ou no seu computador antes de abrir o editor.

Posso salvar anotações para usar depois?​

As anotações são enviadas com a imagem, mas não são armazenadas como um arquivo separado. Para marcações reutilizáveis, considere manter uma imagem-modelo no Drive que você pode reabrir e reanotar sempre que precisar.

Funcionalidades relacionadas​