 Not mine, but wish it was. This was shared on Facebook | I saw this image shared on Facebook and went absolutely crazy. It not only made me laugh, it made me think as I tried to figure out what the artist did to animate this vintage image. So this is what I observed: 1. The image must have been "lifted" from the background. 2. The background (where the lady was) was filled in with the same coloring and texture. 3. The image was enlarged so that she overlaps the blue space at the top. 4. She was redrawn or filled in in the new areas revealed by her movement. 5. She totally moves. The gif is 19 images that loop nicely. |
Using Procreate App on iPad
 Image I used for my first attempt |  First of all I should say that I chose to animate vintage images not only because of the juxtapositioning created between old school illustrations and technology, but simply because it's originally a drawn image. The animation approach I used required me to redraw and match the style of the image as I move elements around. It would be much harder to redraw over a photo. Procreate app has drawing tools, layers, and the ability to select sections of a drawing. This is key to the animation. I lassoed parts of the drawing, rotated it, then drew with matching colors and textures. |
 I isolated the figure in Superimpose App |  I erased & matched colors in Procreate App |  Layer figure, select item, move, draw, save |
"Sew" long I'm outta here
Using DoInk Animation App on iPad
 I chose this image to try animation with keyframes in DoInk |  I used Procreate app to erase and clean up the background |
 |  |  |  |  |  |
I used the Superimpose app to isolate the figure by erasing the background and saving "mask as png". Then, I isolated each "moving part" of the figure the same way. Hint: I erased, saved, then hit undo, and erased it differently, saved, hit undo...to go faster. In DoInk animation app I opened a new composition and brought in all the pieces over the cleaned up background. I moved arms, skirt, head, and legs using keyframes and paths. The movement looks very fluid compared to the jerky animations from a series of still images. Since this ad included musical notes, I made a soundtrack in the garageband app with a royalty free jingle from incompetech.com and voice recording.
Changing my approach
 Used this image to create another animation | I began looking for images that looked ready to dance. These three men looked like they wanted to do a little choreographed routine in unison. The middle guy's feet were crossed and all but one hand is hidden. So, I had to draw and match some hands and part of a leg. The thing I found the most challenging about this animation was figuring out the sequence of movements. I had to pull out my underdeveloped dance skills for this task. So I used the select tool, grabbed from the knee around the foot and rotated it over the other leg on man "c" and "b" to match man "a". Once they all matched it flowed from there. |
This animated gif contains 13 images. Created in ezgif.com
Now that I'm totally into creating 6 second videos for Vine (thanks again for this LOVELY write up about my vines from Ben Rimes) I began thinking about the soundtrack for this movie. Oh, did I forget to mention how to make it into a movie? I create gifs using ezgif.com and then I change the gif into a video using this online converter. The man in the middle looked like he is wearing a lumberjack quilted flannel type jacket so I used the Monty Python Lumberjack song complete with laugh track.
Hybrid of Procreate and DoInk
 Original image. Created a hybrid animation
|  When I looked at this image I asked myself, What action is about to happen? I imagined the lady dropping the apple. But, to make it more interesting I decided it would hit the circular logo on its way down, roll a bit, and be caught in the hand (that doesn't exist in the drawing) of the man. This meant that I needed to isolate the apple (using Superimpose app) and save it as a mask png so it has a transparent background. Then, I had to draw the rest of the lady's hand that held the apple and save that image. Then duplicate that drawing and add the man's hand out of his pocket and save that image. I call this a hybrid animation because I use drawing techniques like in the vogue design and keyframing like in the dishwasher ad. The falling apple is best animated in DoInk with a keyframe and paths in composition mode. Did that sound like a different language? Here is a tutorial to help. |
Here is what my timeline looked like for this animation. The top line has keyframes (diamonds) set up to direct the apple as it falls.
Another benefit of animating in DoInk is that you can export to video. I did some editing in iMovie afterwards to add music and sound effects before sharing it out on vine.
This animation below is also a hybrid of Procreate and DoInk. I used DoInk to make her scamper on to the page by setting a path in composition mode. The rest of the animation was made from still images created in Procreate sequenced together into a movie.
Dotty and Madge share vintage sewing secrets below. They are examples of the hybrid style where they are animated both with procreate and doInk.
Using Green Screen App
After I created the "Staying alive" animation (which you can view here) I layered it into the hands of this girl painted by Norman Rockwell using the Green Screen app by DoInk. I had to change her a bit too by adding a shadow the size of the animation on her face. The green screen app just added cropping, resizing, and masking tools so I was able to fit the animation to the right size, erase for the fingers to overlap, and crop any excess.
Below is a triptych. I created the sewing table with objects and still images of the original vintage sewing patterns using superimpose app. I was able to mask out objects and add slight drop shadows. Then I imported the image into the Green Screen App by DoInk and matched the animation videos over each of the sewing patterns with resizing & cropping. I timed the movie to play one animation after the other (18 seconds long). Green Screen app keeps original audio of my clips so this looked hard, but was so easy.
The animation below has two scenes. The first one is a man jumping into a car ad and driving off. The images were isolated in Superimpose app, the background was cleaned up in Procreate, and the animation was composed in DoInk Animation app. Then I had the car drive (with DoInk) in front of three vignettes designed in Superimpose app. This was layered into the Green Screen app by DoInk where I added three little animations. The app only has three layers so I exported after layering two animations into the scene then imported it again and layered the third.
More Examples:
Shocking News
Tossing around ideas
1, a 2, a 3, again, ladies
Sneeze
Everything fits in my apron
Hey, look over there
Does this outfit make my legs look long? Resources for finding Vintage Images:
There is a Vintage Sewing patter Wiki with over 83,000 images. Explore here.
click image to view website
Update: Download my Augmented Reality Book of Vintage Illustration Animations from this post
Click to go to the post with info on AR, a 21 page book, and creativity challenge activity
RSS Feed
