PieSamurai Animated Discord Icon

About

This is a fun little animation with the sole intention of having an animated Discord icon that talks. More about that is explained below under Initial Plan, but basically this became an opportunity for me to get into animation, which I think is a significant part of interface design.

The Process

The Initial Plan

The idea was born when I won a free Discord Nitro for the first time, which allowed me to have an animated profile picture. I've always had the static PieSamurai profile picture, sometimes with different things on his head on special seasons.

Halloween Christmas

I have yet to find the time to put a cake on his head for my birthday.

But back to Discord, having an animated profile picture gives me another perk. In voice chats, Discord will play the animated profile picture of someone who has it, only when there's sound coming through, so if I set my animated profile picture as a talking PieSamurai, I'll be able to appear as if PieSamurai is doing the talking in the voice chats.

// what it looks like on Discord voice chat:

VC Talking

The Approach

I quickly went back to ibisPaint X and added a visible arm to the current icon along with many, many individual expressions for each moving part (eyes, eyebrews, mouth, separated head and body).

Arm Parts

Then I went over to Kapwing — yet another free online tool — to bring PieSamurai to life.

The End Result

PieSamurai talks now!

Result

The Reflection

What I Learned

Animating, too, takes A LOT. I struggled with getting not only the positioning of the different moving parts right, but also their timing and duration on top of that. Seeing a character I created come to life was really rewarding, though; and I learned that I enjoy animating too, and I see it as a potential aspect to focus on in designing interfaces — motion designing.

My Next Steps

Because, again, this is my first and only time animating anything, the result turned out choppier than what I would like. The next thing I would do in animation is to learn to use key frames to smoothen movements, instead of drawing and positioning every frame by hand. I notice that this is a tendency of mine to go up and beyond in effort to still achieve what I had imagined, without knowing a more efficient way to do so.