Here is my first gif animation tutorial, it’s actually very easier than
it looks, once you grasp the concept you could probably duplicate this
reflection animation in minutes.
Click here to download the complete psd to help you understand this tutorial better.
>Click to download<<
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 processJust 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!
Credits : olieng.net