April 24th 2023 commences the start of World Fashion Revolution Week. Born out of a disaster in 2013 when 1,100 people died and another 2,500 people were injured in the fourth largest industrial disaster in history, the Rana Plaza building in Bangladesh collapsed.
Nobody should die for fashion. It is sickening that such steps in society are still needed. This campaign looks to make the industry listen, draw light to unacceptable conditions, and make consumers stand up and act right. Brands are becoming more open while shoppers are becoming more ethically selective.
However, this story is far from over. Conditions in the fashion industry are still a long way off acceptable, and the volume of wasted and misused clothing continues to grow. Meaning that campaigning for a fair, safe, clean, and transparent fashion industry is continuous. See how you can make a difference and Join the revolution here.
We created this animation to help shed light on this issue.
How we created our Ethical Fashion Animation
Vector-based design and animation software like Adobe Illustrator and After Effects is perfect for creating animations for our clients. Generally file sizes are smaller, it can be much faster than traditional methods and it’s easier to make changes. It’s an extremely versatile way of working.
Those unfamiliar with the many features of After Effects might imagine they have to divorce themselves from traditional styles like a paper cut-out and that they are limited to working with a very digital-looking style. But that’s not the case. When creating our animation for Fashion Revolution Week I wanted to create a texture-filled, cut-out style of animation to complement the imagery of fabric and clothing. The animation was created in between projects, at home, and in the office so since I couldn’t make a portable setup After Effects was the way to go. Here’s how I replicated this style within After Effects.
Cut-out animation works by creating a scene out of cut-out pieces of flat material such as paper, card, or fabric and then taking a photograph each time something is repositioned in order to create the illusion of movement. It’s basically the 2D version of stop-motion animation. When recreating this style in After Effects the things to keep in mind were the frame rate, texture, and shadows.
When working in After Effects there is a tendency to make animations look slick and smooth, but when replicating a cut-out style I wanted to introduce some imperfections that might occur when using traditional methods. Keep in mind that a lot of traditional animation is done in twos which means it holds a frame for two frames rather than one. If a clip is 24 frames per second (FPS) when it is played on one it means it will play 24 frames if it is done on two it will play only 12. This is usually done to save time. To replicate this in After Effects you can either change the frame rate of the composition or use a posterize time effect on an adjustment layer. Since we work at 25FPS, I set the Posterize Time to 12.5.
Cut-out animation scenes are usually filmed from the top down with a light above which causes slight shadows under each layer. When setting up a scene we needed to consider what needs to be separated into different layers in order for the shadows to be correct. When everything was layered correctly, I used multiple Drop Shadow effects to create a combination of short stronger shadows and long weaker shadows on each layer to give the illusion that we were looking at multiple layers of material in a 3D space.
The texture will really sell the idea that you’re working with real materials and a lack of texture can make the final product look more flat and digital. The textures I used were high-resolution, greyscale images of a paper texture from the PQ Grit Kit. I used the Screen blending mode for most parts and Multiply with some transparency for lighter colours. Then to hide the texture outside of the animated layer I clicked Preserve Underlying Transparency and put it in a Pre-Comp. This worked for the most part but it varied from scene to scene. Alternatively, you can use the animated shape layer as a Matte and parent the texture to it. For the background, however, I combined the layers into one Pre-Comp with a texture over the whole thing to save time as they didn’t have moving parts.
The texture will determine the shape of the layer. Paper can be cut to have sharp edges but might not be cut fully straight, and fabric may have a fluffy edge. I used the effect of Turbulent Displace to give the edge of each animated layer an imperfect look that mimics the texture of a soft papery material.
