Countdown-Timer

Waarom is mijn countdown-timer met doorzichtige achtergrond wazig?

Laatst bijgewerkt

Countdown-timers zijn GIF’s, en het GIF-formaat kan niet goed overweg met transparantie. Elke pixel is ofwel helemaal doorzichtig of helemaal dekkend, dus de zachte randen rond de cijfers worden gemengd met één achtergrondkleur die je zelf kiest. Op elke andere achtergrond zien die randen er gekarteld of wazig uit, vooral bij kleine timers. Het is een beperking van het bestandsformaat, maar deze tips maken een groot verschil.

De onderstaande voorbeelden zijn echte timerbeelden, met rechts een uitvergrote weergave van de randen.

1. Gebruik als het kan een effen achtergrond

Je e-mail heeft sowieso al een achtergrond achter de timer. Stel de achtergrond van de timer in op dezelfde kleur, dan ziet het er veel strakker uit dan wanneer hij transparant is. Als de timer op een kleurverloop of foto staat, upload dan dat deel van je ontwerp als achtergrond voor de timer. Zie hoe je je eigen achtergrondafbeelding met een timer kunt gebruiken.

Een doorzichtige timer op een lichtoranje achtergrond met ruwe, bleke randen rond de cijfers, naast een timer met een effen achtergrond in dezelfde oranje kleur, maar met gladde randen. Uitvergrote inzetjes laten het verschil zien

2. Kies toch een achtergrondkleur met transparantie

Zelfs met Transparant Kies de achtergrondkleur die het meest lijkt op het gedeelte van de e-mail waar de timer komt te staan. Sendtric gebruikt deze kleur om de randen vloeiender te maken. Als het gedeelte meerdere kleuren heeft, kies dan de hoofdkleur.

Een doorzichtige witte timer op een marineblauwe achtergrond. Met wit als achtergrondkleur hebben de cijfers een lichte glans; met marineblauw als achtergrondkleur vallen de randen niet op

3. Maak de timer groter

Kleine GIF’s hebben maar weinig pixels per cijfer, dus elke onregelmatige rand neemt een groter deel van het cijfer in beslag. Kies een grotere Maat in Visuele vormgeving.

Een X-Small doorzichtige timer op ware grootte, dezelfde X-Small timer 3 keer ingezoomd zodat hij even breed is als een Large timer, waarbij de cijfers er hoekig uitzien, en een Large timer op ware grootte met vloeiende cijfers

4. Voeg een omtrek toe

Tekstcontour inschakelen in Tekst en labels (Power en hoger). Zelfs een omtrek van 1 px in dezelfde kleur als de cijfers zorgt voor wat extra dikte, waardoor ruwe randjes minder opvallen.

Een doorzichtige timer zonder omtrek, met een marineblauwe omtrek van 1 px in dezelfde kleur als de cijfers. Uitvergrote details laten zien dat de omtrek de lijnen van de cijfers dikker en steviger maakt

5. Gebruik een opvallender lettertype

Dunne lijnen zijn meestal randen, dus die hebben het het zwaarst te verduren. Een vet lettertype zoals Archivo Black blijft scherp. Verander de Cijfers en Labels lettertypen in Tekst en labels (betaalde abonnementen).

Een doorzichtige timer in het dunne lettertype Raleway, waarvan de lijnen grotendeels uit randpixels bestaan, naast dezelfde timer in het dikke lettertype Archivo Black met volle, strakkere cijfers

Als je meer wilt weten over countdown-timers in e-mails, kijk dan eens op onze Pagina met countdown-timer voor e-mail.

Gerelateerd

Was dit artikel nuttig?

Klik op de afbeelding om in te zoomen. Sleep of scrol om rond te kijken.