This snow globe effect is a fun way to teach transparency, animation, and layering with green screen. Students can add a still image, animation, pre-recorded or live video to their globe. I was inspired by the Green Screen Maker Space Book by Todd Burleson (lesson 6). I downloaded the image suggested and began trying to figure out a way to turn the project into a video with a layer of snow. I go through all the steps in this app smash in the tutorial below or here.
Download my video below and import it into the top layer of the Green Screen App by Do Ink. Use the mask tool to make the center of the globe semi-transparent (see step 6 above). Then download my white image here. Import this into the bottom layer. Now you're ready to add a still, animation, or live video to the center layer.
Last year I was asked to contribute project ideas to the Green Screen Maker Space book by Todd Burleson. The book features 24 step-by-step green screen projects to create in the classroom with students.
I just received my copy and discovered what made the cut:
#1. My superhero project (modified)
#24. Shadow Dancing project
You can buy the book on amazon here.
All my projects are on my website, so I'll share the two projects with link to resources below:
Click here to find the original post.
Click here to download the worksheet.
Click here for the tutorial using Superimpose app on the iPad
Click here to see the post with step by step instructions and resources.
Our district is embarking on a ONE BOOK ONE SCHOOL event where every student reads (or is read to) the story, A Nest for Celeste by Henry Cole. Here are some ideas I thought of for connecting with the story through art, animation, and character counts.
Below is a handout I created to help students see the shapes in Celeste's form to help you draw. The original illustration by Henry Cole is a value drawing. The pencil strokes become the texture of the fur. He shows highlights and shadows by adding more or less graphite from the pencil. This technique looks more 3-D than just filling in the drawing.
Fly with Lafayette the Osprey
1. Fly using green screen video masked into a still image over a video of clouds
2. Digitally layer in a still photo into the basket and create an animation path in Do Ink.
Be as kind-hearted as an osprey
As Small as a Mouse
Henry Cole wrote and illustrated A Nest for Celeste. He was able to tell us with words and pictures about the characters, setting, and all the elements of the story. See this Fugleflick about the importance of Illustrations.
Digital Carpet Painting:
Before you can go on a magic carpet ride like Aladdin, you need your digital carpet painting in perspective so that you can view it from the side so you can climb aboard. I added my painting into the superimpose app over a plain color background. I found the tool mode for the foreground layer and chose perspective (the default). The configuration needed could be pulled and stretched by grabbing the handles on the image or you can chose a pre-created configuration at the bottom of the screen. I chose the one all the way on the right. Then, chose the checkmark to apply.
Fly on carpet (using still images)
This simple method will get your students up and flying without animating a background. They could pose as if they are riding their magic carpet paintings, use the superimpose app to layer their photo onto the carpet, and take it for a ride using the Do Ink Animation app over a background photo (like clouds). This would also create a fun still image for students' Artsonia gallery.
Moving Background Video:
One really fun way to extend this lesson into geographic/cultural studies is to have each student draw a landmark that they could fly over: Eiffel Tower, Big Ben, Statue of Liberty, Mt. Rushmore, The Pyramids, Great Wall of China, Stonehenge Grand Canyon, Red Woods, Golden Gate Bridge, Taj Mahal, Hohenzollern Castle, The Leaning Tower of Pisa, etc. See this list of 15o famous landmarks.
Film the Green Screen:
Paper Cut Version:
BACKGROUND: This version of the magic carpet ride lesson includes a paper cut landscape that shows foreground, middle ground, background in paper pieces. These will be animated traveling across the field of view through stop motion animation. It would be a great opportunity for students to show an understanding of foreground, middle ground, and background in the pieces they create and how they animate the scene.
GROUP ANIMATION: I'm thinking that the background animation would be a group project. Each group would work on designing, drawing, cutting, and animating their landmark landscape. Each student would make their own magic carpet video of themselves flying over their group landmark landscape. Therefore, the class compilation video will only have six backgrounds but 24 videos.
MAGIC CARPET MADE FROM PAPER: A digital magic carpet wouldn't look right with a paper cut background. So, they would need to make a paper carpet in perspective. This is a great opportunity to teach students about a vanishing point, converging lines, and how pattern would be small in the back and large in the front (relative size).
Since you are not going to use stop motion for the carpet, I just took a digital picture of the paper drawing and erased the background in the Superimpose app. It needs to be digital for the green screen effect where a student rides the carpet.
Student Results: view the paintings on Artsonia
This link takes you to a travel website featuring 150 famous landmarks. Every student can feature a different landmark in the background video/animation. This would make the class video even more exciting as they fly over scenes from around the world.
View this safeshare.TV link of the "Whole New World" scene from Aladdin.
Relative Size refers to clues in the picture that help you figure out the size of objects.
Playing with relative size forces the viewer to imagine something much bigger or much smaller than seemingly possible.
Below is a drawing of a fireplace mantel. It has a candle and picture frames. You would imagine that the objects are only about 8"-12" high. Now when you place a human on the mantel that confuses the scene. Either the mantel is much bigger than you thought or the human is a small as a mouse.
Below is a drawing of a building in Arlington Heights. You can tell from the size of the sidewalk and umbrella tables compared to the building that it's probably over 10 stories tall. Now when we add a human into the picture as tall as the building it makes you wonder if the building is much smaller or the human is monstrously big.
How did you do that?
The green screen app by Do Ink allows you to layer video over or under an image. You can record in real time using the camera mode or do what I did above. I recorded the student in front of green screen first which allowed them to crop, resize, and find the best placement over their drawing to create the illusion that they are as small as a mouse according to relative size.
To make it look like the human can stand behind the building and in front of the sky we had to import the scene twice. You'll see on my screenshot above that I sandwiched the green screen footage between duplicate images. Then, I erased the background from the top image using the masking tools in the app. Here is what it might have looked like if you were just viewing it alone. I can do this trick in the superimpose app as well and then import it, but it's not necessary since the Green Screen app has all the tools for erasing too.
Playing with relative size resources:
Take a look at this commercial. It's fun to see the inflatable gorilla set loose in the city. Does it's size seem to change when you compare it to the relative size of the objects around it?
This clip from the Disney adaptation of the book, BFG (Big Friendly Giant) makes everyone feel as small as a mouse when you see the world from the point of view of BFG.
A group of 4th graders used their profile drawings and green screen videos of 1st graders to play with relative size. We called this movie, Little Buddies. See this post for more info.
How to create this effect directly in app:
Here are the steps for creating this "postcard" effect directly in the Do Ink Green Screen app using their Mask function applied to an image over a video.
Creating the effect using a template:
Creating a template makes the project much easier for young learners or lessons with a time crunch. I made this template in Keynote using instant alpha to erase the center space. I like the template because of the drop shadow I can apply to the postcard shape and hand.
More examples of this technique
I taught an animation workshop today at the Taste of Tech 2017 conference. Below are the lessons we tried to cover and links to the resources. Click on the Thinglink image to go directly there. Thumb through the slideshow for quick tips. Page 1. Page 2.
I was able to attend Kim Darche's session about questioning techniques. To help me remember the great ideas she was sharing, I made this sketchnote.
I wanted to see if an app I already had on my iPad, the Green Screen app by Do Ink, could help create a ghostly illusion. I knew that you would have to be able to combine a layer of the environment without a figure under a layer of video from the same exact view of the environment. This layer (the one with the figure) would need to have less opacity (be made semi-transparent) so that it appeared that they were see through.
BUT, the green screen app takes away some of the difficulty of creating two exact videos with and without a figure since you can layer using the magic of green screen over anything and change the opacity with their mask tool. Here is how I was able to achieve the effect. There might be an easier way, but this is pretty simple.
Haunted Masterpieces: using this illusion
Now that I know I can get this effect to work using an app my students already have available to them in the art room, I thought about what content I could teach that would make this illusion necessary. I came up with the idea of Haunted Masterpieces. This would teach, art history, creative writing, storytelling through body language, digital layering, and transparency by having students enter a piece of artwork as a ghost and tell the story of why they are there. This would be a short campfire ghost story that would engage students in a piece of art and its artist.
STEP ONE: Mask out the figure from the artwork (if necessary)
I started with a piece of art, The Scream by Edvard Munch, where I had masked out the figure by matching the colors and textures in a drawing app (see video below or just grab mine here). You might choose a painting with plenty of blank space like an Edward Hopper painting (see my curated collection) or no figures like a landscape or still life. In that case you might choose to skip this step.
STEP TWO: Film the green screen video of the student
Before you film, the student needs to know their story and be prepared use their body language to help tell the story. It might be fun to come prepared in costume or with props. I think a two second clip is all that is necessary. They will write their story and make their haunted video into a looping gif or still image. Filming with audio where the student explains their story would work as well, but each audio clip would need to be short enough that a class video would remain under 3 mins (to keep it engaging). Capturing audio while the student is in front of green screen and backed away from the iPad filming him/her is tricky. You could set up an external iPad mic and have the class completely silent. Or, you can put a lapel mic on the subject if you think you can hide it for the filming. That takes time so classroom management would be more difficult.
STEP THREE: Create the ghostly illusion
The illusion doesn't happen during real-time green screen capture. It happens in post-production. So, students would need to gather their background image and green screen video into their iPad camera roll and open up the Green Screen app by Do Ink. The background image goes on the lowest level. The green screen video goes above it. The app will automatically remove the green but you will need to crop, resize, position the ghost, and mask it to make it semi-transparent to complete the effect.
STEP FOUR: Convert to a gif and caption it with the ghost story
Students can pull up the website EZGIF.com from their iPads and upload the video from their camera roll to convert it to a gif. These can then be displayed on my weebly blog and shared on their online art gallery. They could use the caption tool for the image to tell their story (or use the artist statement section on Artsonia to share in their portfolio.)
Layering into artwork with masking:
The techniques I shared above have the ghost layered over the painting with or without an erased (or masked) element. The easiest and fastest solution to this effect is to find a painting with open space and layer the ghost into it. If you want to explore more advanced approach, you can create an effect where the ghost is layered into the painting as if they are behind elements of the painting. This effect can be created through masking of the original image. All of this can be done in the Green Screen App using their masking tools however, I find it easier to mask images in superimpose app and save them as "mask png" which holds it's transparency in the iPad camera roll. I have a tutorial showing how to use this app this way (see beginning of this video near 2:40).
Now that the background has been erased, the ghost image can be added between these two layers. The green screen app by Do Ink gives you 3 layers to work with:
TOP LAYER: Masked Image (becomes the foreground)
MIDDLE LAYER: The green screen video (looks like it behind the figure in painting)
BOTTOM LAYER: Original painting lined up exactly with the masked image above
Add the frame and museum label
The visual arts national standards emphasize presenting artwork. This lesson could be a fun way to approach the topic by having students CURATE A HAUNTED MUSEUM. After they create their haunted animation, they could frame and label the piece with artist, title, and other information. We could set up a "virtual tour" with their narration presented as a class movie.
Connections: Kinetic Art & Automations
Make a Whirly-bird: plan
The challenge is to make a bird from cardboard that has moveable parts. There is a clear connection between drawing a bird and designing a whirly-bird since you just have to break everything down into shapes: head, beak, eye, legs, body, wings, tail. Each shape can be a piece to add back to the whole bird with brads instead of glue. The brads keep the pieces of the bird moveable like a whirligig. However, this whirligig isn't going to be able to move with the wind. It will move through the magic of stop-motion animation.
Since I work with 100 students in each grade level, I have to figure out a way to manage resources and materials efficiently. This guide (below) can be printed on 8.5'x11" paper to help students make good choices for size, shape, and placement of holes/brads. This may help avoid mistakes from misplaced holes, working too small, or wasting valuable space on their cardboard sheet. I will encourage students to create their own designs and not use my sheet as a tracer so I will need to provide extra cardboard for their ideas.
Build a Whirly-bird: lay out and attach
Paint: prime, balance color, add pattern
Assemble & test: add brads & try it out
Whirly-bird ideas: dance & weathervane
I wrote a post about using this app for a collaborative dance video. It's very similar, so it can help you through the steps of using Do Ink, layering video, and organizing files.
This project would teach SO many concepts: silhouette, landscape, atmospheric effects, monochromatic, size, movement, pattern, balance, stop motion animation, and layering. I have a post and tutorial for creating a digital appalachian mountain landscape here.
This same concept translates well as an insect too. If students made a whirlygig insect then the lesson can have a science component to learn about the parts of an insect as they build. No, that's not a tail-it's a stinger. Sorry for the confusion.
One of the ways I love to integrate technology is by extending physical art creation with a digital element. This idea relies heavily on both physical art and digital manipulation since it begins with drawing and ends with animation. Here are the results below:
The time-lapse: iMotion App
First I practiced my drawing. I had done lots and lots of insect drawings with my 1st graders this school year, so I didn't have to practice long. See this post for drawing resources if you want to try an insect too. I set up the iPad on a tripod and opened up the iMotion app, set it to time-lapse (take a picture every second), and started my drawing.
When I was done I exported the video to the camera roll. It was 7 seconds long.
TIP: It is important to start the video with the blank sheet (no hand) and end with just the image with just the drawing (no hand) to help out your animation steps coming next.
Stills from time-lapse: Green Screen App
You need to capture an image of the blank sheet from before you begin drawing and the final image of just the drawing. (See below). These two images are needed for the next step. There are a few ways to capture these images but my favorite way is by using the Green Screen app by Do Ink. I load in the video, toggle the timeline indicator to the first frame, select "image" and "save" to the camera roll. I do the same for the last image. It's a clean clear image and you can control it very nicely. Taking screenshots might work too.
Clean up the Drawing: Superimpose App
Before you can animate you have to isolate the image by erasing the background and saving it that way in a PNG format. You can do this very easily in the Superimpose App. I pick a color for the background, bring in the drawing for the foreground, then use the magic wand (default) to select the background. If it takes away too much I can draw it back in with the eraser or erase away mistakes with the paintbrush (counter intuitive, I know). Then I touch the house icon, find the share button, and "save mask as PNG". This puts just the foreground image (your drawing) with transparent background into the camera roll as a png. See my image below. Use the beginning of this tutorial to help you.
Make an animation plan and end image:
Since my drawing is an insect, I thought it would fly and land on my finger. So I posed and took a picture that leaves room for the insect to be added back in later. Now with this in my iPad camera roll I have all the elements to begin animating.
Animation: Do Ink Drawing & Animation App
My steps below explain how I put together the animation using the Do Ink Drawing & Animation app in the composition mode. If you rather see a tutorial start at 53 sec mark.
After previewing the animation (using the triangle shaped play button) I saved it to the gallery and shared it as a video to the camera roll. Now, I have a time-lapse video and animation to combine in a movie editing app like iMovie or Pinnacle.
Similar Idea: Make it and Move it
This post maps out ideas for making art projects physically like a paper collage or painting, then making a digital image of them animate. Click the image to see post.
View our Entry for the What's Your Story
Internet Safety Contest
(Won the 2nd Place Prize)
View this musical tribute to the hard working teachers at Dryden and the students they love to teach.
Tricia Fuglestad, NBCT 07
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.