Hi. This is Marty from Blue Lightning TV.
I'm going to show you how to create JIF animations, more commonly called GIFs.
The guy who invented it, Steve Wilhite, said in 2013 that the correct pronunciation is
"JIF", like in "giraffe", therefore, "JIF" it is!
First, I'll show you how to make a GIF from a video.
Go to File, Import and "Video Frames to Layers".
Locate and click your video and click "Open".
You can either use the entire video from beginning to end or more than likely, you'll select
a range of frames within the video.
You can also import it every 2nd, 3rd, 4th frame and so on, to reduce the file size.
Check “Make Frame Animation”. Since I want to use a very short range of frames within
this video, I can either tick "Selected Range Only" or bypass that step by just moving the
main slider to the frame that you'd like your GIF to start at.
Then move the lower, left slider to that frame.
Move the lower, right slider to the frame you'd like your GIF to end.
Then, click OK.
Immediately, all the frames within the range you selected are placed in your Layers panel.
Go to Window and "Timeline".
All of these frames are now in an animation timeline.
Choose "Forever".
This will play your frames in their order until you stop it.
So, when you click, the "Play" button, you can see your frames advancing in order as they're played.
Click the Space bar to stop it.
GIFs play back best when their sizes aren't too large.
The maximum sizes of GIFs vary depending on the platform they're playing back on.
My suggestion is to try to play your GIF using a larger size and if it doesn't work, just
decrease its size until it does work.
Go to Image and Image Size.
Make the Resolution 72 pixels per inch.
For this example, I'll make its Width: 380 pixels, so its Image Size is less than 240 kilobytes.
If you’re working on version CC or later, go to File, Export and Save for Web (Legacy).
If you're using an earlier version of Photoshop, go to File and "Save for Web".
Save it as a "GIF" and make sure "Convert to sRGB" is checked.
The Looping Options is "Forever".
Click "Preview" to see how it would look on the web.
If you like it, close the window and click "Save".
I'll save it to my Desktop and name it.
Then, click “Save”.
To actually see it on the web, minimize Photoshop and any other windows that may be open and
then, open your Browser and drag the GIF video directly onto the open Browser.
Next, I'll show you how create an animated GIF from photos or artwork.
I'll reset my workspace, so we can start from scratch.
For your convenience, I provided this PSD document, so you can follow along.
Its link is located in my video's description or project files below.
I purposely didn't include a background to show that you that GIFs can be be saved and
played back without a background.
If you want to add a background to your GIF animation, simply add the background below
your other layers in the Layers panel.
Go to Window and Timeline.
Notice the timeline at the bottom.
Check "Create Frame Animation".
Then, click the button to place our image into the first frame.
If your Move Tool isn't selected, press "v" on your keyboard.
With our soccer ball layer active, place your cursor on the soccer ball and press and hold
Shift as you drag the ball to the top of the head.
You'll notice that the soccer ball moved down to the head in your timeline frame, as well.
Click this icon to duplicate the frame.
Go back to the ball and press and hold Shift as you drag it straight up to the top.
Make the player layer active and drag it down just above the eyebrows, but not lower than that.
Next, we're going to create additional frames between the first and second frame that will
give us a smooth animated transition between the two frames.
To do this, click this icon called "Tweens Animation Frames".
Tween it with the "Previous Frame", tick "All Layers and check all the Parameters.
For this example, let's add 10 frames to make the transition.
Then, click OK or press Enter or Return.
Instantly, it added 10 additional frames that give us a perfectly smooth transition between
the first frame and the last frame.
To loop it from the last frame back to the first frame, click the "Tweens Animation Frames"
icon again and this time, click "First Frame".
We now have a complete cycle from the first frame to the last frame and back to the first frame.
Before we play it, notice that each frame has 0 seconds.
If you click on the arrow pointing down, you can pick the amount of time you’d like between each frame.
“0” seconds means that there’s no delay between each frame.
Click "Forever" to see it play until we stop it.
Click the Play button to play it.
To stop it, press your Space bar.
Save it to the web using the same way you saved your video GIF.
Click "Preview".
You'll immediately notice that your GIF is animating very slowly, unlike video GIFs,
however, I've found a way that plays it back at normal speed.
Close the window and click "Cancel".
Click this icon at the upper, right of the timeline to open the fly-out list and click
"Convert to Video Timeline".
Because this GIF is so small, let's slide the Zoom Slider to the right to zoom into the timeline.
Open the fly-out list and click, "Set Timeline Frame Rate".
Double the frame rate from 30 to 60.
Notice the length of our timeline doubled.
Go to File and save it as you did earlier.
Loop it "Forever" and click "Preview".
Now, our animation is playing back at normal speed.
Close the window and click Save.
I'll save it to my Desktop and click "Save".
Minimize Photoshop and open your Browser.
Then, drag your GIF onto your Browser's window to check it.
This is Marty from Blue Lightning TV.
Thanks for watching!