Join Sue Jenkins for an in-depth discussion in this video Creating animated GIFs for memes and banner ads, part of Productivity Tips for Web Designers.
- Hello everyone, this is Sue Jenkins with productivity tips for web designers. Today I'll show you how to quickly create custom animated GIFs for your memes and banner ads. Animated GIFs are simple frames based animation files that will play automatically when viewed in a browser window. The concept behind how they work is simple. By displaying a series of images on different layers, within the same file, the animated GIF gives the illusion of movement by showing each image within the series for a set number of seconds.
Essentially, it's the equivalent of a time delayed digital flipbook. There's quite a bit of controversy about how to pronounce this file format. Most people call the non-animated version a GIF with a soft G like giraffe, while the animated version is better known as GIF, with a hard G like gift. So since we're talking about the animated version here, we'll call it a GIF with a hard G. Animated GIFs use a timeline to show each frame in the animation. The timeline can be as short as two frames, and each frame can be set to play and hold for a specified number of seconds, or even fractions of a second, before advancing to the next frame.
Animated GIFs can also be set to loop indefinitely, or play a set number of times before stopping. Animated GIFs have become popular on the web for memes, as well as banner advertisements, but you can also use them for your logos, your icons, even your favicons, or anything else you can think of that might add visual interest to your website. Many people also enjoy posting animated GIFs on Tumblr, Pinterest, and other social media sites. To begin the process of creating an animated GIF, you'll start by creating a new web document in the desired pixel dimensions.
And your PSD file should be RGB and 72 pixels per inch. Generally, it shouldn't be any larger than 500 by 500 pixels, because you have to think about optimizing this thing with action. The smaller, the better. You could probaly go as large as 800 by 800, if the action is limited, but at that size, you'll probably see a serious lack of quality. The file size could be too huge to play normally, easily on the web. So for best results, try to keep your animated GIFs as small as you can.
Also, consider limiting the number of frames that you use, proportionate to the dimensions. The larger the image, the fewer the frames it should have. Inversely, if the dimensions are small, you can probably get away with using more frames. Now that you have your document open, you'll want to add each of your animation images to seperate layers in your file. For instance, if you're creating a simple banner ad, like this one, you'd put each frame of your advertisement into a seperate layer. Or if you're using multiple layers, you can organize each frame into seperate folders.
So here's my layer one, that's what the people will see first when they see this animated GIF. And then they'll see layer two. Similarly, if you're creating an animation that looks more like a little mini film clip, with more natural looking motion on each frame, be sure that you place each of your images on seperate layers. You also want to make sure that only the first layer is visible in your layers panel, as this will be the first frame in your animation. So you can toggle the visibility of each of your layers by clicking the eye icon next to each one.
Let's go back to our banner ad. The next thing to do is to open up your timeline, so go to the Window menu, and choose Timeline panel by choosing Windows, Timeline. Photoshop will automatically create the first frame of your animation for you with the duration of zero seconds. Notice the word Once below the frame? If the animation were to play now, it would only play once, and then stop. We'll change that in a minute. To add a second frame to your animation, you're going to click the Create New Frame button at the bottom of the panel.
If your version of Photoshop adds a new layer to your Layers panel, and you don't need it, you'll need to go to the menu for the timeline and deselect Create New Layer for Each New Frame. So I'm going to delete that guy and throw it in the trash here. So now we have two frames in our timeline, and on the second frame, I want to hide layer one, and show layer two. If I had additional Layers in my layers panel, I would repeat this process for each additional frame.
We can set the duration for our frames. You can edit the duration one at a time using the Seconds menu at the bottom of each frame, but if you want to save a little time, you can actually do them all at once by selecting all the frames, so I'll click and then shift click, to select both. And then when I click on one and modify it, I change them both to the same number at the same time. When you're choosing a speed, try not to overdo it. Too much motion on a webpage can be really annoying to some visitors. Also, you want to avoid making animations that go way too fast.
A high flicker rate has been known to invoke seizures in viewers with epilepsy. The best animated GIFs will have a nice, slower pace. To preview your animation, click the Play button at the bottom of the timeline panel. When you're done previewing, click the Stop button. Let's switch over to this other file for a second, so I can show you a few more fun tips about creating animated GIFs in Photoshop. If you happen to have more than a couple of layers, another great way to create frames for your animation is to choose the Make Frames From Layers option from the Timeline panels menu.
You can then select all of your layers and adjust the frame duration, and preview the animation, by pressing the Play button. So for instance, for this one, we'll set that to 0.2 seconds. And then click the play button to see how this looks. Now we have it set to one, so we can change it to Forever, and try again. And it looks like our guy is walking backwards. There's a easy way to fix that. We'll start by selecting all of the frames, so clicking on one, and shift clicking on 12, and going back into the menu here, and we'll choose Reverse Frames.
Now when we click the Play button we'll see that the man is walking in the correct direction. To save your file as an animated GIF, you'll go to the File, Save For Web dialog box. Make sure that it is set to GIF, you can choose 128 no dither, or any of the other settings, and then click the Save button. I'll save mine to the desktop. And that's it. Now, if you want to see how your animated GIF will appear in a browser, you can actually drag and drop the file into any open browser window, with or without an Internet connection.
This gives you a chance to test it out and go back into Photoshop and make any edits, if you need to, before you add it to your website, or somewhere else online. What sets Photoshop apart from other software programs and apps that make animated GIFs, is your ability to use all of Photoshop's tools to create, and then edit the layers you'll use in your animation frames. So the next time you need to make an animated GIF for your website, turn to Photoshop's timeline panel.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.