Animation Refresh Notes

Completed Icons:

• Chat
•  

• Instapoll
• Survey

 

In-progress Icons:

• Quiz
• TA (rebranding)

 

Currently, we are working towards completing the last two animations in the animation refresh project.

For the Quiz icon, we are focusing on the timing and sequencing of the different frames in the animation. Once that is complete, this animation should be completed too.

The TA icon is undergoing a complete rebrand. The icon looks too similar to the chat icon and we want to distinct between them. Therefore, Rachel will be working on a new design for this icon.

New Caricature Design

Also, here is the link to my portfolio if anyone wants to see the work I work on outside of work 🙂

https://mcclellandesha.wixsite.com/livelaughloveshay

Stinger – Animation Refresh Title

I began working on different draft options for the title on the Stinger Refresh project. Since the icons will have the most animation, we want the title to have a small, subtle animation added to it. I decided the choose between two options so far, a typing animation and a fade in animation.

 

I believe they both bring their own style to the animation, but I don’t want to take away from the main animation with too much movement. With that being said, I believe I am drawn more to the second option. Only because it is simpler and doesn’t take away from the main animation and with the other animations that will be created.

 

 

Stinger – Animation Refresh Survey

Last week I mainly focused on the survey animation for the Stinger Refresh project. For this animation, I wanted to create something that mimicked the movement of bars if the students were actually taking a survey.

For the first draft, I did a lot more motion in the bars and the animation was slightly longer.

 

With some editing tips, I drafted a second animation that is shorter in length. I also made the
bars move more consistently.

Stinger – Animation Refresh Planning

 

project: Stinger – Animation Refresh
Client /Prof: N/A
completion status: Started August 25 2021
staff guidance: Maddy
STA team members: Rachel and Megan
description/plans: Refresh the stingers for the course graphics to add light animation.
To be completed: N/A

 

For this project, I started working on planning out the steps to make the overall creation of the stingers simple for future STAs.

 

Notes:

Current Stingers: 

• Chat
• instapoll
• Quiz
• Survey
• TA

Questions to Consider:

• Easily customizable After Effects File
  • Color
  • Background Images
  • Fonts? Segment title
• Standard animations for each segment??
• Standard animation for title??
• How long do the animations need to be? (2 seconds + additional second for static image) 

*** Standard AE composition with the layout of each element (Title, background, animation). ***

• Duplicate “standard” composition
• Edit the Title and Background Image
• Insert/open the different icon animation compositions into “standard composition”

After Effects File Requirements:

• Placement of Title with small animation
• Placement for icon with animation
• Background image placement (static)

Title Animation Ideas:

*** Left side of the graphic (simple) ***

• Typing 
• Fade in
• Slide in from left or bottom

 

Stinger Animation Ideas:

*** Right side of the graphic (Fade in first) ***

Chat:

• Multiple Chat bubbles appear?
• iMessage chat

Instapoll:

• Revolving circle around install with moving bars?

Quiz:

• Blinking/transitioning between filled question mark and open. Switch to check mark after?

Survey:

• Toggle back and forward

TA:

• Interchanging the chat bubbles

 

Files:

I already began creating the AI files for the different stingers. Once we have decided on the animation for each icon, we can began making the different frames in AI or creating the different piece to animate in AfterEffects.

 

I also began creating the After Effects Template for the animation composition. There is a “main composition” that will hold the final completed animation that will be sent off. Within the main composition, there is the Title, that can be changed, the background composition, and the animated stinger composition. There will also be a composition that the STA can use to change the background image.

 

Green Screen Training

For the green screen training, I decided to use this image:

I was able to successfully remove the green screen background and color adjust the image.

I decided to add in a forest background to the image. Since the background image was lighter, I edited the photo to make the image fit better with the background.