An animated GIF made from stills is essentially a sequence of different images displayed one after another in fairly quick succession; this gives the .gif file the appearance of motion or movement.
Animated GIFs are good attention-getters, since even that little bit of movement catches the eye of the viewer. They impart a more lively and dynamic feel than just a still image, so they can communicate a playful vibe which may be very fitting for some brands, products and target audience!
In Out of the Sandbox themes, GIFs can be uploaded wherever you find an image option in the theme editor (ex: Image with Text section) – Turbo just requires an extra step.
In comparison to videos, gif file sizes are nice and small – just remember to use an image compression tool!
Creating your own GIF
A GIF can be as simple as just two images that toggle back and forth, like we did in this example in our Flora shop for the Flex theme:
The main thing you’ll need to make your own similar to ours, is two or more images that are similar but also each a bit different.
For our example, we used 2 pictures of the woman holding the plant: one that had hearts and one that had rays on the pot:
There are different tools you can use to make GIFs from scratch, including Photoshop (that’s how we made ours) but there are also some fast and easy free tools:
Steps to create a GIF using the free tools
Step 1: Upload the separate images that you want to string together.
Step 2: Adjust any settings they provide you with (e.g. speed and looping).
Step 3: Click some kind of button to 'create GIF'.
Step 4: Download the file it generates to your computer.
Step 5: Upload the .gif file into your shop through the theme editor, basically anywhere there’s an 'Image upload' option!
Considerations:
- You may still want to use some kind of image editing software like Photoshop or a free equivalent (Pixlr, Photopea, Canva) in order to create your still images in the first place – ex: to add simple graphics on top of the picture like we did.
- We've included the PSD file of our example gif for download here.
- The process for creating GIFs in Photoshop is a little more involved and uses Layers and the Timeline window to control the frame content, speed and looping – so the easiest thing is probably just to use the free tools, but if you do still want to use Photoshop then this is a quick little overview here and a more detailed step-by-step here.