Creating a Fade-in Fade-out Effect in ImageReady

By Fast_Hacking | ImageReady

This tutorial will teach you a pretty simple fade-in fade-out effect similar to the one illustrated in the image below. 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. Make sure that you have a graphic ready before attempting this tutorial.

Fading Animation - Sample

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).

Step 1

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.

Animation Bar

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

Step 2 + 3

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%.

Step 4

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%.

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

Press the play button to play.

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.

Step 7

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.

- End of the Tutorial.