Temporizadores de Contagem Decrescente

Porque é que o meu temporizador de contagem decrescente com fundo transparente está desfocado?

Última atualização

Os temporizadores de contagem decrescente são GIFs, e o formato GIF não lida bem com a transparência. Cada pixel é totalmente transparente ou totalmente opaco, por isso as bordas suaves à volta dos algarismos são misturadas com uma cor de fundo à tua escolha. Em qualquer outro fundo, essas bordas ficam irregulares ou desfocadas, especialmente em temporizadores pequenos. É uma limitação do formato de ficheiro, mas estas dicas fazem toda a diferença.

Os exemplos abaixo são imagens reais do temporizador, com uma vista ampliada das bordas à direita.

1. Se puderes, usa um fundo liso

O teu e-mail já tem um fundo por trás do temporizador. Define o fundo do temporizador com a mesma cor e vai ficar com um aspeto muito mais nítido do que se fosse transparente. Se o temporizador ficar sobre um gradiente ou uma fotografia, carrega essa parte do teu design como fundo do temporizador. Vê como usar a tua própria imagem de fundo com um temporizador.

Um temporizador transparente numa secção laranja claro, com bordas irregulares e claras à volta dos algarismos, ao lado de um temporizador com fundo liso na mesma cor laranja, que tem bordas lisas. As imagens ampliadas mostram a diferença

2. Escolhe mesmo assim uma cor de fundo com transparência ativada

Mesmo com Transparente Depois de selecionares, escolhe a cor de fundo mais parecida com a da secção do e-mail onde o temporizador vai ficar. O Sendtric usa essa cor para suavizar os contornos. Se a secção tiver várias cores, escolhe a principal.

Um temporizador branco transparente sobre um fundo azul-marinho. Com o branco como cor de fundo, os algarismos têm um halo claro; com o azul-marinho como cor de fundo, as bordas confundem-se com o fundo

3. Aumenta o temporizador

Os GIFs pequenos têm poucos píxeis por dígito, por isso cada borda irregular ocupa uma parte maior do dígito. Escolhe um que seja maior Tamanho em Design visual.

Um temporizador transparente «X-Small» em tamanho real, o mesmo temporizador «X-Small» ampliado 3 vezes para corresponder à largura de um temporizador «Large», em que os dígitos parecem quadrados, e um temporizador «Large» em tamanho real com dígitos suaves

4. Adiciona um contorno

Ativar contorno do texto em Texto e legendas (Power e versões superiores). Até mesmo um contorno de 1 px da mesma cor dos algarismos dá mais espessura, o que disfarça as arestas irregulares.

Um temporizador transparente sem contorno e com um contorno azul-marinho de 1 px da mesma cor que os algarismos. As imagens ampliadas mostram que o contorno torna o traço dos algarismos mais grosso e mais sólido

5. Usa um tipo de letra mais em negrito

Os traços finos são, na sua maioria, contornos, por isso são os que mais sofrem. Um tipo de letra mais espesso, como o Archivo Black, mantém-se nítido. Muda o Dígitos e Etiquetas tipos de letra em Texto e legendas (planos pagos).

Um temporizador transparente na fonte fina Raleway, cujos traços são, na sua maioria, pixels de contorno, ao lado do mesmo temporizador na fonte grossa Archivo Black, com algarismos sólidos e mais nítidos

Para saberes mais sobre os temporizadores de contagem decrescente por e-mail, consulta o nosso Página de e-mail temporizador de contagem decrescente.

Relacionado

Este artigo foi útil?

Clica na imagem para ampliar. Arrasta ou desliza para ver o resto.