How to Make a Gif Animation Using Pictures for Your Website/twitter Background

Hello there,

I have learnt some quick techniques and would like to share with you on how to make a simple GIF animation using Adobe Photoshop CS6. To me it is interesting to have a different way of viewing and sharing captured photos with friends in a digital way.

Hope that you will enjoy this tutorial.

Step 1: Prepare Your Photos

You can have as many photos as you like.

For this tutorial I am going to use 3 photos to make a gif animation

*Tip: Find out what are your photos' dimensions (width & height) first.

Step 2: Adobe Photoshop CS6

Open a new document in Adobe Photoshop cs6 

- Give your document a name!
- Put the width & height to the size of your pictures
  (to prevent your pictures being cut out)
- Changing background context to transparent is recommended too

Step 3: Click 'Timeline' + Create Layers and Frames

Just go to 'Window' and click Timeline (CS6) / Animation (CS5), a Timeline/Animation box will show up after that.

Next, create new layers according to the number of photos that you have and duplicate more frames for Timeline column.

Create
: 3 new layers (Layer 1, Layer 2, Layer 3) 
: 3 new frames for Timeline

Step 4: Place Your Pictures

Place your pictures from Mini Bridge or go to File>Place

Go to the file where your photos are.

Select your first photo and place it at Layer 1 and make sure you are on the 1st Timeline frame

Then try for the second photo. Place your photo from Mini Bridge at Layer 2 and make sure that you are at the 2nd Timeline frame (take 1st photo's eyeball out)

Do the similar thing for the 3rd photo. Layer 3, 3rd Timeline frame (take other photos' layers eyeball out too)

Step 5: Play Your Timeline

When all the photos are put in the correct order, then you can play the animation.
(Click on the Play button just below the timeline frames)

Adjust the transition time between photos to your preference. Do this by changing the timing option below each frames.

Play the timeline again to test your adjustment till you get the animation to play at your desired speed and timing.
Simple :)

Step 6: Last Step: Save Your GIF Animation!

There you are done with your animation and let's save it!

Go to File > Save for Web..

- Make sure that it is GIF
- Go ahead and Preview your animation in a browser before saving 
- and Save it..!

*THE END*
Thank you so much for sparing your time and I hope that this tutorial is useful to you.