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.
[You must be registered and logged in to see this image.]
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).
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
3- Select your desired layer(s). For the sake of this tutorial, I chose to animate the Text layer only.
[You must be registered and logged in to see this image.]
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%.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
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.
[You must be registered and logged in to see this image.]
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.]