How to create animated Gifs for increased time on your website

 

The possibilities are endless with gifs; they add interest to a website and entertain when sourced from Giphy. But simplicity wins the day for a better user experience. This blog post goes through the process in Photoshop to show how easy gifs are to create and upload to Shopify, Squarespace, or other platforms.


TECHNIQUE

STEP 1: Use a dummy layout as a guide for formatting the gif

The Color Colour Creative website host is Squarespace, which is the basis for the dummy layout, but the same process will work regardless of your host. 

Quick tips for using gifs:

  • a dummy layout is perfect for getting the aspect ratio correct

  • create the dummy layout from the biggest screen you have access to

  • don't make your gifs overly complicated: stick with solid imagery and brand colors to tie them together

  • test that the gif runs smoothly on your device and recruit friends and family to run it on their own devices

  • test how many colors you can take out of the gif before you export it.

Check out: 

Shopify tips for image optimization

Squarespace tips for image best practices

 

STEP 2: Use Photoshop to layout and animate the gif

Here Photoshop is used for the layout using the Layers panel and animated using the Timeline panel, then exported for the web as a gif. Photoshop's export defaults were used for this example, but you can play around with them to see how that affects your file size. 

Some helpful animation definitions: 

Keyframes: the first and last frame when an animation changes action; it also lets you know when that change occurs.

Tweening: also called inbetweening. When you tween between one keyframe and another, Photoshop creates in-between images (see example below). 

Forever: your animation doesn't stop; it keeps looping.

Keyframe and tweening example

 

STEP 3: Upload and test your gif

The gif is uploaded to your site and tested. If tweaks need to be made, this is a great time to do that. As mentioned earlier, the gif should be tested by friends and family to ensure that the gif's speed is correct and that it is not taking too much time to load. 

If the loading time is an issue, head back into Photoshop:

  • re-export the gif

  • try reducing the colors

  • compress the image without degrading the quality.

 

STEP 4: Upgrade your imagery (if needed)

Failure to use compelling and high-quality images on your website can be a missed opportunity to keep the user on your site and leave them feeling negative about your brand.

Things to consider in regards to budget: 

  • Can a selection of hero images be shot and re-purposed for email campaigns?

  • If there is no budget, how can free imagery websites be used creatively without looking like it's free?

  • Can an art director help you work out your imagery priorities so that you can save money in the long term?

Here are some stock imagery houses to check out: 

  • Getty

  • Shutterstock

  • istock

  • unsplash

Other techniques to play around/experiment with: 

  • center the image, or right or left align it

  • crop the image

  • rotate the image

  • repeat the image

  • play with the image contrast

  • make the image duotone (in the brand colors)

  • play with the transparency of the image

  • And on it goes.

Here are some things that inspire me right now. 

Song (and video clip): Daft Punk - Around the World

Website: Color Lisa

Belinda Downey