Preparing graphics

If you want to insert the timer into a message without a graphic or photo, see Creating a countdown timer.

Requirements

To prepare a countdown timer with a background graphic or photo, you need:

  • image editing software, such as Adobe Photoshop
  • a product image or key visual

Example of preparing graphics

To create a countdown timer with a background graphic or photo, prepare two parts (see How it works):

  • the product image or key visual
  • the graphic on which the timer will be placed

To prepare both parts, follow these steps.

  1. Open your product image or key visual with an image editing program.
  2. Set the width of the product image or key visual between 100 and 800 pixels. In the example, the image width is 776 pixels.

    By default, the maximum width is limited to 800 pixels. If your message template or paragraph is limited to a smaller width, do not exceed it. The countdown timer is not scaled to the maximum value of your message template or paragraph.

    Image: Set the with of the product image

  3. Optional: Insert additional graphic elements into your image. A blue banner and a headline are inserted in the example.

    Do not use graphic elements with transparency, as they are displayed incorrectly.

    Image: Add graphic elements

  4. Export the image as a JPEG or PNG.
  5. Create the area for the countdown timer. For this area, start with a new graphic file or continue working with your finished product image/key visual using the file in your image editing program (not in the exported JPEG or PNG!). Later only export the countdown timer area.

    Do not use graphic elements with transparency, as they are displayed incorrectly.

    Continue to work on the product image/key visual file. This makes it easier to see the final result and how both parts will work together in your message.

    Image: Create the area for the countdown timer

    When creating an animated countdown timer

    For the countdown timer area, avoid using complex graphic designs such as patterns, photo scenes, many colors and color gradients. This is because  Optimizely Campaign will convert the JPEG or PNG into a GIF animation with 60 individual images. This GIF animation may not exceed 1.5 MB.

    Even if you use a highly compressed JPEG with a file size of a few KB that contains many colors, the subsequently generated GIF animation may exceed the maximum size of 1.5 MB.

    When creating a static, non-animated countdown timer

    The maximum file size for the countdown timer area is 500 KB.

  6. To test the positioning of the countdown timer, which will come later, create a test timer with the testing tool for your image editing program. The example uses Arial font with the color white (#FFFFFF).

    Image: Test timer

    You can select among the following formats:

    Static countdown timers

    • Days, hours, minutes, seconds (dd:hh:mm:ss)
    • Hours, minutes, seconds (hh:mm:ss)
    • Days, hours, minutes (dd:hh:mm)
    • Hours, minutes (hh:mm)
    • Days only (dd)

    Animated countdown timers

    • Days, hours, minutes, seconds (dd:hh:mm:ss)
    • Hours, minutes, seconds (hh:mm:ss)

    You can use the following fonts/typefaces:

    • Arial
    • Arial bold
    • Arial italics
    • Arial black
    • Arial Unicode MS
    • Comic Sans MS
    • Comic Sans MS bold
    • Courier New
    • Courier New bold
    • Courier New italics
    • Courier New bold and italics
    • Times New Roman
    • Times New Roman bold
    • Times New Roman italics
    • Times New Roman bold and italics
    • Trebuchet MS
    • Trebuchet MS bold
    • Trebuchet MS italics
    • Trebuchet MS bold and italics
    • Verdana
    • Verdana bold
    • Verdana italics
    • Verdana bold and italics

    Note the font and hexadecimal code for your font color. You will need this information later.

  7. Optional: Insert additional graphic elements into your test timer. The example places a border around the timer, labels the timer with days, minutes, hours and seconds, and inserts the text Offer ends in:.

    Do not use graphic elements with transparency, as they are displayed incorrectly.

    Image: Additional graphic elements

  8. If you are satisfied with your layout, remove the key visual from your graphic so that the area for the countdown timer stands alone. You can do this in Adobe Photoshop, for example, using the crop tool. The example uses the crop tool to reduce the graphic to the area with the timer.

    Image: Remove the key visual

    Image: Reducing the graphic

  9. Remove the test timer by deactivating or deleting the corresponding layer. If you inserted other graphic elements, leave them activated. The example deactivates the layer with the test timer in Adobe Photoshop. The border, the timer labels and the lines of text are still active.

    Insert the final timer later in Optimizely Campaign using the information you recorded regarding font and font color. The graphical representation of the area you created will later serve as the background for the final timer.

    Image: Remove the test timer

  10. Export the area or background for the timer as a JPEG or PNG. Make sure that the file size does not exceed 20 KB (approximate value). When creating a static, non-animated countdown timer, the maximum file size is 500 KB.

    You have now prepared both parts of the countdown timer. Creating a countdown timer shows how to create the final timer in Optimizely Campaign and place it on your background graphic.