Social media is a powerful way of reaching your target audience. One way of creating engaging content is by adding video into your posts.
In this lesson, I will go over how to create animated social media posts using Adobe Photoshop. Learn how to use the Video Timeline in Photoshop, creating keyframes, transforming objects and rendering a social media-ready .MP4 to share with your audience.
If you want to follow along with the same content in this lesson, or just get a closer look at the animation I have set up, you can download the material here.
Before even thinking about adding animation and keyframe transitions to your project, it's a good idea to have content in order and a plan how you want objects to animate.
To access the Video Timeline panel, go to Window > Timeline. This is where you will be adding keyframes and timing content accordingly to create seamless animations.
Create Text Animation
Once you are ready to add animation, in the Timeline panel, select Create Video Timeline.
In the timeline, open the layer dropdown arrowhead on the text layer to animate.
With the Rectangle Marquee Tool – or the selection tool of your choice – make a selection around the text in the project.
In the Layers panel, with the text layer selected, click Add Layer Mask.
Unlink the layer mask objects. This will allow you to move the text layer separately without affecting the mask.
Create a Transform keyframe where you want the animation to begin.
With the Move Tool (V as a shortcut) click and move the text to the left until hidden.
Move the playhead in the timeline to the area where you want the text to finish animating.
Create another Transform keyframe.
With the Move Tool, select the text object and move it to area to finish reveal.
You can press space bar on your keyboard to play the animation you have just set up or use the playhead to scrub through the timeline view the animation.
Watch the video tutorial to see how to have the text reveal out of a line and then reverse the same animation.
Here's a look.
You also notice in this preview, three images played as a small photo slide in the animation. Here is how to set that up.
Create Photo Slide Animation
First, with the Rectangle tool, draw out a rectangle in the project and give it a fill colour of your choice. This will serve as a container for the photos, which will be clipped inside the frame.
Open or drag the images you'd like into the project – I have three all together for this less – which I have named Image_1, Image_2 and Image 3.
In the Layers panel, group the rectangle and all three images – make sure the rectangle shape is at the bottom of the three images.
Select all three images in the Layers panel and hover in between each image layer. While holding Option (Mac) or Alt (Windows) click in between each image layer to clip it to the rectangle shape.
In the timeline, go to the Image_1.jpg and create a Transform keyframe.
Move the playhead to the area where you want the image to be masked or hidden completely.
With the Move Tool, move Image_1.jpg out of the frame.
Move the playhead forward a few frames and in the Image_2.jpg layer in the timeline, create a Transform keyframe.
Move the playhead forward to the area (tip: keep the keyframe distance the same between images for consistency).
With the Move Tool, move Image_2.jpg out of the frame.
Now that you have set up two separate animations in the timeline, it's important to time them to your liking.
For instance, have the text play first, then add enough separation so the user can see the photo slide setup. Having all the objects animated close together will result in a poor finished project.