http://www.oman3d.com/tutorials/imageready/animation_fade/sample.gif

As I have been requested from so many members to post this tutorial and as I can see that it's neccessary to those people who create their own combos to add some animation into their work, today I shall present to you my simple Fade-In Fade-Out Effect Tutorial using Adobe ImageReady.


-----------------------------------------------------------------

Introduction:

This tutorial will teach you a pretty simple fade-in fade-out effect similar to the one illustrated in the image above. We will create this effect by duplicating an element in multiple frames while gradually lowering the opacity of it at each step to simulate the fading effect.


Description:

Creating a fade-in fade-out effect on a text single layer.


Objectives:

Accustom with: the basic tools and interface of Adobe ImageReady, animation bar and it's timeframe and element's frame, opacity of the layers.


Software: Adobe ImageReady 7.0 +


Level: Beginners.

Additional credits go to: Oman3D.com team for the further organization in my tutorial.

Links to this tutorial: Oman3D.com (http://www.oman3d.com/tutorials/imageready/animation_fade/) and Pixel2Life.com (http://www.pixel2life.com/tutorials/count/36339/creating_a_fade_in_fade_out_effect_in_imageready/)

Important note: You must have your design ready along in PhotoShop.

Procedures:

Step 1: When you have your desired design done on Photoshop, access the Tool bar and click on the "Edit in ImageReady" button (or alternatively hit Shift+Ctrl+M on your keyboard).

http://www.oman3d.com/tutorials/imageready/animation_fade/1_tut_IR.jpg

Step 2: Now you have a similar interface as the one for Photoshop. The Animation bar should be visible by default, if not press F11 or simply go to Windows and tick on Animation.

http://www.oman3d.com/tutorials/imageready/animation_fade/animation_bar.gif

Step 3: Select your desired layer(s). For the sake of this tutorial, I chose to animate the Text layer only.

http://www.oman3d.com/tutorials/imageready/animation_fade/2_tut_IR.jpg

Step 4: Go to the animation bar and duplicate the current frame by clicking on the button displayed in the image below. Then go to the Text layer and change the Opacity to 80%.

http://www.oman3d.com/tutorials/imageready/animation_fade/3_tut_IR.jpg

Step 5: Keep repeating step 4 while decreasing the opacity value by 20% in each step. Once you reach 20% Opacity, set the Opacity next frame's Text layer to 10% instead of 0%. After that, use ascending numbers and stop at 80%. We will let our animation loop so it will automatically go back to frame 1 which is a 100%.

Step 6: Our Animation is ready. You can now play it by clicking on the play button.

http://www.oman3d.com/tutorials/imageready/animation_fade/animation_fade.gif

Optional Step: If you are not satisfied with the speed at which you animation is playing you can change the time period at which each frame remains on the screen by clicking below the frame thumbnail in the frame display layer. I changed the delay time to 0.1 second for each of my frames.

http://www.oman3d.com/tutorials/imageready/animation_fade/framedelay.gif

This should do it. To view your animation on the web or in any other place you will have to save your animation by going through File>Save Optimized As and then set the format type to GIF.

Conclusion:

There are many great designers who use Adobe ImageReadyto help them on their graphical projects. There are also other effects that you can create using ImageReady, the more you practice, the more you get familiar with the different tools.

END OF THE TUTORIAL

Where are those members who requested me to write this tutorial? :XD:

Where are the mods anyway? O_o

Thank you for the tutorial FH:)

thats a good start up tutorial for people who want to learn a bit of animation in imageReady. Thanks for sharing it with us. :)

thanx FH :D nice tutorial i'm so gona do it and then i'll post the result :cute:

mouahahaha :D
thnx for the tutorial i'll try this next time :)

done it..but i'm still not sure about it.. :shy:

i like the way you explain..easy :cute:

thanx ;)

Thank you all ^_^

It would be nice to see some of your attempts guys. :)

when i try to save it (File>Save Optimized As) i can only save it in .JPEG or .HTML :os

How comes, there should be an option where you can save it as .GIF (Graphics Interchange Format).

Ok Nico, go to Windows>Optimize and then little small window will appear (if not already) and then you can choose your format (which should be .GIF in this case).

Please let me know if you're facing any more problems!

lol it was for my avatar but as you can see it's done...
i used another software for it but lemme try ... will give you my answer in a few minutes

haha done :D

http://i49.photobucket.com/albums/f295/nicobambi/essais.gif

what do you think :)

Woow!! That's great attempt Nico and you amazingly did a good job in the whole artwork. Thanks for following my tutorial ^_^

i did Fdaitny's combo from this Tut !

Great stuff Fast Hacking. Basic but very well explained. I hope u keep on sharing such tutorials with us.

Thanks

hey FH... Y R U bring up ur old tutorials again ?
what but what I requested :(

Woow!! That's great attempt Nico and you amazingly did a good job in the whole artwork. Thanks for following my tutorial ^_^
mouahahaha :D thanx
i did follow another titorial to be honest lol :p
to do the round object :cute:

that's lovely nico...
good tutorial FH :)

nico... how did you manage to make the background transparent without disturbing the circle?... i did that once and the edges of the circles always turned out pixelated.

lol u have to open a new thing with a transparent bg :)
and then do your circle and play around with color and everything and u'll have this
then put so words and u get that lol
sorry but the tuto i used to do it is in french :rolleyes:

looool @ the explanation... actually... I understood it pretty well... thanx nico... might try it with something later.

:bored::bored::bored::bored::bored:
what's wrong with it -.-
i dunno those words.. i'll be better in french explanation, but i bet you wont understand...

great thread
i guess the mods should stick this thread !

Glad that you people liked my little tutorial ^_^

And Why The Hell This Is Isn't Sticked ? Its Super Man.
I Think Mods Should Sticky This.
Thanks For Sharing, Definetly Using It.