Recently, myself and my copywriter partner Ed decided to place a few ads on social media promoting our services as a freelance creative team. Since these were going to appear mainly on Facebook, I decided an animated gif would probably get us the most ‘likes’ because of its disruptive nature. And a quick note here, gif is pronounced Gif, not Jif, as it is the 3 letter acronym for Graphics Interchange Format. It is a bitmap image format created by CompuServe in 1987, way ahead of its time.
I created jpgs for each frame of the animation using Photoshop and then, like everyone else these days, I went to Giphy (giphy.com) to create my gif. I had never used Giphy before but since it’s an industry standard I assumed it would give me lots of options and make a picture perfect gif.
First thing I noticed was that the length of time each frame was up for had to be consistent—for example, I couldn’t give one frame 0.5 seconds and another 1 second. I had planned to space out the timing on my frames so that it felt like a normal ‘text conversation’ where shorter lines of copy popped up in less time than longer ones. But, since that wasn’t an option, I opted for what the program could do and gave all of my frames equal timing.
Giphy made my gif in a jiffy, and that was impressive, but that was also where my love for this program ended. I looked at the resulting animation and noticed that the type was blurry and that my gradient was banding.
Always one to give something a second chance, I went back, looked at my jpgs to make sure they were sharp (they were) and tried again. Giphy was still jiffy…and my gif was still blurry. Of course, this wasn’t going to cut it since this ad was for a self-promotion and needed to show the world our best side, so I went back to Photoshop.
Using the same jpgs I created for Giphy, plus a quick fix and 2 additional frames of the Emojis by themselves for emphasis, I brought them back into Photoshop. First thing I did was open the ‘Timeline’ (Window > Timeline on the top pulldown).
As you can see this brings up a video timeline below the main Photoshop Stage window. You’ll notice that there is a toggle in the center of the Timeline with ‘Create Video Timeline’ and ‘Create Frame Animation’. (Image 5) We want ‘Create Frame Animation’, so toggle to that. (Image 6) You’ll see that when you do, the bottom layer from your Layer Palette becomes Frame 1. (Image 7).
Now make sure your layers are in the order you want them to be in for your final gif, then in the hamburger menu above and to the right of the Timeline, scroll down to ‘Make Frames From Layers’ (Image 8) As soon as you click on this, you’ll notice that Photoshop brings every layer into the Timeline in ascending order from the bottom, giving them all a base time of 0 seconds. (Image 9).
If you hit the Play button on your Timeline now, you’ll see that the video races through all your frames. Of course, this isn’t what you want, so let’s program our frames to something watchable. Under frame 1 you’ll see the down-facing carrot next to the ‘0 sec.’readout. Click on it and it will bring up a pop-up window. (Image 10).
Here, there are some pre-programmed delays but also an area entitled ‘Other…’. Let’s keep ‘Other…’ in mind, but for now give each frame about 1 sec, just to get a sense for how you want the timing on your video to work. You’ll probably notice that you want more time here and less time there, which is where ‘Other…’ comes in very handy. If you click on it, it brings up a pop-up where you can enter any time delay you want between frames. (Image 11) You can enter partial seconds (example: 0.35) or seconds plus partials (example: 2.235) to get the timing you are looking for.
After playing around with mine, I added a delay of one second to the first 3 frames. And since I wanted mine to feel like someone was actually having an IM conversation I gave my 3rd frame :0.85, my 4th :1.6, my 5th :1.00, my 6th :1.75, my 7th :1.75 and my last :20. (Image 12) At the bottom left of your timeline you will also see the word ‘Forever’ with a downward-facing carrot. This is the amount of time your gif will loop for. I don’t like the idea of my animation looping forever so I clicked on it to bring up its dialogue box. Going right to ‘Other…’ I typed in the number 6, so that mine will loop for about 6 minutes before remaining stationary on the final frame. (Image 13).
And while we are down at the bottom of the Timeline, there are some features here that I am not using in my gif this time, but might be of interest to you. After the advance button, there is something that looks like a shooting star. This is your Tween button. ‘Tweening’ is the process of creating additional frames between two images to give the appearance that the first image moves smoothly into the next. Tweens are Photoshop’s way of ‘drawing’ inbetween your key frames to create an illusion of motion. The page button with the folded corner next to this is your ‘Duplicate Frame’ button. It will create an exact duplicate of any frame. And of course, next to that one is our trashcan, which is always handy to have nearby. (Images 14, 15).
After that short detour, let’s go back to our gif and create the final product. Save your file then go to ‘File > Export > Save for Web (Legacy)’. Since I have a gradated background, I made my ‘Preset’ (top right) a Gif 128 dithered (note that there are other options on the pulldown menu that will create a smaller file size), made sure it was exporting as a Gif and then I left Photoshop’s presets alone.
Photoshop created a smooth, clean gif…which really made my day.
You know, sometimes newer isn’t necessarily better.
Download the GIF here: Download
Find Photoshop tutorials at macProVideo: https://www.macprovideo.com/tutorials/photoshop-application