Photoshop makes it very easy to create animated gifs with it's animation pallet. You will basically create your first animation frame then duplicate that frame, modify your layer to your second animation movement then create another frame and repeat the process until the animation is complete.
Remember in each frame you will have to change something in order to make an animation. What I love about Photoshops gif animation is that it allows you to work with one layer and create a whole animation process out of it, no need to create ten to twenty layers just for one animation because the animation pallet records every frame changes. Lets get started!
1. Displaying the animation pallet.
In Photoshop on the top menu select windows then click the "Animation" option. An animation pallet should then appear on your canvas.
2. Tracing and cutting out the inner shades.
Using the polygon lasso tool I traced the into parts of the subjects shades, then copied (ctrl+c) then paste (ctrl+v) which then creates a new layer with the inner shades present. Rename this layer to "reflect". Remember this is the only layer you will need to create through the whole process.
3. Adding an inner glow to the reflect layer.
Double click the reflect layer which brings up the layer style menu and choose an inner glow of 5 and a black color. This will make the shine effect more realistic by causing the reflection to look more natural instead of a cut and paste job.
4. Starting the effect by using a gradient fill.
Now here is the start of the animation, lets first start the reflection small coming from the left side and eventually it will disappear to the right side.
With the layer style menu still open click on a gradient fill, select a Linear style, and for this image set the angle to 19. Then create a gradient fill with three color stops to the far left, black, white, black. It should look like the gradient below. This will be the start of the first frame.
5. Creating the second frame and adjusting the gradient fill.
WIth the first reflection glare in place we will make it move a little more to the right in the second frame, so go to your animation pallet and click on duplicate selected frames and it should create another frame just like the image below.
After this second frame appears select your reflect layer and open up the same style menu and click on your back and white gradient fill again, this time adjust it further more to the right just like the example below.
6. Repeat process
Just keep creating another frame, and adjusting the gradient fill until it reaches the end, 7-8 frames would be enough for this image.
After your gradient fill has reached the end where the white is slided all the way right your are pretty much almost done, I have created a total of 9 frames, see below.
7. Creating an extra frame for delaying the repetition of the effect.
If we save the image as of right now the animation would be too quick while playing over and over again and can put a strain on your eyes so we want to add a frame in which we will delay by 1.0
create your next frame, but on this frame we will un-check the gradient fill on the style layer. So that after the effect goes to the end it will then delay for 1.0 seconds before starting again which gives it a better appeal.
8. Save for web.
Your animation is complete done, now were going to save for web Goto file > save for web > then make sure your preset is on "Gif" and not jpeg. Choose a color dept of 64, which is probably the best for this animation and save and your done!


More Tutorials:



