We recently launched a new page on our website, and during the design phase, our team had discussed incorporating some features that haven't previously been built into our other interior pages. The page is highlighted by a few interactive elements—including an ungated contact-to-customer calculator—that we knew would be important for facilitating engagement. But simply put, I was tasked with adding movement to the page using a tool called Ceros (which is really cool, and worth looking into if you're a savvy content creator).
One of the ways we accomplished this "movement" goal was by creating a flat image where only the image's background is in motion. This post provides step-by-step instructions for creating a 360-degree rotation of an otherwise static website image using the Ceros platform. A little movement can go a long way (in fact, we're already seeing the average time spent on this page is over 4 minutes), so read on to learn how you can do it, too!
To start, you'll need the background component that will actually be rotating, and the foreground component that will remain static. Note that it's important to upload each file into Ceros separately, and to make sure they are both PNG files. When working with the images in Ceros, their backgrounds should be transparent, not flattened.
You'll find the image icon on the top menu bar in the workspace. Click on this icon, and add your images from your drive or desktop. You can adjust the order of the images on the side bar where the file names will appear. This is where you can position the rotating piece of the image in the back and the static image on top, as pictured below.
As the foreground component of the image will not be moving, these next instructions only apply to the piece that's in the background.
In our first few drafts, the background was spinning too fast; we wanted a slow rotation to mimic clouds in the sky. The duration is equivalent to the number of seconds it takes for a full rotation to happen. Keep that in mind, and adjust accordingly. It may take some trial and error to figure out the right speed for your image.
Once you have your image specifications set, you're ready to preview the end result. In the top right there is a "Preview" button that allows you to see what the changes you've made would look like live.
Finally, to embed the code of your new rotating image on your website, you select the "Embed" option on the top right next to preview. You would then copy and paste that into whatever module or code you're using for your website editor.
Want to see our rotating image in action? Visit this page!
If you have any questions, drop them in the comments below. We're happy to help.
Doug Orleski has been a Design Specialist at PMG since 2013. He’s an Adobe extraordinaire, with specialties in Photoshop, InDesign and Illustrator. He’s a big picture thinker – no, seriously, he thinks in pictures, so when he’s not grappling with shifting to word-based work, he’s writing about techniques in streamlining design, customization techniques and optimal image selection.
Tags: Website & Graphic Design