Cecily Moore │Special Project - Animated ECard

When the release of the ‘It’s My Party’ Collection happened I knew I wanted to stretch the potential of this kit even further than just documenting birthdays and special occasions.Now the next logical step is to use the wonderful digital elements from the scrapbook kit and turn them into cards, but I like to think outside the box a little and I think a wonderful way to share a greeting is through an Animated E-Card so that’s what I did! I absolutely love how the elements from this collection took form into this cute little E-Card, which can be quickly sen toff into anyone’s inbox or shared on their social media! If you’d like to learn how to digitally wish all your loved ones happy birthday, keep reading to see how I made an animated E-card, and how you can too!

Gather your elements. If you’d like to create an E-card similar to mine, all you’ll need is the ‘It’s My Party’ Scrapbook Kit from Little Lamm & Co, Photoshop, and a little imagination! I chose to use the four candles, the silver sequin stars, the pink ribbons, the gold beads, and the pink Gerber daisies … oh and don’t forget the Happy Birthday sentiment to create my E-Card. 

Create your layers. Once you’ve chosen all the elements that you want to include, you’ll need to have a vision of how you want your animation to go. For me, I wanted the candles to appear one by one, and then light one by one, and then the flame would engulf the pag eand reveal a full page spread of all the other birthday goodies (flowers,stars, ribbons). One by one those items would disappear slowly revealing the sentiment below, which will then flash at the end! Now this sounds like a lot,but if you work backwards it’s not too difficult to achieve! Start by creating a new file sized 1280x1024 pixels (ideal for web content which is what we’remaking!).   2.1 Create the full-page spread of birthday goodies with sentiment below already in place. This will help when you’re taking each piece away to have the sentiment reveal in a fashion that is believable.   2.2 Save the image of the full-page spread in its entirety and then save images step by step as you hide layers (eyeball icon in the layers panel). As you can see in my thumbnails I simply took one or two elements away each time and then saved the image as anew jpeg. You’ll also want to save one completely white page as well for the flashing element at the end.

  2.3 Create your candle element.This one you’ll be starting from a white screen and introducing your elements one by one instead of working backwards like we did before. Start with the left candle and save that image, so on and so forth (follow thumbnails above).Because there isn’t a flame included in the kit I simply grabbed my brush too land drew one flame then duplicated it for each candle. To make it engulf the page, I simply gradually enlarged the flame and saved a new image each time,then duplicated the flames until the page was full. To reveal the full-page birthday goodies spread I simply then took away the flame after covering the entire page to reveal the under image. Because you’re revealing the birthday goodies spread under the flames, you’ll need to have that prepped before creating these image seven though it will come into the animation sequence after the candles.   After creating your animation sequences and saving each individual frame as a jpeg, you’ll be ready to create your animation. We’ll do this by creating a GIF file in Photoshop.

In Photoshop, open a new web file 1280x1024. Place your jpeg files one by one in the layers panel they should be in the order in which you want them to animate. Once you’re set with the order (you can follow my thumbnails if you need assistance), you’ll need to begin the animation process. Under the Window menu at the top, click on the Animation option. This should bring up a new window at the bottom of your screen and you’ll want to be on the Animation (Timeline) tab. To create your Animation you’ll simply:   3.1 Hide every layer except your first white layer (see red notation of eyeball marker in layers panel).   3.2 Add frames with the option indicated with red notation in the Animation menu. To create your animation you will add a frame for each jpeg you have. When you click the button indicated with my red notation it will automatically duplicate the previous frame so when you add a new frame, simply turn on the layer above the previous one (eyeball from step 3.1). Continue this process until your animation is complete.   3.3 To keep in mind: I have also indicated with a red notation the duration of each image. I have mine set at 0.2 seconds but you can choose any length of time you wish.    3.4 To save your animation you’ll want to go to File, Save for Web and Devices. Under the drop down menu choose GIF and save your file. Check the animation in a web browser to make sure you’re happy with the duration of each slide etc - it’s now ready to bee mailed or uploaded to your hearts content!     I hope you enjoyed this little tutorial and will be sending animated E-Cards in no time!   Xo, Cecily | The Paper Curator

Products Used

Hi! I’m Cecily, an avid scrapbooker + coffee drinker + pursuer of happiness. A fashion designer by trade, I use the knowledge from my art and design background to create unique, artistic keepsakes with an emphasis on color, typography, and texture. I live my New York life to the fullest while curating it into paper keepsakes to share.

Blog

Facebook

Instagram

Pinterest

Twitter
Youtube