Category: Make It Move It

Make it & Move it: Monster Animations

10/20/2018

First graders just finished up their symmetrical monster portraits inspired by the book, Go Away, Big Green Monster. I wrote up thepost with all the steps here.

View the gallery of finished art on Artsonia here.

Transdigital art: physical and digital

I've been trying to design a lesson that could turn my 1st graders into animators. It would need to be a simple solution that would help students make a sequence of digital drawings from their physical art that could be turned into a digital animation with ezgif.com using their iPads. Here is what I've come up with:

1. Import the art into the Brushes app (I used a horizontal canvas to match the art). Pinch until it fills the canvas then click "accept."
Save it as frame #1 to your camera roll.

2. Switch the layer that is below the art to the top. Click it to make it tint blue (means it's the active layer). Prep a solid (opaque) paint brush and set it to size 25 thickness. Touch and hold on the face color to select the matching color. Make the "top lip" lower. Retrace the black edge. Draw white around the eyes to make them smaller. Save the images as frame #2.

3. Lock the layer (click the lock symbol) you just worked on so you don't accidently work on it. Click the "+" to make a new layer above. Make sure it's tinted blue (active). Narrow the eyes and mouth one more time. Save the image as frame #3.

4. Make a new layer and lock the old one. Take away all the color of the iris and leave only the pupil. Then decide if any of the lower teeth will remain and color the skin all the way down to the bottom line of the mouth. Touch up the black lines. Save as frame #4.

Gif made from 4 images looping: 1, 2, 3, 4, 3, 2

1. Original art

2. Smaller eyes + Mouth

3. Even smaller eyes + mouth

4. No iris + closed mouth

Made using ezgif looping 1, 2, 3, 4, 3, 2

Tutorial: Here is how we make these

Using Brushes App and Ezgif.com on the iPad.

Monster Animation from Tricia Fuglestad on Vimeo.

0 Comments

Memoirs of a Robot

8/12/2018

0 Comments

Early in the summer I received an email from a filmmaker, Mark Elias, who was about to launch a crowdfunding campaign for his next film, Memoirs of a Robot. He had come across a painting I had done of a robot a few years back and asked if I would like to donate a robot painting to his campaign as a perk for donors.

Well, I thought, why not? I hadn't painted robots in awhile, and I wanted to revisit the idea of making robots and animating them with my students. I have a post about my Make it and Move it idea here. So, I went ahead and made Annie Log and mailed it to Mark. I photographed her first and used that image to practice the animation technique I explain in the post.

Annie Log

Animated Annie Log

Do-Dad and Alumi-Mum on the cover of my AR Shutterfly book

Then, I began going bonkers over the idea of painting robots. I called it my robot phase (I might still be in it.) I painted Do-Dad and Alumi-Mum, Polly Phonic, and Anita Toonup. All of these robot paintings are showcased on this blog post. As you can see from the post, I animated each one of the robot paintings so that I would have plenty of examples to show my students when they try the technique this school year. THEN, I received a Shutterfly coupon in the mail. That's when I realized I had enough transdigital pieces of art to fill a Shutterfly book and practice using AR (augmented reality) to make the animations appear over the art. I've seen this technique recently at the ISTE conference and had it in the back of my mind. So, I designed the book, loaded it up with still images of art that I had or intended to animated, added a page with instructions for how to access the AR effects, and set it off to print. I went to HP Reveal studio to build my "auras" by setting the art as the "trigger image" and the animations as the "overlay". When the book arrived all I had to do was use the app to scan over the images and watch the magic.

The Indiegogo Campaign for Memoirs of a Robot will be offering posters of Annie Log as a perk for donations.
You can see Annie Log animate if you receive one of these posters. All you do is:

Download the HP Reveal app to your device
Follow my account Fuglefunart in the app
Use the app to scan the Annie Log Poster from and the animation will play right over Annie Log

Donate Today

A $100 donation to the movie project will get you a Limited Edition Poster of Annie Log
(that will move with augmented reality)

0 Comments

Make it and Move it: Patterned Paintings

3/3/2018

0 Comments

My students made beautiful patterned figure paintings to show movement. See their gallery on Artsonia. These paintings are also the backdrop for a stop-motion digital extension lesson where students animated a mannequin to show movement over their movement paintings. See this lesson and results here.

Make the Painting Move:

Original painting

Animated Painting

Here is the new digital extension animation plan: Import the digital picture of student art into Brushes Redux. On a layer over the image, recreate the center figure by tracing. Save this image as a png with a transparent background. Then mask out the same figure from original painting and redraw the color and pattern the figure had covered. This forces the student to consider the elements of foreground, overlapping, color, and pattern in a dynamic way. Save the masked painting to the camera roll. Import both images into the Do Ink animation and drawing app in composition mode. Set an animation path and add rotation to the figure. Save this as a video. Here is a quick overview tutorial of all the steps here.

Make it and Move it Patterned Figures from Tricia Fuglestad on Vimeo.

Trace, match the colors, and recreate the center figure on a new layer in Brushes Redux. Save PNG

Don't crop so the figure remains in the same aspect/place it was in the painting

Match colors and mask over the figure, redraw what would have been behind the figure

finished animation

I've been thinking that the figure without pattern would be best to isolate in this process. But, what if that figure is not in the foreground. Does it still work? Why not just isolate the most foreground figure regardless of pattern. Students could redraw the pattern digitally. I wasn't planning on this digital extension when I was instructing students in the design of their lesson. (Download the lesson here from TpT) If I were to do this again, I would have students make the unpatterned figure in the center also in the foreground to make this digital animation a bit easier for them.

Students Working:

Turn up your volume. Yep, it's perfectly quiet. Every single student is digitally painting. They understand the app interface, the concept, their purpose, & the overall goal. They are THINKING LIKE ARTISTS as they digitally create. This is what I've wanted to see for 18 years. This is the results of digital art projects since these 5th graders were kindergarteners. This is the results of being an iPad art teacher for 7 years. This is AMAZING! They are feeling right now how cool it is to work in such a forgiving media. They didn't appreciate the possibilities of the media when they struggled with the tools. Now, the struggle has ended with a hush as they drift into a calm flow of art-making.

Thinking Like Artists from Tricia Fuglestad on Vimeo.

Finished movies

Patterned Animation 5-1 from Tricia Fuglestad on Vimeo.

Patterned Animation 5-2 from Tricia Fuglestad on Vimeo.

Patterned Animation 5-3 from Tricia Fuglestad on Vimeo.

Patterned Animation 5-4 from Tricia Fuglestad on Vimeo.

0 Comments

Dynamically Demonstrating Movement

2/7/2018

1 Comment

5th graders will be dynamically demonstrating the concept of movement over their paintings about movement through the magic of stop motion animation and green screen. Here is the post about this lesson from when we first tried it. One big difference this time around is that we have 6 Dewey iPad stands (thanks to an ABC/25 grant) that gives us lift and stability.

Green Screen and Stop Motion from Tricia Fuglestad on Vimeo.

Step One: Painting about Movement

Click here to view their gallery of finished art on Artsonia.
You can download this lesson (step by step ppt) from TPT here.

Adding line and shape patterns with permapaque markers to our #movement/figure paintings
See our #fugleflick about pattern called REPEAT: https://t.co/3m3LKF7jLN #artsed #k12artchat #mustmakemon pic.twitter.com/TdcaPdXI3M
— Tricia Fuglestad ☕️ (@fuglefun) January 30, 2018

Step Two: Green Screen Stop Motion

I put together a guide for setting up this lesson and a step by step powerpoint for creating the figure painting here:
Download the green screen stop motion lesson from TpT here.
You can also download the figure drawing painting ppt lesson from TpT here.

Big fun in store for my 5th graders#stopmotion #animation with #GreenScreen
They will layer their movement videos into their movement paintings #d25ItsPersonal #drydenrocks #steam @DoInkTweets #edtech #artsed #k12artchat #makered #makerspace pic.twitter.com/39WWtGW1Zs
— Tricia Fuglestad ☕️ (@fuglefun) February 6, 2018

5th graders working collaboratively on their #greenscreen #stopmotion #animations Dynamically demonstrating movement. It will be layered with @DoInkTweets app over their #art #steam #edtech #artsed #k12artchar #makered #makerspace #drydenrocks #d25ItsPersonal pic.twitter.com/xz1qUCdzZv
— Tricia Fuglestad ☕️ (@fuglefun) February 6, 2018

Step Three: Layer image and video

HINT: Here is what it looked like in 2014 when the 4th graders gave this a try.

Student Results: 2018 5th graders

5-1 Movement Over Movement from Tricia Fuglestad on Vimeo.

5-2 Movement over Movement from Tricia Fuglestad on Vimeo.

5-3 Movement over Movement from Tricia Fuglestad on Vimeo.

5-4 Movement over Movement from Tricia Fuglestad on Vimeo.

1 Comment

MAKE IT then MOVE IT-Free Webinar

9/2/2017

0 Comments

The Illinois Art Education Association is now offering free webinars for professional development hours. They're short, interactive, and interesting (hopefully.) Check out the list of upcoming and archived webinars on their site (click button or here) to register.

Make it Then Move it: Mixing Physical and Digital Art
Wednesday, September 20th, 7pm Central

Format of Webinar:

The webinar will be synchronous beginning at 7pm central time. I will be sharing short pre-made videos that explain my content and then coming on your screen chatting with you through my webcam. You can interact by sending questions through the interface. Hopefully you will find it helpful. Feel free to watch the videos ahead of time so you can think of questions you might want to ask.

1. Express Yourself in Expressionism

Students made art physically then entered it digitally through the magic of green screen.
View the post here and my brief video below.

Expressing Yourself in Expressionism from Tricia Fuglestad on Vimeo.

2. MAKE IT then MOVE IT: Animated GIF

Students make artwork, take a digital photo of it, then use Brushes Redux on the iPad to make it into an animated GIF. See my post for details and the brief video below.

One example of making art then using digital tools to move it

MAKE IT then MOVE IT: ANIMATED GIF from Tricia Fuglestad on Vimeo.

3. Make Digital Art Physical: HOLOGRAM

Students make a flipbook style animation on the iPad using Do Ink Animation app then make it "come to life" as a hologram. See my post for details and the brief video below.
The more detailed tutorial is on my post.

Haunted Hologram-quick version from Tricia Fuglestad on Vimeo.

4. Rotoscope in a Mutoscope

Students collaboratively turned a video into a rotoscope (digital). These individual drawings were then printed and made into a flipbook mutoscope (physical). View my post for more details and the brief video below.

Rotoscope in a Mutoscope from Tricia Fuglestad on Vimeo.

5. Animated Sketchnotes: Mini Stories

Take the sketchnote concept to the next level by animating them. Combine physical drawings and animations to tell mini stories. View my post for details and the brief video below to hear the secrets of some of my mini digital stories.

mini digital stories from Tricia Fuglestad on Vimeo.

6. Haunted Masterpieces

Students can enter paintings as if they were ghosts haunting them using the Green Screen App by Do Ink. This gives students a chance to digitally interact with art, change the meaning, and reflect on the new story as if it hung in a haunted art museum. See my post for details and view my haunted paintings and meanings in the video below.

Haunted Masterpieces from Tricia Fuglestad on Vimeo.

0 Comments

MAKE IT then MOVE IT: animated GIF

7/7/2017

0 Comments

A long time ago I responded to Ian Sands on twitter asking for digital images of children's art that he could offer to his high school students to play with as they learn to animate. Some of his students selected my students "He Came with the Chair" paintings. The animations turned out SO adorable and inspiring-see example below or check them all out here. It has been one of my goals to figure out an elementary level lesson with a straightforward app that would give my students the experience of animating their own artwork in the same style. I think I might have figured it out. This technique isn't perfect, but, it will work.

If we had Procreate app: like photoshop

The Brushes Redux app (free) allows you to work with layers like photoshop; select and match colors, use different textured brushes, and save each layer individually-all things needed to make these animations. However, the app does not allow you to select parts of the image. That's how the feet were moved in the animation below. The artist selected the feet, rotated them a bit, and redrew the surrounding space to match. This is the element my students would need to work around unless we purchase Procreate app for the classroom which has all the tools we would need. Sounds like I should write a grant.

Original artwork by a Dryden 2nd grader

Animated using Photoshop by HS student

Alternative plan: Brushes Redux (free)

This alternative solution for making animated GIF using Brushes Redux is to redraw each change in the piece of art. You need to choose a piece of art that has colors, textures, and elements that can easily be REDRAWN since you can't select and move. So, let's look at these portraits of George Washington by second graders. They each have clear and solid black marker lines and a clean opaque paint. It would be easy to redraw the eyes, mouth, nose, or even the wig or shoulders. Here is my first run through:

Original drawing #1

redrawn irises and corners of mouth #2

Redrawn irises, mouth, eyebrows rise #3

Eyelids shutting, blush & smile increase #4

Changed blush, eyelids, mouth #5

These are the five drawings I sent to my camera roll after redrawing some changes to eyes, mouth, eyebrows, and skin color. One trick to make your colors match is by holding and pressing down over a color until the "circle of selection ring" shows up. You can drag that ring over any color you want to match from the painting. Lift up and touch down again and you're ready to paint. It's really quick and easy in this app. If I had trouble making the blush effect blend nicely in #4-#5 so I had to switch brush styles to something more transparent to airbrush it in. I didn't choose white or black to draw with, I chose the white-ish/black-ish color in it for consistency.

Screenshot of George Washington Painting in Brushes Redux

After importing your original image into a layer of Brushes Redux, you need to size it and never change it again. Consistency is really key for making the art look like it is moving. I deleted the extra transparent layer and chose the DUPLICATE button (double square +) from the top bar in the layers. I could only see the top layer so the bottom one didn't distract me, but to make sure I didn't draw on the wrong layer, I LOCK the bottom layer when I'm done with it (touch the lock symbol next to the image layer). I can use the eyeball feature to reveal and hide layers to check on how my changes are looking from one layer to the other. I would try to keep this animation simple by not exceeding 5 layers/drawings. It's hard to see all the layers in the app at one time when you get beyond 4. That can confuse your little artists. When you're ready to save your work: 1. close the eyeball on each layer expect your original (bottom layer), choose save to photos. 2. Open the eyeball on second layer and save to photos. 3. Repeat this until finished. This makes the images in the camera roll stay in order.

Screenshot from ezgif.com preparing animation sequence with duplicates

Now students can go to ezgif.com on their iPads and upload their images into the GIF maker. You'll see above that my five images are made into a sequence of 8 so that it will loop nicely. 1, 2, 3, 4, 5 are the drawings. I copied 4 and placed it after 5 so I could start reversing the sequence, followed by a copy of 3 and 2.
Let's spell this out clearly for little artists:
1, 2, 3, 4, 5, 4, 3, 2 (sequence for 5 images in animation)
1, 2, 3, 4, 3, 2 (sequence for 4 images in animation)
1, 2, 3, 2 (sequence for 3 images in animation)

Here is how it looks: (I used the crop tool to trim off white edges)

Quick Video Overview:

Use this video to introduce the project and help students see what the process requires.

MAKE IT then MOVE IT: ANIMATED GIF from Tricia Fuglestad on Vimeo.

Thinking this through: (my notes)

Now that we went through the process, I'm trying to think about the age group that would do this project. I think that we could make this work for almost any age if I helped with file management. Brushes Redux will save their work from week to week in their gallery. So this could be a long term drawing project. When students are ready to save, we could upload their image sequence to a folder I make for them on dropbox. The dropbox app gives you the chance to rename a group of files. It becomes their name followed by the number. At this point, the files are safe and ready for uploading to the GIF maker in Ezgif.com. This could be done the following week. I could have them download the images into the camera roll in correct sequence with duplicates included as spelled out above.

Turn in art in order with help of Dropbox

screenshot of Wild Thing- layers in Brushes Redux

Another approach I might go with is to add structure the process since everything about it would be new to young learners. We could all work from the same gallery of images so we can tackle similar problems together. If we worked on, for example, these Wild Things from 1st grade, I could demonstrate how I would animate the eyes, mouth, and the horns. They might make other creative choices, but the problem-solving I demonstrate would transfer easily to their creative solutions.

4 drawings in this sequence: 1, 2, 3, 4, 3, 2 so it loops nicely

Examples:

The fifth graders' 3/4 pose portrait paintings are perfect for this animation lesson by making subtle changes in the expression. It forces the artist to think about what faces do to express emotion and map out a sequence of drawings to create this expression. This is a different form of expressionism (HA! Art teacher humor).

The fifth grade Light Up Robot painting is fun to animate with moving and blinking.

This 5th grade robot painting didn't have very much detail for me to animate. But, through the magic of digital drawing, I was able to add blinking lights, a moving lever, and a rotating gauge as I animated (see middle robot below).
Going through these steps made me wonder if knowing you are going to animate your robot digitally as an extension to the project would change the way you create it initially.