Making an Animated Badge Cosmetic in AnimateDiff! // Tyler // 4.4.24

In this engaging video, Tyler, a video guy from the civi tha.com community, collaborates with Feya, a talented graphic designer, to create an animated badge for their website. They use a combination of Stable Diffusion for initial design, Photoshop for detailed work, and AnimateDiff for motion. The process involves experimenting with different tools and techniques, including a double masking LCM workflow in Comfy UI, to achieve a seamless animation. The video also features a discussion on refining the workflow and the potential for creating premium cosmetics for the website. Tyler emphasizes the importance of saving work regularly and invites viewers to join a future stream with special guest Spence, a technical researcher artist from RunwayML, who will demonstrate advanced AI techniques.

Takeaways

• 🎉 Tyler and his team have upgraded their Twitch content and are becoming more official, with plans to provide more value and live content in various areas of AI.
• 📅 Introduction of 'Civi Tai Thursdays', a weekly video and animation stream where Tyler discusses AI-related topics.
• 🤝 Collaboration with Feya, a talented graphic designer and community member, on creating animated badges for the website using stable diffusion and Photoshop.
• 🔥 The process involves animating the badges with motion and effects like glowing or sparkly animations using After Effects for the website's elevated membership tiers and contest prizes.
• 🛠️ Tyler demonstrates using AnimateDiff to animate parts of the badge, such as fire and a hammer, to create an animated cosmetic for the website.
• 💡 The importance of using tools like Photoshop and After Effects in conjunction with AI-based tools to refine the workflow and create better badges.
• 📸 Tyler shares a technique for rendering clean alpha masks using RunwayML, which was helpful for compositing animations.
• 🎨 Discussion on whether to animate the fire and hammer separately or together, and the decision to try both methods to see which works better.
• 🔍 The use of an alpha mask to ensure that only the pixels inside the mask are affected during the animation process.
• 🚀 Upcoming guest streams with Sir Spence from RunwayML and creators Mid Journeyman and Super Beast AI, focusing on image upscaling in Comfy UI.
• 🎁 Hints at future premium cosmetics for the website and the potential for an animation competition that is accessible to a wide audience.

Q & A

What is the main topic of the video?

The main topic of the video is about creating an animated badge cosmetic using AnimateDiff and the process of upgrading Twitch stream content.

Who is the community team member and graphic designer mentioned in the video?

The community team member and graphic designer mentioned in the video is Feya.

What software is used to create the initial design of the badges?

The initial design of the badges is created using Stable Diffusion and then refined in Photoshop.

What is the purpose of animating the badges?

The purpose of animating the badges is to provide upgraded cosmetics for members in elevated membership tiers and for contest prizes on the website.

How is the fire animation in the badge achieved?

The fire animation in the badge is achieved by using footage of fire and applying it through AnimateDiff to create a loopable animation.

What is the name of the badge being worked on in the video?

The name of the badge being worked on in the video is the Forge badge.

Why is the background of the animation important for compositing?

The background of the animation is important for compositing because a black background allows for easier compositing by using blending modes like screen, which helps to cut out the animation cleanly.

What is the role of the 'latent noise mask' in the AnimateDiff process?

The 'latent noise mask' applies the same mask used for conditioning over the latent noise map, ensuring that only the pixels inside the mask are affected and turned into an image, thus controlling where the animation occurs.

What is the significance of using an image of a hammer and fire in the AnimateDiff process?

Using an image of a hammer and fire in the AnimateDiff process helps to guide the AI to generate an animation that includes elements of both a hammer and fire, creating a more cohesive and relevant result.

Why is the 'soft edge' feature used in the AnimateDiff process?

The 'soft edge' feature is used to blur the edges of the alpha mask, creating a smoother transition and avoiding a jagged or harsh edge appearance in the final animation.

What is the future plan mentioned for the website regarding AI-generated content?

The future plan mentioned is to roll out more premium cosmetics for the website, combining AI-generated designs with manual work in Photoshop and After Effects to create unique and engaging content for the community.

Outlines

00:00

📜 Introduction and Twitch Stream Updates

The paragraph introduces the speaker, Tyler, and mentions an upgrade in their Twitch content. They express excitement about the direction of their Twitch stream and the new content they are planning. Tyler also introduces a community member, Feya, who is a graphic designer and collaborates with them on creating badges for their website using AI and Photoshop.

05:29

🚀 Collaborative Design Process

Tyler discusses the collaborative process between him and Feya in designing badges for their website. He explains how Feya uses AI and Photoshop to create the badges, and how they work together to add motion and effects. Tyler shares his lack of expertise in graphic design and his role in animating the badges using After Effects.

10:58

🎨 Integrating Animation and Design

The speaker delves into the technical aspects of integrating animation and design. They describe the process of taking the designed badges and animating them using After Effects and Photoshop. Tyler talks about the challenges of animating the fire element of the badge and the solutions they are considering.

16:00

🌟 Showcasing the Workflow

Tyler shares the workflow they are using for the badge animation, including the use of masks and the animation process. He talks about the importance of looping the animation and the technical details of the setup. The speaker also mentions the involvement of their community in the process and the feedback they are receiving.

21:01

🔧 Testing and Refining the Process

The paragraph focuses on the testing and refining of the badge animation process. Tyler discusses the use of different tools and techniques to achieve the desired results, including the use of AI for rendering and the importance of controlling the final output. He also talks about the upcoming stream with a technical researcher artist who helped him with the render setup.

26:06

🎥 Preparing for the Stream

Tyler talks about preparing for the stream by gathering necessary files and setting up the workflow. He discusses the use of Photoshop to change the badge background and the plan to use the badge as a reference image in the IP adapter. The speaker also mentions the availability of their workflow on their Civi account and the importance of updating the Comfort UI for the latest versions.

31:08

🌐 Community Interaction and Planning

In this section, Tyler interacts with the community, asking for their input on the animation process and discussing the potential for separate or combined animation of different elements. He also talks about the upcoming guest on the stream, Sir Spence from RunwayML, and the anticipation of learning new techniques from him.

36:13

🔄 Combining Elements and Testing

Tyler describes the process of combining the hammer and fire elements in the animation and testing different settings. He talks about the use of control nets and the influence of weight types on the final output. The speaker also shares his excitement about the potential for more control and testing in the animation process.

41:15

🎨 Finalizing the Animation

The speaker discusses the final steps in finalizing the animation, including the use of upscaling and the importance of the background color for compositing. Tyler shares his satisfaction with the loop and the reflections in the animation. He also talks about the community's reactions to the Pony Hammer and the humorous interactions during the stream.

46:16

🎉 Celebrating Achievements and Future Plans

Tyler celebrates the achievements of the stream, expressing excitement about the potential for AI-animated badges and the community's involvement. He talks about the manual work involved in the process and the collaboration with Feya. The speaker also shares future plans for the website, including premium cosmetics and the excitement for upcoming live content.

51:18

📸 Creating an Emote and Community Highlights

The speaker discusses turning the Pony Hammer animation into an emote for the community and the humorous reactions from the viewers. Tyler shares a comment from a viewer about the complexity of their work and the positive impact it has. He also talks about the upcoming stream with guest creators and the focus on image upscaling in Comfort UI.

56:18

🌟 Wrapping Up the Stream

Tyler wraps up the stream by discussing the need to save work frequently, the final steps in the animation process, and the community's suggestions for improvements. He talks about the upcoming plans for the Twitch channel and the excitement for future live content. The speaker thanks the viewers for their participation and support.

01:19

🚫 Stream Conclusion

The stream concludes with Tyler expressing his appreciation for the viewers and the community. He signs off with a positive note and ends the stream.

Keywords

Animated Badge

An animated badge is a digital emblem or icon that has been given motion through animation techniques. In the context of the video, the animated badge is a cosmetic feature being developed for a website to enhance the user experience and serve as an elevated membership tier cosmetic or contest prize. The process involves designing the badge in Photoshop, animating it using various software like After Effects and AnimateDiff, and refining it for web use.

Stable Diffusion

Stable Diffusion is a term that refers to a type of generative model used in AI, capable of creating images from textual descriptions. In the video, it is mentioned as the tool used by Feya to design the badges initially. The host expresses admiration for the ease with which she can use Stable Diffusion to turn ideas into visual badges.

Photoshop

Photoshop is a widely used software for image editing and graphic design, developed by Adobe. In the script, it is indicated that Feya uses Photoshop for advanced graphic design tasks that are beyond the host's expertise. The host mentions that Feya breaks down the badge designs into layers in Photoshop, which he then uses for animation.

After Effects

After Effects is a digital visual effects, motion graphics, and compositing application developed by Adobe used for video post-production. The host discusses using After Effects to hand-animate the badges, which is a key part of bringing motion to the cosmetic badges for the website.

AnimateDiff

AnimateDiff is a tool or process mentioned in the video used to animate parts of the badge design. The host plans to use AnimateDiff to animate the fire and hammer elements of the badge separately or together, aiming to create a cohesive and dynamic final product.

Cosmetics

In the context of the video, 'cosmetics' refers to visual enhancements or decorative features that can be added to a user's profile or experience on a website. The host discusses creating upgraded cosmetics for members as part of a membership tier system, using animated badges as an example.

Contest Prizes

Contest prizes are awards given to winners of competitions or contests. The script mentions that one of the purposes of creating animated badges is to use them as prizes for contests, adding value and excitement to the community engagement on the website.

IP Adapters

IP Adapters in the video refer to a component or feature within the AnimateDiff tool that is used to influence the animation process. The host discusses adjusting settings on the IP Adapters to control the motion and style of the animations, highlighting their importance in achieving desired effects.

Control Nets

Control Nets are a feature within the AnimateDiff tool that allows for more granular control over the animation process. The host mentions using Control Nets to ensure that the animation adheres to the design within the mask and to refine the final output.

Render

To render in the context of the video means to process the final stages of creating an image or animation to prepare it for viewing or use. The host talks about rendering the alpha mask and the final badge animation, which is a critical step in the post-production process.

Workflow

A workflow refers to the sequence of steps taken to complete a project or task. The host discusses their workflow for creating the animated badges, which includes using Photoshop, AnimateDiff, and After Effects, and the importance of refining this workflow for efficiency and better results.

Highlights

Tyler and his team have upgraded their Twitch streaming setup to provide more official and valuable live content in the field of AI.

Feya, a talented graphic designer and community member, collaborates with Tyler to create animated badges for the website using Stable Diffusion and Photoshop.

The process involves hand animating elements like fire and hammers in After Effects and then integrating them into badges for an elevated membership experience.

Tyler demonstrates using AnimateDiff to animate the fire and hammer elements of the badge, aiming to streamline the animation process.

The team discusses the possibility of separating the fire and hammer for animation to achieve a more cohesive result.

A new technique using an alpha mask to isolate the fire and hammer for animation is showcased, resulting in a cleaner final render.

Sir Spence, a technical researcher at RunwayML, is set to join a future stream to demonstrate advanced techniques with AnimateDiff.

Tyler emphasizes the importance of rendering with a black background for easier compositing in After Effects.

The stream explores the use of different control nets and weight types in AnimateDiff for more control over the final animation output.

Viewers are encouraged to send images of hammers and fire to be used in the animation process, fostering a collaborative environment.

The use of a 'Pony Hammer' image in the animation leads to humorous moments and community engagement in the stream.

Tyler successfully creates an animated badge using a Warhammer surrounded by fire, showcasing the potential of AI in graphic design.

The stream concludes with a discussion on future plans for the Twitch channel, including more live content and an upcoming animation competition.

A special guest stream is announced for the next day, featuring Mid Journeyman and Super Beast AI, who will present an image upscaler workflow in Comfy UI.

Tyler stresses the significance of customizing online profiles and the appeal of animated badges as a form of personal expression and portfolio enhancement.

The community is thanked for their participation, and Tyler signs off, looking forward to more interactive and informative streams in the future.