In this post I will be showing you how to create your own animation from a design. There are a few technical requirements you will need: 1) A logo/design idea already created 2) Some type of graphic design software.
The first step is to take your design and open it in your graphic design software of choice. This can be Adobe Illustrator or Apple's Graphic. For my graphic designs I like to use Apple's Graphic because it is much less expensive and allows for many of the same design capabilities that you can also utilize in Adobe Illustrator.
The next step in creating your own animation is to decide what kind of animation you have in mind. For mine I decided I wanted to create a loading screen image for this website. I brainstormed and decided to make the outline of the design slowly become backlit and transition up the design. I don't mean to get ahead of myself but here is the finished product so you can see what I mean.
The third step includes subtracting the main design or logo from the base layer. This allows you to run a second layer underneath the first giving the illusion of movement through the capturing of multiple snap shots of the canvas utilizing both layers. You can see the two layers with the bottom two arrows and the subtract tool with the top red arrow.
For step 4 you will need to take the bottom layer and add whatever kind of coloring you want to have as the transition. This can just be a shape set to any gradient. Then as you move the shape in the bottom layer you will need to export the canvas to a .gif file. This is because the .gif is just pieced together by a bunch of snap shots and played at a certain interval, thus showing "motion."
The last step is to then take all of your .gif files that you have exported and patch them all together. I have found gifQuickMaker for the Mac on the App Store to work well. You can also find gif makers online that you can just upload your files to and it will patch them together for you. Either way you need to take your exported .gif files, upload them, and then set the frame transition speed. I recommend .1 seconds per frame. In total you should have at least 10 frames and this will make your transitions smooth. Finally all you have to do is then export from your method of choice and you will have one single .gif file that you can set as a load screen or animation on a website.