Can you smell that? *sniffs* That’s right, love is in the air, and that can only mean one thing, Valentine’s Day is just around the corner! You might love it or hate it, but it’s a good excuse to spread a bit of love to your clients or followers so, spice up your social media posts with a beautiful Valentine’s Day gif following this step by step guide on how to do it.

1. Choose your vectors. There’s a great variety of vectors you can choose to create your gif, choose the ones that go with the message you want to transmit or that go with your brand. We chose these cute lovebirds.

2. Get started. Once you chose the vectors you want to use, open Photoshop and separate each individual movable object into layers. You will need to copy and paste each element from Illustrator to Photoshop.

 

3. In the upper menu bar of Photoshop, go to “Window” then choose “Timeline”.

 

4. The timeline bar will appear on the bottom, then select “Create Video Timeline” on the dropdown menu.

 

5. Each one of your layers will be divided into different timeline layers automatically.

 

6. Heads up! Before you start animating, make sure all the layers on your right are “smart objects”. If they are not, right click each one of your layers and convert them to smart objects.

 

7. And now you’re ready to start animating! Select the layer you want to animate, click the arrow on the far left of the layer title to show the layer attributes.

 

8. Make sure your animation is starting from 0 by dragging the redline to the very beginning of the timeline. Then click on the clock icon next to “Transform”, this will create a “Frame” which looks like a yellow diamond dot.

9. Move the red line to a certain point where you want the next movement of the bird to happen, in this case, it is 1 second after the first frame.

 

10. Start animating your object’s movement by either rotating, moving or scaling. In this example, we want the birds to cuddle, so we moved one bird closer to the other bird.

 

11. Repeat this step for a few more frames and adjust the position of the bird according to the movement you want.

 

12. Make the same with the green bird exactly on the frame that you want them to cuddle.

 

13. Now, let’s work on the hearts, we want them to float over the birds, some sort of bubble movement.

 

14. Animate the hearts within 5-6 frames (5-6 diamond dots) and keep the duration of the animation roughly at one second. You can move up the heart and rotate it a bit within each frame.

 

15. Next, we will play with the opacity of the hearts so it looks like they appear and fade away. Select the clock icon in the attribute “Opacity” (which is right below “Transform”). Make sure that the red line is dragged back to the beginning of the timeline.

 

16. Try to align the Opacity frames with those on the Transform attribute, change the Opacity to 0% in the first and last frame, and make sure you set two frames with 100% Opacity on the middle.

17. Do the same to the other hearts going one by one and modifying their attributes accordingly.

18. Make sure the frame position of each one of the heart layers is different to one another in the timeline so the heart movement looks more natural and organic.

19. And,  you’re now ready to convert your hard work into an amazing gif. Go to File -> Export -> Save for web.

20. Make sure that (a) is selected as GIF, and (b) or “Looping Options” is selected as “Forever”. Click “Save” and select the folder where you want to save your gif.

21. And done! You can see your beautiful and lovable gif on your preferred browser, and you can start spreading the love on Facebook, Instagram, or even your own website!

It should look something like this:

So, now that you started mastering the art of “animated gifs” you can go and experiment with any vector or illustration you want, if you feel that Valentine’s Day is not your thing, you have plenty of options to experiment with, just check out StockUnlimited and sign up to get your imagination flying.