How to Make an Animated GIF in Photoshop: A D-Higg Tutorial.


1: First off, if you haven’t used the program yet,
go up to “File<New” to create a new document.
Make the size of the document 1000 by 1000 pixels,
resolution to 72, and the color mode to RGB.



2: Let’s get some pictures into Photoshop.
Go to “File<Open”
and find the series of pictures you’d like to turn into a GIF.
I’m taking pictures from an album cover design
I made to show my process of making it.



Once all the photos are in the program,
click on the image’s tab above
and select the image by going above
to “Select<Select All” (CMD+A for Mac),



then copy the selection by going above to “Edit<Copy” (CMD+C).
Select the image will allow you to copy it
to paste it into another document.
Now go to the tab above to your original document (Untitled-1)



and paste it by going above to “Edit<Paste” (CMD+V).
Continue these steps until all your images are in the new document you made.



3: With you images in the Untitled-1 document,
arrange them how you’d like for your images to appear
from first to last starting top to bottom
and name the order with numbers.
Notice, the top image in the layers panel
will show up as the picture because it’s above the others.


untitled-44: With the images in the document
and the order of photos to appear is chosen,
we will change the program layout and template
from Essential to Motion on the top right.



5: On the bottom, you will see a tab titled “Timeline”
with a button saying “Create Video Timeline.”
Click on that button and you’ll see it transform showing the layers,
a time signature above in frames/seconds, and the layer lengths in purple.
The GIF will be as long as the longest picture is set to go,
which is currently 5 seconds.

Since we want the GIF to only last 2 seconds,
we will select each layer individually
and drag the right side to the left so it reaches 2 seconds.



6: Once you’ve dragged all the images to 2 seconds,
you can use the slider on the bottom to zoom in and out.
Zoom in so the 2 seconds fills the entire box.


untitled-77: Starting with the top layer,
we will start shortening each individual picture
to disappear one after each other like shown in the picture.
I’m doing it each image for 5 frames.



8: Once you’ve finished, you can preview selecting the play button.
Now you can adjust all your images to make the transition faster or slower.



9: Once you like your GIF, we will now save it.
Go above and select “File<Save For Web…”
Copy the settings on the picture,
but it’s most important that you select your image
to be a GIF file format and set the loop on forever,
otherwise, it will play once and remain on the last image.
Save the image.


Final GIF:

10: With your GIF saved,
go show your friends and upload it on the web!

0.00 avg. rating (0% score) - 0 votes

Share your thoughts