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

Civitai
8 Apr 202484:21

TLDRIn this engaging video, Tyler, a skilled video animator and host, shares his process of creating an animated badge cosmetic using AnimateDiff, a tool that harnesses AI to generate animations. He collaborates with Feya, a talented graphic designer from the civi tha community, to design a dynamic badge featuring a hammer and fire. The video showcases Tyler's workflow, from the initial design in Photoshop to the final animation in After Effects. He also discusses the integration of AI in the creative process, the potential for personalized website cosmetics, and the upcoming guest streams featuring Mid Journeyman and Super Beast AI, who will demonstrate an image upscaler workflow. Tyler's enthusiasm for exploring new AI applications in animation is evident, and he invites viewers to join the live content and learn alongside the community.

Takeaways

  • 🎉 Tyler and his team have upgraded their Twitch content and are offering more official streams, focusing on providing value in various areas of AI.
  • 📅 The community can look forward to 'Civi Tai Thursdays', where Tyler discusses AI video and animation, and shares updates on their projects.
  • 🤝 Feya, a valued member of the community and colleague, collaborates with Tyler in designing badges for the website, showcasing her talent in graphic design.
  • 🚀 Feya uses Stable Diffusion for initial design and Photoshop for advanced editing, while Tyler animates the badges using After Effects for the website's elevated membership tiers.
  • 🔥 Tyler demonstrates the process of animating a badge, specifically the 'Forge Badge', by adding motion to the hammer and incorporating fire footage.
  • 💻 The video includes a tutorial on how to use various tools such as Photoshop, AnimateDiff, and After Effects to create and refine the animated badges.
  • 📹 Tyler emphasizes the importance of rendering clean alpha masks for the animations to ensure they composite well with a black background.
  • 🌟 The stream features a guest appearance by Sir Spence, a technical researcher artist from RunwayML, who shares insights on achieving perfect renders.
  • 🎨 The process involves experimenting with different images and animations to find the best look for the badges, including a humorous detour involving a 'Pony Hammer'.
  • 🔍 Attention is given to the fine details, such as the softness of the mask edges and the importance of the fire's shape and motion in the final animation.
  • ⏰ Tyler reminds viewers to save their work frequently, highlighting the importance of this practice during the creation process in any software.

Q & A

  • What is the main topic of discussion in the video?

    -The main topic of discussion is the process of creating an animated badge cosmetic using AnimateDiff and Photoshop, as part of an upgrade to the Twitch stream and website content.

  • Who is involved in designing the badges for the website?

    -Feya, a member of the civi tha.com community team, is involved in designing the badges for the website.

  • What software is Tyler using to create motion in the badge?

    -Tyler is using Adobe After Effects to create motion in the badge.

  • What is the purpose of using AnimateDiff in the process?

    -AnimateDiff is used to automate the animation process of the fire and hammer elements in the badge, which would be time-consuming if done manually.

  • Why is Tyler experimenting with different images of fire and hammers?

    -Tyler is experimenting with different images to find the best visual representation for the animated badge, ensuring that the final product looks cohesive and appealing.

  • What is the significance of the 'Pony Hammer' mentioned in the transcript?

    -The 'Pony Hammer' is a humorous suggestion made by a community member for the type of hammer image to use in the badge. It reflects the light-hearted and collaborative nature of the discussion.

  • How does the community interact with Tyler during the stream?

    -The community interacts by providing feedback, suggestions, and images for Tyler to use in the badge creation process, as well as discussing the workflow and outcomes.

  • What is the role of the alpha mask in the animation process?

    -The alpha mask is used to define the areas of the image that will be animated, ensuring that only the desired parts of the badge, such as the fire and hammer, are affected by the AnimateDiff process.

  • Why is the black background important for the final render?

    -A black background is important for the final render because it allows for easier compositing of the animated elements into the badge without a distracting background.

  • What is the workflow that Tyler is referring to for video to video generation?

    -The workflow Tyler is referring to is his LCM double masked AnimateDiff process, which is available on his civi Tai account and is used for generating videos with AI animations.

  • What is the future plan for the community regarding the animation competition?

    -The future plan is to make animating with Comfy UI more accessible to a broader spectrum of users, ensuring that the upcoming animation competition does not exclude anyone due to hardware limitations.

Outlines

00:00

📢 Introduction and Twitch Update

The speaker, Tyler, greets the audience and discusses updates to their Twitch setup. They mention an upgrade in their streaming equipment and express excitement about the direction of their Twitch channel. Tyler also introduces a new community member, Feya, who is a graphic designer and has been working on creating badges for their website using stable diffusion and Photoshop.

05:29

🎨 Designing and Animating Badges

Tyler and Feya collaborate on designing and animating badges for their website. Feya uses stable diffusion and Photoshop for the initial design, while Tyler animates them using After Effects. They discuss offering upgraded cosmetics for members and contest prizes, and the process of bringing these designs to life with motion and effects.

10:58

🔥 Integrating Fire and Hammer Animation

The paragraph details the process of animating a fire and hammer badge. Tyler discusses using footage of fire as a placeholder and plans to integrate it with the hammer design. They contemplate whether to animate the fire and hammer separately or together for a cohesive look and decide to try both methods.

16:00

🖼️ Photoshop and After Effects Workflow

Tyler explains his workflow involving Photoshop and After Effects. He talks about creating alpha masks for the hammer and fire in Photoshop and ensuring the animations loop perfectly. The goal is to refine the workflow to create better badges for their website viewers.

21:01

🤝 Collaboration and Upcoming Guest

Tyler shares his experience collaborating with Sir Spence from RunwayML, who will join the stream in the following week. They discuss perfecting the render process and using different tools and techniques to enhance their animations and badges.

26:06

🔍 Refining the Animation Process

The speaker discusses refining the animation process by changing the badge background to black for better reference in the IP adapter. They mention using a double masking LCM animate diff workflow and the importance of updating nodes for the latest software versions.

31:08

🎭 Adding Depth with Animation

Tyler talks about avoiding an ugly gray background in their animations by ensuring the background is black for easier compositing in After Effects. They mention the use of control nets and the importance of testing and controlling the final output of their animations.

36:13

🔄 Iterative Experimentation

The paragraph covers the iterative process of experimenting with different images and animations. They request images of a hammer and fire from the audience for the badge design and discuss the importance of finding the right visuals to tie the animation together.

41:15

🎨 Finalizing the Badge Design

Tyler expresses excitement about the potential of using AI to animate badges and discusses the manual work involved in refining the designs. They mention the combination of Photoshop, After Effects, and AI tools to create the final product.

46:16

📚 Upcoming Events and Conclusion

The speaker wraps up the session by discussing an upcoming guest creator stream with Mid Journeyman and Super Beast AI, who will showcase an image upscaler workflow. They also mention working on making an animation competition more accessible and express gratitude to the audience for their participation.

51:18

📝 Sign Off

The final paragraph is a sign off with a series of 'e' characters, indicating the end of the script or video.

Mindmap

Keywords

💡Animated Badge

An animated badge is a digital emblem or icon that has been enhanced with motion graphics to create the illusion of movement or animation. In the video, the creator discusses the process of designing and animating badges for a website, which are not only visually appealing but also serve as a form of membership identification and reward. The animated badge is a key element in providing value and enhancing the user experience on the platform.

💡Stable Diffusion

Stable Diffusion is a term that refers to a type of generative model used in AI, specifically designed for creating images from textual descriptions. In the context of the video, the graphic designer uses Stable Diffusion to design the initial badge, showcasing how AI can be utilized in the creative process to generate unique and complex visuals.

💡Photoshop

Photoshop is a widely-used image editing software by Adobe that allows for the manipulation and creation of raster graphics. The video mentions using Photoshop for tasks such as breaking down designs into layers and performing advanced image editing that are beyond the scope of the video's host, emphasizing the multidisciplinary nature of the project.

💡After Effects

After Effects is a digital visual effects, motion graphics, and compositing application developed by Adobe used for video post-production. In the video, the host uses After Effects to hand-animate elements of the badge, highlighting the software's role in creating motion graphics and enhancing the final appearance of the animated badge.

💡AnimateDiff

AnimateDiff is a term used in the video to describe a process or tool that is used to animate elements within the AI-generated content. The host discusses running the fire and hammer elements of the badge through AnimateDiff to create motion, demonstrating an innovative approach to leveraging AI for animation.

💡Discord

Discord is a communication platform that the video's host mentions as a place where the community team, including Feya, interacts with users. It serves as a social hub for the community where discussions, collaborations, and support take place, and it plays a role in the collaborative process of badge creation and animation.

💡Civettai.com Community

The Civettai.com Community refers to the group of individuals who engage with the content and activities on the website Civettai.com. The community is highlighted as a source of interaction and collaboration, with team members like Feya playing a significant role in the badge design process.

💡Contest Prizes

Contest prizes are rewards given to participants who win competitions or contests. In the video, the host talks about using animated badges as potential prizes for contests, indicating the value and desirability of these animated cosmetics within the community.

💡Elevated Membership Tiers

Elevated membership tiers refer to higher levels of subscription or membership that offer additional benefits or features. The video discusses offering upgraded cosmetics for members in these tiers, suggesting a tiered system of rewards that adds an element of exclusivity and incentive for user engagement.

💡Workflow

A workflow in the context of the video refers to the sequence of steps or processes involved in creating the animated badge. The host shares their workflow with the audience, which includes using various tools and software like Photoshop, AnimateDiff, and After Effects to design, animate, and finalize the badge.

💡IP Adapter

An IP adapter, in the context of the video, refers to a specific node or component within the animation software that is used to control and refine the animation process. The host discusses using an IP adapter to achieve a desired motion effect in the animation, showcasing the technical aspects of the workflow.

Highlights

Tyler discusses the upgraded Twitch setup and plans for more live content focused on AI.

Introducing Feya, a talented community team member and graphic designer.

Exploring the creation of animated badges for website cosmetics using AnimateDiff.

The process of designing badges with Stable Diffusion and Photoshop.

Animating badges for elevated membership tiers and contest prizes.

The challenges of hand animating elements like fire in After Effects.

Experimenting with AnimateDiff for the fire and hammer animation.

The importance of refining workflows for better badge creation.

Deciding whether to animate the fire and hammer separately or as one cohesive piece.

The use of control nets and the impact of weight types on the final output.

Testing different hammer and fire images for the badge animation.

The creative process of combining AI with manual work for badge design.

The potential for using AI in creating premium cosmetics for the website.

The community's involvement in sending images and participating in the creation process.

The final result of the animated badge and its potential for the website.