Rolling Dices Animation 🎲🎲

Have you ever used a dating app that features only fun 3D avatars. Did you notice those small, cute dices that are rolling when you refresh your matches?

Well, I haven't either, because it never existed—until now! 😚

When I saw those stunning animations they created for iOS 17, I felt inspired to try something experimental yet fun.

Despite my current profession in UI design, I have a background in 3D visualization. Therefore, I decided to include a 3D element.

Several years ago, when I was creating concept designs to get my first job, I remembered that I had used a dice animation in one of those designs.

So, I decided to use a dice once again in a 3D avatar based dating app.

After I finished modeling, it was time to color it up.

Since the latest version of Photoshop has discontinued 3D mode, I needed to find an alternative method to create texture maps. I exported the UV layout and used it as a reference to draw the rest.

As you can see, I also made a normal map to create small inner bumps on the dice.

It might not be a big deal, but it's good to pay attention to details.

Texturing steps of dice

Animating in a three-dimensional space has always been challenging. After recalling my forgotten knowledge of 3D animation, I created a rolling dice animation.

I brought all the UI elements and 3D renders together in After Effects and made color adjustments.

It was great to use After Effects, even though I had never delved deep into it before. Now, I'm eager to learn more about this amazing software.

I want to appreciate Vova Kras to provide all those amazing 3D avatars for free that is used in this project.

Thank you for reading!

View all tags
Posted on Sep 26, 2023

More by Ersin Kıymaz

View profile