Animate your images to attract attention and fight the static boredom. This section contains tutorials to help you master the animation process.  Home Photoshop ImageReady Animation Image Slideshow

Image Slideshow


Step 1:

The trick that we will be performing today is creating a simple slideshow with a nice fade effect included. Each time the photo switches to a different one, the old one will fade away like shown above!

Step 2:

Start off by finding numerous pictures (3+) to include in the slideshow. Make sure they all fit the same canvas so they aren't going off the edges or anything. Mine is all about Italy as you may see. After you have gathered all of your images, hit File > Edit in Imageready.

image 1

Step 3:

Once you are in Adobe Imageready, you will need to make sure you small animation window is on there (near the bottom). If it isn't, go to Window > Animation. Now, like seen above circled in red is a little icon. Click that to create a new layer of animation.

image 2

Step 4:

Click the link above to view a 5 second clip on how to make the animation layers. Each time you make a new layer in the animation, hide one of the layers in your photos and then make another one appear. Very simple!

image 3

Step 5:

Now it is time to give the animation a little bit of effect. Select the first animation layer and hit the Tween tool like circled in the above image. A window will pop up. Use the options below.

image 4

Step 6:

After you have done step 5 once, you will notice more animation windows appear. Now go to the 7th animation window and tween it again with the next one. After that, go to the 13th animation layer and tween that one. Then the 19th one. Then go to the 25th one and this time change the "Tween With" to First frame.

Step 7:

Now that you have animated everything, go ahead and press play on the animation box for a preview. If it looks good, then its time to save. If there's some bugs in it, reread the tutorial or contact me for more help.

Step 8:

Time to save the creation now. Go up to File > Save Optimized As. Then save type as GIF. Hope you learned something from the tutorial, good luck working on it! The result again is below!

Image Slideshow Tutorial: Final Result



Author's URL: Aviva Directory
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Image Slideshow"

Only registered users can write comment

Reader's comments
comments MacUsers August 14, 2007 says:
Image Slideshow
Many thanks Nathanael for this nice tutorial.
But has anyone (including the editor) really tried this by himself/herself? I'm very new to PHP, therefore It's not possible for me to figure out every single error messages but it's actually not working. With my little knowledge, I see two initial errors.

First of all, since PHP 4.2.0 the default setting for register_globals is off. So, $PHP_SELF (in slide.php) simply won't work with the default configuration. Adding a line like:
Code:
$PHP_SELF = $_SERVER['PHP_SELF'];
in the beginning should solve the problem.

Next, there is something wrong with this block
Code:
if ($image == "$i") {
$next_img = "$next_link";
$back_img = "$back_link";
}
It reports: Undefined variable: image in config.php
I think the line should be replaced by this:
Code:
if ($image == "$i") {
will minimize the error messages.

After doing all of these stuff, now I get:
Code:
Notice: Use of undefined constant auto - assumed 'auto' in slide.php on line 7
Notice: Undefined index: auto in slide.php on line 7
Notice: Use of undefined constant auto - assumed 'auto' in slide.php on line 15
Notice: Undefined index: auto in slide.php on line 15
Notice: Use of undefined constant auto - assumed 'auto' in slide.php on line 15
Notice: Undefined index: auto in slide.php on line 15
Notice: Use of undefined constant image - assumed 'image' in slide.php on line 32


I'd assumed that some thing wrong with $_REQUEST == "on") but I have no idea what to do for this. Anyone out here got any clue??
cheers!!