Vickz

Today, my friend ask for a simple .gif animation. Purposely to show ” Loading in progress “. I’m sure that many of you knew, Adobe Photoshop now already have it’s own ” Animation ” panel which located in ” Windows “, Windows > Animation. The animation panel let user to create animated .gif layer by layer. Look at the sample above, which i use 26 frames to create the .gif animation.

Before you start to animate, you have to draw out the symbol first. Let me share with you how i draw by using Adobe Illustrator.

Illustrator part

Step-01-Create a ” doughnut ” shape
By subtracting with two round shape, big and small in the middle.

Step-02-Draw a Stroke
Draw a stroke with weight = 2pt ( This will become the space, it depends how width you want ).

Step-03-Align center the stroke with the shape
Please align center ( horizontal & vertical ) the stroke with the shape.

Step-04-Rotate and duplicate the stroke
Select the stroke, click on ” Rotate tool “, set angel = 10%, then press copy. Second stroke will be duplicated. Now, use your keyboard, press ctrl+C then ctrl+F then ctrl+D, you will see that, the stroke keep duplicated and rotate in angel = 10%. Continue hitting the “ctrl+C then ctrl+F then ctrl+D” keys, until it reach full circle.

Step-05-Outline Stroke
Now, select all the paths, go to Object -> Path -> Outline Stroke. All the paths will become objects ( no longer a path - you cannot adjust it’s weight already ). Pathfinder there, select “add to shape area”, which means “well”. Make sure now you only have two objects, one is the paths which already been converted and merge together already and the doughnut shape object.

Step-06-Trim it
Select both, pathfinder there, press on ” Subtract from shape area ” means trim. You will got the shape like image above. Right click on the object, select ” release compound path “, then select the released objects by following images above. Do select by skiping one and one. After that, delete.

Step-07-Copy to Photoshop, start animate
Congrats! You have succeed to create the shape. Now, copy the selected part one by one to Photoshop, let’s start to animate it. Look at the images above, copy by selecting two parts, which is opposite each.

Employee of the month! Of course, that person is not my company’s staff, he is from istockphoto.com. Non-stop i work when i was creating this design, it makes me fully concentrate and enjoy! Stylish design to capture the attention of the audience. Combining some illustrative elements to create something new and fresh.