BLOCKTRADES | An Animated Gif

In this post I shall walk you through how I turned the @blocktrades logo into this animated gif.

I use @blocktrades most weeks and I'm always really impressed by its simplicity. I find it's one of those creations that just works. So to celebrate @blocktrades, and to say thank you to the development team, I decided to make an animated gif from their logo.

• I first needed a decent size image of the @blocktrades logo. I was unable to find one online that was a suitable size to use in the animation so I ended up recreating it in Adobe Illustrator.

• I next found a selection of different currency symbols to make up each of the 6 faces of the cube.
  

• I then colored each one of the symbols using the @Blocktrades logo color palette and resized them all to 400 x 400px in Adobe Photoshop.
  

• Once I had prepared all the assets for animating I imported them into Adobe After Effects where I built the cube in the 3D environment. To make the cube spin I first linked the layers to a separate null object and then key-framed each of the x, y, z coordinates independently.
  
  

below is the finished gif in 3 different sizes.

600 pixel wide

300 pixel wide

150 pixel wide

Thanks @blocktrades team for the great service you provide.

---