Easy way to make GIF animation by using Photoshop
Photoshop is easiest to make GIF animation. We can can create GIF animation for web social site and other purpose by useing Adobe Photoshop.
At first we’ll open Photoshop new page from file [cmd/control+n]. In the layers panel we must be use smart object. If we double click this, this will bring us over to Illustrator. Inside of Illustrator, if we select these, we can see this is one symbol. And if I double click in one of the symbols and go into isolation mode, we can see the artwork for one of those individual symbol items. Later on in the course, we’ll be modifying this Illustrator file to change the art of the dial.
Now back over to Photoshop. Than we’ll oper Timeline window, from window> Timeline. Now we can GIF animation from two way. One is “Create Video Timeline” And another is “Create Frame Animation” . Now I apply “Create Frame Animation”. We can make changes to our animation later and not have to modify all frames. So the first thing we’re going to do to create our dial is come over to the tools bar. Let’s come down to the vector shapes, and let’s come in here and select the ellipse tool. On the canvas, I’m going to put the cursor right in the center of the dial. I’m going to start to click, I’m going to hold the shift key. Then I’m going to add in the option or alt key, to align in the center. And I want to create a vector circle that’s the size of the dial.
After create loader Symbol (shape), we’re going to start creating our animation. So let’s come under the window menu. In Photoshop CS6, you’re going to come down and open the timeline panel. In earlier versions of Photoshop, you’re going to find a panel named animation. So let’s open up timeline panel.Now, if you’re in an earlier version of Photoshop than CS6, you won’t see this button here that says create a video or create animation timeline. You’ll see an icon similar to the three squares here which will let you switch between the timeline or keyframe animation and the frame-based animation.
So inside of CC version, we’re going to click this drop-down menu here. Come down and choose create frame animation, and then click this button to create a frame-based animation timeline.I’ll move this down a little bit. So by default we have one frame. Let’s come down here to the timeline. Let’s come down and choose Create New Frame. This will create a duplicate of Frame One into Frame Two. And with Frame Two created, let’s come up and double-click the gradient overlay. What we’re going to do here is change the angle.
So I’m going to hold the Shift Key and the Down Arrow. As I change the angle you can see on the canvas, the art work changing place. So what we’re going to do is set this to an angle of about negative 40-degrees. Again, this will take the angle area and move it to about here, between these two posts on the dial. Giving us almost half of our animation. Let’s come up and click okay. Now down on the timeline panel I can click between frame one and frame two and you can see the animation panel actually keeps track of the settings of the gradient overlay.
Now what I want to do is create an animation between frame one and frame two. So let’s select frame one, let’s come down and click on this button here which is the tween button.Let’s click on the tween to make sure next frame is selected, so we’ll tween frame one into frame two. The number of frames, let’s just choose four. And notice down here in the parameters, this will create a tween between position, opacity and effects. Since the grading overlay is in effect, Photoshop will adjust the gradient overlay for each frame during this tween.
So let’s come over here and click okay. Now we can come over to the timeline. Let’s select frame two. We can see the angular grading has been moved just a little bit. Let’s click frame three, then four, five and six. And notice that the angle goes in between each one of the posts, because we picked the same number of frames as posts inside of our dial. Next let’s select Frame Six. Create a new layer. This will give us Frame Seven. Let’s double-click their gradient overlay inside of Frame Seven. Let’s hit the Down Arrow. Let’s bring this down to about minus 78 degrees.
Let’s click Okay. Let’s create another frame. Frame Eight. Let’s doubleclick this. Let’s come in here. Let’s hold the shift and down arrow. Let’s bring this down to about negative 220 degrees so that the final artwork post in our dial is at 100%. Click okay. Let’s select frame seven. Let’s click tween. Let’s add four frames and click Okay. Now from frame sevem, click frame eight, nine, ten, 11, 12.
Now with frame 12 selected, hold the Shift key, comeback, select frame one, this will select all of the frames. Let’s click on the drop down menu inside to select the delay. Let’s choose other. Let’s choose 0.05. Let’s click OK. Let’s come down to the drop down menu on the lower left which is the looping setting. Let’s come down and choose forever. And then let’s hit play. So now you can see the animation timeline playing.
And on the main canvas, you can see the representation of the animation with the angular gradient overlay setting being changed frame by frame. And now with our animation created.
After create this GIF animation we’ll save it “save for web”. And make sure this output is GIF format, colors: 256, Dither: 100%
This is the most easiest way to make GIF file. After create gif animation, it’ll automaticly play when we open this GIF.
Thank you all to read my article. If you have any Question, pls comment me. Thanks again :)
