Christmas may look a little different this year, but the way we send warm wishes to friends and family doesn't have to.
This year has certainly become more virtual than ever, which is why there's no better time to create an interactive, animated Christmas e-card.
This is something even beginners can do, using Adobe InDesign to create a postcard sized e-card with animation that can be published online and shared with the ones you love.
In this tutorial, I will go over how to design a simple card, add animation on page load and as a final step, use InDesign's Publish Online tool to upload the work. From there, you can email the e-card or even share the link on Social Media.
Let's get started!
Document Setup
Create a new document and select the Web tab
Set the width of the e-card to 360 px and the height to 504 px (This is the same size as a 5" x 7" greeting card, only digital!)
Select Portrait orientation — unless of course you want a Landscape setup!
Set the pages to 1 and the Margins to 24 px all the way around
Click Create
Follow along in the video tutorial to learn how to design the card. This way, you can add your own twist or try something completely different with methods I go over.
Before getting into the Animation part of this tutorial, open the Santa graphic — or any asset you're planning to use as the main illustration on the e-card — in Adobe Illustrator.
Ungroup the Artwork by going to Object > Ungroup, so you have three different parts — glasses, moustache and beard. Copy the illustration and paste it into your InDesign e-card document.
Here's how to set up the Animation for the e-card, using the Santa Claus illustration.
E-Card Animation
Go to Window > Interactive > Animation.
Go to Window > Interactive > Timing.
Click on the glasses and with your Selection Tool, move it off the page, all the way to the right, just on to the pasteboard.
With the glasses still selected, go to the Animation window and select the Wave preset. Set the duration to 2 seconds.
Click on the Green Animation Arrow indicator with the Selection Tool. Once it's selected, click on the Direct Selection Tool to drive into the selection of the Arrow.
With the Direct Selection Tool, click the head of the Arrow and drag it to the centre point of the page.
Click on the Moustache and in the Animation window, select the Zoom In (2D) preset. Set the duration to 1.5 seconds.
Click on the beard and in the Animation window, select the Fly in from Bottom preset. Set the duration to 1.5 seconds.
Click on the first line of the greeting message — From our Family To Yours — and in the Animation window, select Fly in from Left. Set the duration to 1.5 seconds.
Click on the second line of the greeting message — Merry Christmas — and in the Animation window, select Fly in from Bottom. Set the duration to 1.5 seconds. You also have the option of extending the animation arrowhead so the text travels a longer distance when animated.
Timing
In the Timing Window, click on the three animated sections of the Santa Claus illustration as showed in the panel
In the bottom right corner of the Timing Window, select the Play Together icon so all the animation plays together on page load