:quality(75))
Short-form video content helps you create a deeper connection with your customers.. But for many, video editing skills, equipment, or time might mean you aren’t able to make the high-quality videos you want.Enter the world of picture animation, where anyone can turn simple static images into engaging videos.
Do you want to create captivating ads or engaging community announcements? In this tutorial, Linearity designer Maddy Zoli will walk you through the simple steps of animating a picture using Linearity Move.
A degree in animation? Nah. All you need is your creative vision and a few clicks.
Ready to breathe life into your designs? Let's roll up our sleeves and get animating.
Preparing your images for animation
You need to lay a strong foundation before you bring your images to life. But first, we'll touch on essential aspects before you start animating with Linearity Move. These factors are the building blocks for creating animation effects.
Choose the right image
The effectiveness of your photo animations directly depends on your choice of visuals. Consider your animation goals carefully. Do you intend to convey a specific message, evoke emotions, or engage with your readers?
For instance, if you're designing an ad, choosing images that resonate with your target audience and product can make all the difference.
Apply the principles of animation
Understanding the fundamental principles of animation movements is the secret to creating animations. These principles include concepts like timing, easing, anticipation, and more:
- Timing: precisely controlling when objects move or change on the screen.
- Easing: creating natural and fluid movements. Ensuring that animations don't appear abrupt or robotic.
- Anticipation: adds an element of realism by allowing subjects to prepare for a movement before it happens.
By understanding these principles, you'll create better-quality animations that leave a lasting impact on your readers.
Prepare your designs for animation
How can you prepare for a seamless animation process? Think of what’s involved in optimizing your images for animation.
Start by managing file sizes. Ensure your image files are suitable for smooth animation playback.
Second, properly named and structured design layers can save you valuable time and effort. Consider your animation's frame rate and overall duration. You are all set for a hassle-free and efficient animation process by addressing these aspects. It allows you to focus on creativity and execution.
Let's dive into the step-by-step guide and equip you with the knowledge to create an impressive animated photo using Linearity Move.
Create a new file
Open Linearity Move and navigate to the Action bar at the top of the interface, where you'll find the File option. Click on it, and from the dropdown menu, select New to create a fresh Artboard.
A new window will prompt you to specify your project settings. Select the Square resolution to ensure your animation fits well on various platforms, especially social media. For the Frame Rate option in the same window, leave the standard setting of 30fps (frames per second) selected to achieve smooth motions without overburdening the processing load.
After adjusting these settings, click Confirm to start your new project. This action opens up a blank canvas in Linearity Move, and now you can start your photo animation.
Before moving on to the next step, download the template file for this tutorial. We’ll be using it to set up the framework of the animation.
:quality(75))
Import your photo
It’s time to import the photo you want to animate. Start by creating a New Scene. To do this, look for the New Scene icon in the screen's bottom left corner and select it, followed by a click on the Import button that appears.
This action opens a file browser, allowing you to navigate your files to find the Photoanimation.curve file you downloaded earlier for this project. Select this file and click open, bringing you to the Import Panel of Linearity Move.
In the Import Panel, you'll notice as many representations of Artboards as there are in your .curve file. Click on this Artboard then drag and drop it onto the Scene Builder line—a designated area within the Linearity Move interface that facilitates the organization and manipulation of scenes.
Enter Timeline view and prepare layers
After importing your photo, start acquainting yourself with the Timeline feature and organizing your Layers Panel effectively. Double-clicking on the scene that you've just imported transitions you into the Timeline view, where the timing and sequencing of your animation will be crafted.
Animate the picture
You can start animating your photo with your project now organized and your layers in place.
Locate and click the Animate button, which toggles your workspace between Animation and Design modes.
In Design Mode, you can add various elements to your project without altering the existing timeline, preserving the integrity of your animation sequence while still allowing for creative flexibility.
We’ll create a rotation effect with this photo. You’ll start by incorporating circles within your canvas, which will serve as the basis for the animation.
Select the Shape Tool from the Toolbar on the left, and choose the Oval Tool from the shape menu to draw circles.
Hold the Shift key while clicking and dragging your mouse to ensure these circles are proportionally perfect. Aim to create a circle that matches the size of your canvas, which can be precisely adjusted using the Style panel.
Input 1080px as the dimension to match a square canvas size, ensuring the circle is perfectly centered using the Align buttons.
After creating your initial circle, you may want to duplicate this shape to create multiple circles of varying sizes. This can be done easily by copy-pasting using ⌘ + C and ⌘ + V or by duplicating directly with the ⌘ + D keyboard shortcut.
Adjust the size of these circles to create a layered effect by selecting a circle and manipulating its size using either the handles or the Style panel for specific dimensions, ensuring all circles remain proportional by keeping the lock icon engaged.
Add image masks
Next, you want to add an image to each circle using the Mask Tool. This enables two overlapping elements to mask the one above it, combining them into a masked group. And not to worry, you can always reverse this action by clicking Unmask.
To duplicate your main image four times (because we have four circles), follow the same steps we used to duplicate the circles. From here, head to the layers panel and arrange your layers so the four images are below the four circles.
Once you’ve done that, position one of your images above one of the circles in the Layers stack, then select both the image and the circle layers by holding the Shift button down on your keyboard while you select them. Right-click and select Mask Selection. Do the same for all the circles and their accompanying images.
Once everything is masked up, move the grouped layers (i.e., the masked layers) beneath the text layers in your Layers stack. This will come in handy later.
Group and animate your shapes
With your circles grouped and layers organized, it's time to animate them to achieve the rotation effect.
Click on the Design button to toggle back to Animate Mode. Drag the Playhead in the timeline from 0 to the 2-second mark to establish the starting point of your animation. At this point you'll initiate the rotation of the circles.
Select each group and apply the rotation to the layer using the rotation handle. Apply the rotation in alternate directions for each layer. Ensure that if you rotate one layer to the right, that you rotate the next layer to the left, and so on.
Preview your animation to ensure everything moves in the opposite direction. Now, move the playhead to the 4-second mark to adjust the direction of the rotation for a second time and repeat the steps above but move each layer in a different direction to the first animation sequence. This will create a sort of kaleidoscope effect.
Once you’re happy with the rotating effect, select each group layer and within that layer select the circle layer. Remove the stroke around the circles by toggling the stroke button in the Style tab into the off position.
Along with the rotational movement, you'll also resize the group of circles, making them expand and contract, adding dynamism to your animation.
Do this by grouping all your layers into a single group using the same steps as before and selecting this new group. Move the playhead to the 2-second mark again, then stretch your image. Move the playhead to the 4-second mark again, and shrink the image to the smallest possible circle.
Press preview and experience the animation. This resizing should make the rotational movement more interesting and ramp up the overall kaleidoscope effect.
We also want the last image in the animation to disappear before everything shrinks back down.
Select the last image and add an Effects preset called Fade Out from the Presets menu on the left. This will create an Opacity Transition.
Move its position along the timeline so it fits just between the two animation effects.
Animate your text layers
With the background animation set, let’s focus on animating the grouped text layers.
Start by positioning the Playhead at the beginning of the timeline, marking the 0-second mark as your starting point for text animation. Select the groups containing the text layers by holding down the Shift key while clicking on each group.
Navigate to the Effects panel, where you'll find a variety of presets designed to animate text in engaging ways.
We would recommend choosing a combination of Fade In and Scale In effects for this. The Fade In effect gently introduces the text into the scene, making it appear as if emerging from the background. The Scale In effect then adds a dynamic growth motion, making the text expand into its final size, emphasizing its significance and adding a bit of punch to the animation.
After applying these effects, adjust their timing to ensure the text animation takes place toward the end of your timeline. This allows the background animation to establish the scene before the text adds its narrative layer. To achieve this, group all animated elements, including the text layers, and shift the entire animation block towards the end of the timeline.
Finally, offset the animation of each text layer slightly. This will ensure that not all text appears simultaneously, creating a more dynamic flow between all the elements. Adjust the timing of each text layer's animation to stagger their entrance into the scene, giving each a moment to shine.
Review and export
The final step in your photo animation project involves reviewing your work and then exporting the finished animation.
Begin by playing back the animation from start to finish. Watch closely for the synchronization between the background and text animations. Pay attention to the transitions, especially how the text layers interact with the background elements.
Adjust and shuffle things where necessary so that the text fades in and scales up at the precise moments—we’re going for maximum impact, so don’t be too subtle here.
Once satisfied with the final review, it's time to export your animation.
Navigate to the File menu and select Export. Choose the appropriate file format and settings that best suit your project's needs and the platforms where you intend to share your animation.
Whether you're aiming for high-definition quality for professional presentations or optimizing for social media sharing, Linearity Move offers a range of export options to accommodate your requirements.
After setting your Export preferences, proceed by clicking the Export button. This may take a few moments, depending on the complexity and length of your animation. Once completed, you’ll have the final video file of your animated project ready to be shared with the world.
The next era of design
Animating pictures makes your designs more interactive, engaging, and memorable.
With these steps outlined above, you're well on your way to creating fascinating animations that add value and depth to your work.
Explore the endless possibilities of animation, experiment with bold ideas, and let your creativity run wild. Linearity Move is your next level. If you’re a graphic designer who’s been dying to try animation, see what else Move can do. This may be the start of a beautiful friendship.
Frequently asked questions
Do I need advanced skills to animate a picture?
Not necessarily. While having a foundational understanding of design principles helps. Platforms like Linearity Move are designed to be user-friendly, enabling designers of all levels to create captivating animations.
How long does it take to animate a picture?
The complexity of your animation and your proficiency with the tools will determine the timeframe. Simple animations can be achieved in minutes, while more intricate designs may require a few hours.
What file formats are best for exporting animated pictures?
GIFs, SVGs, and WebM or MP4 video files are popular for web use due to their wide support and balance between quality and file size. Choose the format based on the complexity and use case of your type of animation.
How do I measure the effectiveness of my animated pictures?
Utilize analytics to track engagement, such as click-through rate (CTR), conversion rate, and time spent on pages with animated content. Feedback from user testing can also provide valuable insights into the impact of the photo animation effect.
Share this!
Garreth van Niekerk
One of GQ's 'Young Creatives To Watch' and described as a "Creative Force" by the Sunday Times, author, designer and marketer Garreth van Niekerk is a contributor for Linearity in Johannesburg.
