Web Courses Academy Blog

Do you want to create your first GIF with me?

Author: Carl Heaton
He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.
idea-feature
Quick jump to topics
Sharing is caring

Today I just want to show you what I have learned lately, how to make a GIF using Photoshop. I’m sure you want to learn that too!

make a gif using photoshop

Make a GIF Using Photoshop – Have your layers ready:

First you have to create all the desired images. In this case I wanted to have some screenshots of beautiful websites that were made by old WCB students in order to promote one of our courses.

I had different screenshots put in a Mac screen:

make a gif using photoshop

make a gif using photoshop

make a gif using photoshop

make a gif using photoshop

In this case I had not to forget to save the picture in the PNG format so there will be no background.

Note: I just updated Photoshop to its last version (yes I am that fancy!) and I discovered that they removed the “Save for Web” option and it seems like now you have to use “export as” option I am very unhappy I’ve been learning to use this function for the last months and my world just collapsed.

make a gif using photoshop

Actually if you look closely “Save for web” is still available in the export as option but they had the word “legacy”. Does it mean that it will soon disappear? make a gif using photoshop

Anyway. Now you have all the wanted images created and you put each of them in a different layer:

make a gif using photoshop

Bravo!  I’ll say that you did the hard work here.

Make a GIF Using Photoshop – Create the frame animation with your layers

Now you have to create what Adobe called the timeline.

So click on Window and selection Timeline:

make a gif using photoshop

You can choose between “create video timeline” and “create frame animation”. Select the second one please:

make a gif using photoshop

If you missed this dropdown selection you can play on the bottom left corner to move from the video the the frame animation:

From video to frame animation:

make a gif using photoshop

make a gif using photoshop

From frame to video animation:

make a gif using photoshop

Perfect! Then you have to select all the layers. You can click on the small arrow on the top right corner of the animation windows  make a gif using photoshop  and select “Make Frames from layers”.

make a gif using photoshop

And they will all appear:

make a gif using photoshop

If you changed your mind and there is a layer you don’t want anymore you can just click on it to select this one and delete it.

Make a GIF Using Photoshop – Change the timeline of each layer

You can see that there is a timeline for each layer.

make a gif using photoshop

You can choose from 0,1 to 10 seconds and even more:

make a gif using photoshop

I’ll use 2 seconds, don’t ask me why, I just think 1 is too short and 3 is too long (and I like even numbers)

That’s starting to look good!

Now we want to put some love in our Gif and don’t have images that will instantly change without a transition:

make a gif using photoshop

Make a GIF Using Photoshop – Create a nice transition between the layers

So what we can do is select the first layer and click on this button:  18

make a gif using photoshop

You can choose how many layers you want to add for the transition: Let’s go for 4

make a gif using photoshop

You can see that your layers were added but think to change the timeline for them or they will use the same for the others. Let’s be crazy and try 0,1 seconds.

make a gif using photoshop

Repeat the same thing for each layers as you want the pretty transition between all of them.

make a gif using photoshop

If you want your Gif to be played forever (I will go to that point in a minute) don’t forget to add a transition between the last layer and the first one. You only have to select “First frame” inside the “tween” box: – and don’t forget to also change the time line for the transition layers.

make a gif using photoshop

Almost done!

Now let’s choose how many time we want to play the Gif. Just click on this button: 24 and select how many time you want to play it. I want to be crazy again and play it forever.

make a gif using photoshop

Make a GIF Using Photoshop – Save your creation as a GIF file

Last step but not the least, let’s save our Gif file. You can click on “Save for the Web” and you’ll have plenty of complicated options or for Photoshop 2015 you can just use the Export as option.

make a gif using photoshop

make a gif using photoshop

Et voila ! We just created our first Gif. Let’s have a drink!

make a gif using photoshop

LM

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities

Sorry. You must be logged in to view this form.

Promise to only send you useful interesting newsletters once a month.