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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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!

Picture of 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.

Comments

westcoastdiy (author)2017-02-26

+ Create Layers and Frames? I'm not seeing it in the screenshot or in CS6.

ElaineV9 (author)2016-11-20

thanks!

juwels21 (author)2016-08-05

This was very helpful! Thank you!

ahmede150 (author)2016-06-27

the save for web option isn't activated for saving

NaomiM10 (author)2016-01-15

Thank you, very helpful using this guide to make a simple animation for uni. this is the beginning.

file:///private/var/folders/n5/hvqlgsgx305c1fkpx4k2g0dmmp3fyd/T/TemporaryItems/SaveForWeb/BrowserPreview/BrowserPreview_tmp.html

NaomiM10 (author)2016-01-15

Thank you, very helpful using this guide to make a simple animation for uni. this is the beginning.

file:///private/var/folders/n5/hvqlgsgx305c1fkpx4k2g0dmmp3fyd/T/TemporaryItems/SaveForWeb/BrowserPreview/BrowserPreview_tmp.html

NaomiM10 (author)2016-01-15

Thank you, very helpful using this guide to make a simple animation for uni. this is the beginning.

file:///private/var/folders/n5/hvqlgsgx305c1fkpx4k2g0dmmp3fyd/T/TemporaryItems/SaveForWeb/BrowserPreview/BrowserPreview_tmp.html

JoelN10 (author)2016-01-08

?Thank you for posting the tutorial Fiishm, but I had an a small piece of advice for you.

I would recommend starting with File > Scripts > Load Files onto Stack when you are opening your original starting images.

Once you have all of your image files loaded, start up the Window > Timeline just like your guide says, then click on the Create Frame Animation.

On your step 3, you don't indicate which of the two options to pick when you first open the Timeline window. My default was Create Video Timeline. I had to click on the drop down and change my selection to Create Frame Animation.

Once that is done, in the top right hand corner of your Timeline window, click on the icon that looks like 5 lines stacked, with the downward facing triangle which indicates there is a drop down menu available.

One the drop down menu, select Make Frames From Layers and BOOM, you should be good. I would recommend you edit your Step 4 to include this info. It automates the 1 picture per layer task that you were doing manually in your guide.

Note that your way does work and work fine, but if you use the Load Files onto Stack and Make Frames From Layers, it streamlines your guide. If you would edit your tutorial to include those two steps, it would make it flawless.

Either way, thanks so much for posting this. I now am the proud owner of a kinda dorktastic anime gif, which I plan to completely abuse on reddit.com/r/anime lol.

Also, here is the gif I made. Thanks again Fiishm!

http://i.imgur.com/F7nUCQi.gifv

SaurabhM3 (author)2014-11-02

I did it like you told..everything done fine. But how do i Save it?

Fiishm Siew (author)SaurabhM32014-11-06

Hi. Do refer to the next step (Save as Web) and hope that you manage to do an awesome gif. :)

bwh13 (author)2013-10-11

I don't have photoshop, though

Fiishm Siew (author)bwh132013-10-11

Thanks bwh13 for viewing this tutorial. Yea you will need to install Adobe Photoshop for this tutorial.
But actually If you are still interested in making a gif animation for your pictures, you can try out this website http://gifmaker.me/ .This website (or websites that are similar) allows you can create animated gif images online freely and easily, no registration required.

Enjoy!

About This Instructable

140,460views

11favorites

License:

More by Fiishm Siew:How to make a gif animation using pictures for your website/twitter background
Add instructable to: