Image Gallery

This tutorial will teach you how to make a slideshow of some images. It can be used to show all of your sigs, rather than using a PHP code to rotate them on each page view. Two examples are shown below.

Basic Slide Show

Slide show with tween

1. Open up the images that you want to be displayed. This slide show works best if all of the images are the same size. My images are 320px x 120px, so I created a new document, with sizes 320 x 120. The images that I used are shown below.

Image 1

Image 2

Image 3

2. Add all of your images to the new document, and place them in order of appearance. My layer list looks like this...

3. If you did these steps in Photoshop, then click the Edit in Image Ready button. If you did these steps in Image Ready, then ignore this step.

Click this button if you did the previous steps in Photoshop.

4. Create new animation frames, depending on the amount of images you have. I am using 3 images, so I created 3 frames. To make the images rotate, follow this order.

Make only Image 1 visible on Frame 1
Make only Image 2 visible on Frame 2
Make only Image 3 visible on frame 3

So for my animation frames, the order was as follows:

Frame 1

- Layer 1: Visible
- Layer 2: Invisible
- Layer 3: Invisible

Frame 2

- Layer 1: Invisible
- Layer 2: Visible
- Layer 3: Invisible

Frame 3

- Layer 1: Invisible
- Layer 2: Invisible
- Layer 3: Visible

Note: To make an image invisible or visible, click the eye ( ) next to its Layer name. When the eye is there, it means the Layer is visible. Click the eye and take it away to make the Layer invisible.

Set the Frame Delay Time to 2 secs. This can be found on the Animation Window, next to the animation controls. (Play, Pause, Stop, etc).

This is my final result.

To add a variation to the animation,you can add a tween to the images. This will make the images fade in and out one another.