Introduction: How to Make a Gif Animation Using Pictures for Your Website/twitter Background
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.
: 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.
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..!
Thank you so much for sparing your time and I hope that this tutorial is useful to you.