How to make GIF in Photoshop
General
purpose:
To demonstrate
Specific
purpose:
To demonstrate to my audience on how to make a GIF on Photoshop CS5.
Central
idea: Not
many people know how to make GIFs (a loop of repeated frames of a video or a
set of pictures, etc.) using Photoshop and claimed that it is something really
hard to do. Instead, it is actually not that hard and this speech’s main
purpose is to teach people the easiest way they can navigate through Photoshop
to create these GIFs.
INTRODUCTION
1.
I will first-hand show the audience a few GIFs that I have made; the simplest
ones of course. This will act as a hook that might attract their attention,
probably wanting to know about my speech. Then, I will show them the more
complex ones, but I will remind them that I won’t be teaching them how to do
those ones. I will be using only the LCD as my demonstration aid.
2.
GIFs can be found all over the internet, and GIF-making skills are actually no
longer a big thing. However, I would still like to teach the basic steps on how
to GIF because to me it’s easy, it won’t cost you a penny – unless you’re
planning to purchase the original Photoshop CS5 Extended software, which I
don’t quite recommend because I think right now, the latest version of Adobe
Photoshop CS5 sells for $699 to buy or $199 if you upgrade from a previous
version – and you can use those GIFs on sites like Tumblr, Blogger, etc. I’ve
been using Tumblr for years now and since then I have been GIFing – GIFing is
not even a valid word but at least it’s not a complicated jargon so I hope
you’ll let this one pass, Miss Afifa – and I would like to show you lot the
most basic way of GIFing using Photoshop.
Transition:
Before we move on to the steps, I would like to explain about the ‘thing you’ll
need’ for this whole GIFing process.
BODY
1.
This is what you’ll require for GIFing.
·
First of all, you will need Photoshop
software. As I have pointed out earlier, you can buy it or you can download the
pirated version. I won’t be teaching you how to download the pirated version of
Photoshop because I believe you can ask Mr. Google about where to find those. I
recommend you the Photoshop CS5 Extended because I will be using that for
today’s demo.
·
Next, you’ll need a Quicktime Player.
Don’t ask me why because apparently after two ears of doing this I still don’t
know why you’ll need this. But it is required.
·
I believe you lot know how to download
videos so I’ll skip that part.
·
Make sure you download videos in MP4
format for it to work in Photoshop. For me because my netbook sucks, I have to
change it to mov so yeah. If you want to make the GIFs look nicer then download
the videos in 720p so you’ll have frames of a higher definition. But most
importantly make sure you have a video.
2.
Let’s move on to the steps of making the GIF frames.
·
First, open the Photoshop application,
once you have installed it, of course.
·
Click File > Import
Video Frames to Layers > Go to the folder where your video file is
located. Click on the video, and then click Load.
·
An Import Video to Layers window
will pop up, with your video on the right. Check the box Selected Range
Only to limit your frames. If you don’t tick that box then Photoshop
will GIF the entire video that will create a big file, and it might take a
century to load.
·
Check the box Make Frames
Animation as well.
·
Click the triangle on the very right of
the player, and hold the mouse for as long as you want your GIF to be.
Preferably for two or three seconds only because it might produce like 50 to 60
frames and that is enough.
·
Click the Ok button and
your frames will appear in a Photoshop Document.
3.
Next, we move on to editing the frames into GIF layers.
·
Go to Window > Animation.
A small window-like thingy will appear at the bottom. You can scroll and see
how many frames you currently have. For me, I’m gonna use it for Tumblr so I’m
gonna limit the frames to 50.
·
Delete the unneeded frames, either at the
back or at the beginning. This way it won’t disrupt the loop.
·
On the Animation tab, there is a small
button at the very right. Click it, then click Select All Frames.
All frames will appear with a blue light.
·
At the bottom there will be numbers that
says ‘0.04 sec’. That is the speed of the frames. How fast the frames move.
0.04 sec means each frame will appear for only 0.04 sec.
·
Click on the black triangle, then
click Other. A Set Frame Delay window will appear.
Change the number to 0.07 or 0.08 for the GIF to run smoothly. Not too fast,
not too slow.
·
Now we’ll crop the frame into your desired
size.
·
Go to the Tools tab and
click on the square icon that looks like two triangles merged together. That is
the Crop tool. Click and drag it across your frame anyway you
want, rectangular or square or anything else. Dotted lines will appear on the
image.
·
Once you are satisfied with the
proportions, click on the tick sign at the right.
·
Now we shall resize the image to make sure
it’s not big. I’m gonna use a basic Tumblr size so that’s gonna be 268px in
width. The height can be any you desire.
·
Click on Image > Image
Size. An Image Size window will appear. Change the width
to 268px and you’ll notice the height will follow it proportionally. It is the
same vice versa.
·
Now click on the little play button and
see how your GIF moves!
4.
Now we are going to colour the GIF.
·
You can make the GIF look nicer by editing
it. Open the Animation tab and click on the last frame. Then
click on the Layers tab, then click once on the uppermost layer.
·
To colour a GIF file is hard so I suggest
using a .PSD file.
·
What’s a PSD file, you ask? I’m sorry for
not explaining this earlier but I don’t think it’s an important part, since
we’re only doing the basic steps. PSD file is a set of colouring settings and
you can get them anywhere. I get them from Tumblr blogs. A PSD will look like
this. (I will open my PSD folder and show the audience)
·
To change the colouring of my GIF, I’ll
just drag the PSD folder over the frames and you’ll notice the colour and
brightness all will change!
5.
Lastly, we’ll save the GIF file!
·
Firstly, make sure the loop on the left
says Forever instead of Once or 3
Times.
·
Click File > Save
for Web and Devices. A Save for Web and Devices window
will pop up.
·
Click on the tab underneath the word Preset, change
it to GIF.
·
Make sure the Looping Options is Forever.
Click on the play button to preview your GIF.
·
Then click Save. A Save
Optimized As window will appear. You can change your file name as you
desire, then click Save.
Breaklight:
Voila, your GIF is finished! You can open the folder you saved it in, double
click on the file to view it!
CONCLUSION
1. Now that we're done with the steps, I'd like all
of us to recall them, if you lot don't mind.
·
Firstly we must obtain
the application and the video that we will need for our GIF layers.
·
Then we'll move on to
making the frames of the GIF
·
The next step is to edit
the frames into GIF layers.
·
Then, we will colour the
GIF
·
Finally, we will save
the GIF into our computer!
2. Making
a GIF is not easy, and I’m skipping a few unnecessary parts because those parts
are quite complicated for learners. It won’t take only 15 minutes for you to be
good at making GIFs, but these are the most basic steps I can teach. If you
wish to know more on how to put subtitles or words, or how to make complicated
GIFs and all you can search for Photoshop tutorials on the internet. Or you can
ask Sabrina, she’s good at this. I’m not that good, but I can help with a few
things.
3. Remember,
patience and perseverance are good traits to keep in mind when you’re
navigating Photoshop. Almost all the time, it’s just try and error.
