Christian Schaaf's Blog + Portfolio

Tag: photoshop

  • Module 7: Advanced Motion

    Module 7: Advanced Motion

    For this last module, I explored advanced animation techniques and worked on the final project for “Motion Across Media.”

    Reading & Writing

    This week, I read Chapter 11, “Show and Tell,” in Liz Blazer’s Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics. This final chapter focuses on strategies for effectively sharing and promoting animation projects. She provides steps to make your project stand out among others. In prior chapters, Blazer described how to tell a story in an animation project, and now it’s time to tell the story of the animation project.

    1.) Package Your Project: Animators must package their project in a professional way. The following steps will ensure that your audience has everything they need to view your project and consider it for awards:

    • Upload a password and share a workable link. The favorite service for uploading videos that are password protected is Vimeo.
    • Design a clean logo for the title of the project paired with a still photo from the film that captures the essence of the project.
    • Write a concise, clear description of the project that is one to two sentences in length. This hook will be used on other publications referring to your project.
    • Create a memorable, eye-catching, thought-provoking tagline to make your film stand out.
    • Write a director’s bio that is short and sweet. This can include what you want to be known as professionally. It should list your professional title and accomplishments that support that role.
    • Write the story of your film: Why did you want to make the film? Why did you feel a need to share this story? What was the process of making this film? Make sure to include both mistakes and triumphs.

    2.) Determine Where to Show Your Film: Head back to your creative brief to remind yourself who the film is intended for, and this will help you select your audience and proper film festival for the film.

    3.) Consider Skipping the Film Festival Route: Blazer suggests that film festivals are not for everyone. Other alternatives include directly releasing the project on platforms like Vimeo. Releasing it online could help get quicker feedback and inspire ideas for your next animation adventure.

    4.) Create Your Network: Having a positive brand on the Internet is essential for filmmakers. Join online communities for designers, filmmakers, and artists. Talk to them. Share your work with them. Be inspired by them. This can form real relationships and help build connections for the future. It is also important to be supportive of other people’s work. Be present and engaged. Be a good audience. Make your brand known, but don’t overdo it. It is important to be selective. Mix up self-promotion and other types of posts. Tease your work, but don’t give away the whole story in the post. This will entice your audience to view your project. Finally, it’s essential to network in person. Establishing these connections are vital for success in the animation/filmmaking industry.

    5.) Share and Repeat: Be as professional as possible when sharing your work. Once you share one project, start with the next. Continue to sketch, storyboard, write, and animate new projects. The sky is the limit!

    As I reflect on this class, I am so happy with what I learned throughout these seven weeks. Coming into this class, I had no prior knowledge or experience with animation. From reading Liz Blazer’s book, I now know the essential steps in creating animation projects, from research and storyboarding to production to editing and packaging the video. It’s amazing what you can learn over seven weeks.

    I learned how to animate in Adobe Photoshop, Animate, and After Effects. I also learned how to design a project in Illustrator and import that project into After Effects. I discovered how to create keyframes in After Effects, create my own animations manipulating the Opacity, Position, Anchor Point, and Scale of an object, and how to import music and sound effects into After Effects.

    I also learned how important it is to plan out the project – the script, the music, the visuals, etc. If you are diligent in the pre-production phase, it makes the production and post-production phases much easier. It’s very interesting how each element of a story – the words, the art, the music – can all work together to create a beautiful piece.

    I am grateful for the knowledge I have gained, and I hope to continue to experiment with these programs in the future. I want to use After Effects when creating promotional videos at my current job to hopefully elevate the quality and creativity of these creations. I hope that animation will be a part of each step of my career.

    Research to Inform

    1.) Chroma Keying

    This is an example of Chroma Keying as the green screen is replaced with an image in the background. I thought this was a good example because the picture chosen for the background is relevant to the movement of the subject. It reminds me of someone dancing on Broadway in New York City.

    2.) Ken Burns Effect

    This YouTube video showcases the Ken Burns effect by adding movement to still photographs of Glacier National Park. I love this effect as it adds realism to the photos. It makes me feel like I am there walking on the trails and hiking the mountains. Adding this movement to still pictures creates a very interesting effect as I feel I am transported to the setting of the photo.

    3.) Motion Tracking

    Motion Tracking refers to digitally recording and following the movement of an object. In this example, the human’s movements on the left are being tracked by technology to create the animated figure on the right. I thought this was a very accurate example of how motion tracking would look. The movement is very realistic and matches well with the actual movement of the person.

    Create

    My Running Journey

    For my final project, I decided to create a video similar to the “Self-Introduction” video format because I really enjoyed creating that project! My goal was to illustrate my running journey from when I started running to the present. In this project, my goal was to incorporate multiple animation techniques that we learned throughout the class, including:

    1.) An Advanced Animation Technique: I chose to try out the “3D in After Effects” technique and manipulate a 2D photo. I chose a photo of my dad and I when I first started running. It was a little tricky to do this technique with that photo because his head is somewhat cut off in the photo, and rotating it too much would have revealed that, but I am happy with how it turned out! I definitely want to experiment more with this technique.

    2.) Creating shapes/lines with the line tool in After Effects. I utilized this strategy to create the “hill” animation when I talked about the hilly cross country course. I also used this when illustrating the length of a 100 meter race on a track. It was fun to experiment with trimming paths to create these animations.

    3.) Classic animations in After Effects, using keyframes to change Opacity, Scale, Rotation, and Position. I feel a lot more comfortable now creating keyframes and working with these animation options.

    4.) Using sound effects and background music. I added a typewriter sound effect at the beginning of the video when I chose the typewriter text animation. I also added a heart beat to the heart animation to further showcase that my love for running was expanding in high school.

    5.) Using the “squash and stretch” animation principle on the location symbol. I wanted to utilize at least one of the animation principles throughout this project.

    I also wanted to create a consistent color palette throughout the video, so I chose a blue/green color, wrote down the HEX and RGB codes, and used those codes throughout the project. I hoped to create a consistent and coherent video that used the same colors and fonts from start to finish.

    I have thoroughly enjoyed this class. Coming in with no animation experience, I am so grateful for all of the techniques I learned. I’m excited to continue to experiment in these programs and explore more advanced animation techniques in the future.

  • MODULE 1: BASIC MOTION

    Readings and Writings

    In the Introduction and Chapter 1 sections of Animated Storytelling, Liz Blazer discusses the importance of pre-production for any creative project. She begins her book with making a distinction between animation and motion graphics. Animation, on the one hand, derives from the movie-making industry while motion graphics has been part of the graphic design discipline. She provides tips on how to become an expert storyteller and defy gravity through animation.

    Described as the doorway to creating a successful animation, Blazer breaks down the pre-production process into three steps: Concept Development, Previsualization, and Asset Building. During the Concept Development phase, animators should start with creating a creative brief and answer the following questions: What must it be? Who is it for? How long must it be? What is the objective? What is the deadline? The next step is to identify the Big Idea and follow the Yes…and rule, welcoming any idea that comes to mind. Then, it’s time to zero in and create an elevator pitch, capturing the tone, plot, and theme within a sentence or two. Blazer suggests a few more helpful exercises in boiling down the main idea of a project, including creating a six-word story and tagline.

    Previsualization is the next step where an animator develops concept art, solidifies design direction, and establishes animation methods. During this phase, it is helpful to find inspiration online and experiment with different mediums in the physical world. This step is all about experimenting with design directions and making changes to the story based on this experimentation.

    The final stage, Asset Building, is where an animator identifies all needed assets, including logos, character designs, props, fonts, scripts, and more – essentially any piece that is needed to create the final project. Then, Blazer suggests to create a style frame, a single image that encapsulates the overall look of the project. Once these steps are completed, it is time to move onto the production phase.

    Research to Inform

    1.) Running GIF

    The first GIF I chose is a running GIF, and I selected this one because running is a big part of who I am. I also thought it would be interesting to see what a drawn running GIF would look like since we are tasked to draw our own GIF this week. I feel that animating a runner would be tricky because both legs and both arms are moving at all times. I personally like that the outline of the runner is not “perfect” and has some interesting lines that add texture to the GIF.

    2.) Text GIF by Matthew Butler

    I have always been fascinated with text animations, especially in movies. With having no prior experience in creating animations, I am intrigued by the different movements of each letter. I like the geometric feel of this GIF and how the movement is either completely horizontal or vertical. The two lines between each word are a nice touch too, furthering the idea of “Line Dash.”

    3.) Banana Cheerleader GIF

    As I was researching GIFs, this one stood out to me for a variety of reasons: I was not expecting to see a cheerleading banana, and the bright yellow color made it pop. I also like how the banana looks side-to-side in addition to moving its arms. This is a creative, eye-catching GIF.

    4.) Penguin at the Olympics

    This GIF also stood out to me because of my love for the Olympics. I like this GIF because there are two different parts of the animation: (1) waving and (2) pointing at the medal. I think that was a creative combination of movements. This also caught my eye because part of the image is static (podium and Olympic rings) while the penguin is in motion, which I think adds a nice contrast to the GIF.

    5.) Lion and Young Girl

    I wanted to find a GIF where there were two subjects interacting with one another. First, the line art is incredible. I also like how the animator had the girl move first, and then the lion, and then the girl again. Not only are the two subjects animated, but the lines that create those subjects are in constant movement. This animation strategy gives the GIF a greater sense of excitement and energy.

    6.) Globe GIF

    I chose this GIF specifically because I like the series of animations throughout the GIF – the globe spinning, to the zooming in, and then the construction of the building. When the building appears, I like how the foundation appears first, then the walls, and then the roof. It’s almost like the building is being built before us. I thought this was a very interesting way to capture that idea.

    7.) Happy New Year GIF

    In contrast to the “Line Dash” text GIF above, I wanted to find another text GIF where the text was dormant and there was another element of the image that was animated. I thought it would be interesting to compare the look of each text GIF. I think the confetti animation completes the purpose of this GIF, but if I had to choose, I think I like the other one more because of the greater visual appeal. I do however like that the text is the background for this GIF and the confetti is the only element that is moving.

    Create

    1.) Photoshop Cut-Out: Olympic Rings

    For my first GIF creation, I used an image from VectorStock.com. I created different layers for each Olympic ring and used the video timeline method to create this animation. Creating layers with the Olympic rings was a little tricky. I used the Magic Wand tool to select each ring, but because the rings overlap with one another, I had to create two separate layers for each ring and then merge them together. I then used the Loop Playback feature to create a loop. If I were to continue this animation, I think I would add an animation to “PARIS 2024.”

    2.) Onion-Skinning: Beach Scene and Back Flip

    This was my first time ever using Adobe Animate, and as I watched inspiration GIFs for this project, I saw one of a bird which reminded me of the beach. I was also watching a gymnastics meet earlier in the day, so I decided to combine both ideas and create a beach scene with a bird flapping its wings and a person doing a back flip on the sand. Onion skinning and drawing with a mouse were both challenging, but practice makes perfect! Using the onion skinning button in Adobe Animate was very helpful, especially with the person doing the flip, to ensure that they followed a circular path. I’m excited to continue to use this program and improve my onion skinning animation skills.

    3.) “You Are My Sunshine” GIF

    For my third GIF, I decided to go back into Photoshop and experiment more with the timeline feature. For this GIF, I created different frames for the sun and drew different-length rays in each frame to create the sun animation. I also retrieved an orange and yellow background image from vecteezy.com and created frames for this too. For the background, I slightly adjusted the Hue/Saturation levels in each frame to create the changing background colors. I wanted to add some text and chose the “Cardives” script font. In the future, if I were to continue editing this GIF, I might add some animation to the text to increase its size or change the opacity/transparency in each frame.