Turn a Static Character into an Animated UI in Unity

Learn how to turn a static character into a dynamic, animated UI using Photoshop and Unity. This tutorial is perfect for those looking to bring their designs to life with engaging animations. My discord link ► https://discord.gg/DgUdNDT7KU ► Download Unity at https://unity.com Chapters: 00:00 Intr

AI image tools produce great characters in hopelessly static poses. This tutorial takes an AI-generated space pilot from flat artwork to a living, breathing, blinking UI character in Unity — by cutting it into parts, slicing it as a sprite sheet, and keyframing subtle motion by hand.

Cut the character into animatable parts

In your image editor, separate the character into pieces: head, eyes, upper body, lower body, upper and lower arms. The key technique is overlap at every joint — the shoulder selection should include part of the arm, and the arm part of the shoulder, so nothing shows a gap when pieces rotate. Expect cleanup work, like repainting hands that ended up attached to the body sprites. Arrange the parts into a sprite sheet and save as a PNG.

Slice the sheet and set pivots

Drag the PNG into Unity's Sprites folder, then change its texture type from default to Sprite (2D and UI) and sprite mode from single to multiple — if a popup blocks this, install the 2D packages from the Package Manager first. Apply, open the Sprite Editor, and run automatic slicing: Unity finds each cluster of pixels and boxes it as its own sprite, needing only minor corrections. Then move each sprite's pivot to where its joint belongs — the head's pivot goes at the neck, not the center of the face, because that's the point it will rotate around. Apply when done.

Assemble and parent the rig

Build the character out of UI Image objects (this one lives in a UI), then create the hierarchy that acts as a rig: arms parented under the upper body, head under the upper body, eyes under the head. Parenting is the whole rig — rotate the upper body and everything attached rotates with it.

Animate breathing and blinking

Select the pilot root and create an animation called base pilot. Drop the sample rate from 60 to 12 frames per second (enable show sample rate from the three-dot menu if the field is hidden). Hit record: at one second, rotate the upper body back slightly — a keyframe appears automatically — then copy the first keyframe and paste it at two seconds so the loop closes cleanly. Too fast? Select all keyframes and drag to stretch them across more time. Offset the head's keyframes slightly from the body's so the head lags the torso, which reads as natural. For blinking, toggle the eyes object off for a single frame, then copy-paste that pair of keyframes at random spots down the timeline. Ideally blinks would be driven programmatically for true randomness, but baked-in works. The result: AI art, cut up in Photoshop, breathing and blinking inside Unity.