Lessons

Lesson Info

Animated GIFs in Photoshop

Now we're going to switch gears and use the program to create an animated GIF. So it's incredibly easy. This is what are Photoshopped Document is gonna look like. So we've got a Siris of images down here in the timeline that are going to run together. When we play this thing back in a Web browser, it's gonna make it look like we haven't animated ad that moves really not animated. It's just a really fast slideshow is all, like a flip book. Think, think about it that way, and it's incredibly easy to create in Photoshopped. So first, let's take a peek at what we're gonna make. So in your exercise files, I've got the PSD for you as well as the final, so you can kind of see what you're about to make. So I'm just gonna drag and drop that over a Web browser, and you can see that we have some text, a call to action, just very important. You always want to include that call to action. Click here to say, 50% on your first sitting and pet students in there, So that's what we're gonna make so back...

over here in Photoshop Obviously, the first thing you need to do is figure out how big this ad's gonna be, where the pixel dimensions of this ad. So whatever side you're advertising on, they're going to tell you what that is, So you would start by creating a new document at that size. So let's choose file new their commander control in, and we'll call this one animation live, and we'll change our unit of measurement two pixels. So let's say this ad's gonna be 300 pixels by pixels. Now, Resolution really doesn't matter for this instance. But the new dialogue box and phone shot will squawk at you if you don't put a number in the resolution field, so we're forced to put in 72. But it really doesn't matter. It's the pixel dimensions that matter. Let's go ahead and click. OK, now we've got our new document. Close that panel. For the moment, it is a good idea to go ahead and get your images organized, so let's pop open the folder here and inside this folder, you'll see I've got five different. I stopped photo images. That's where those cute little Chihuahua was coming from this air. Not much while I'm a cat person. So we've got all of the files that are gonna be in our animation right here. So let's just bring in all of the imagery, set our text, and then we'll animate it. I'm gonna cheat just a tiny bit and I'm gonna drag and drop the text from the document I already made for you into the new document. So I'm gonna arrange my windows so I can see both of them. And so I'm gonna click on the PSD that I made for you and I'm gonna drag this branding folder. That's where all my text is is at into the new document. And here's a fun keyboard shortcut for you. If you ever do this drag layers between documents and you want the layers to end up perfectly centered in the new document dragged the layers while you're holding the shift key into the new document. So we've got our layers here for branding in a group. See how those groups just make the the layers panel organization a little cleaner. It also is easier when you're dragging and dropping layers from one document to the other. So Let's click and hold on the branding group from the finished document and while holding down the shift key, drag it into the new document that we made. And when we do, it's gonna land right in the center so we don't have to reposition it. That's in the illiterate, so that's shifts dragging layers from one document to the other. Now we can close the finished file. Now we're dealing with our new document here. So we got our branding all in one layer layer group rather. And just so you know how I created that white background with the pink stroke, I'll turn off the text year that's coming from a shape layer. So if we turn that off temporarily, I can show you how to make that near the bottom of the Tools panel. Click on one of the vector shaped tools, depending upon which tool you use. Most recently, that's the icon that you'll see. Apparently, I use the line tool most recently so you can choose the rectangle tool, then trot up to the options bar, and you want to make sure to choose shape when you choose shape. This is a drawing mode. Photoshopped can create art in three different drawing modes with the vector tools. If you choose shape photo shops gonna put the shape of whatever it is you draw on a new layer and that's what we want. So all I did was to shape I set the Phil to be white, and I set the stroke to be a pink. And then I set the width of the stroke, and that's it. And then I drew the box, and that's all there is to it. So that's how I made that little border. Just so you know. Okay, we'll go ahead and leave the new one and go back to the the old one here, okay? And then we set our text. You know, we've got our logo here, and then we've got our tagline, and we should have included the U R L in there. But you all will remember to do that at home. Actually, we don't have to include the u. R L Why the Web ad? They're going to click it, and it's gonna be a hyperlink. So it's gonna go to the Uriel anyway. So arguably with an animated GIF like that, you probably don't have to add that you are especially if it's long and it take up too much space You got, you know, very little screen real estate to work with here in this situation. So we're okay without the Uriel, actually, but you can add it if you want. Now, let's start bringing in our images. Let's choose file place, because, remember, we want to resize these things, so we want them to come in as a protectively wrapped smart object navigates where the photos live. When you're working on these files at home, we're now in the animated just folder inside of the Photoshopped folder. And it doesn't matter which order you bring in all these files. Now, your next question is gonna be well, can't you just shift click toe, activate all those and bring him in? You could if you weren't placing them as a smart object. But if you're placing them is a smart object, you can only bring in one file at a time, So we're gonna have to repeat this step so we'll click place. And while holding his shift, an option. Let's zoom up, enlarge our file press return when we're finished and now I'm gonna click and drag the image layer outside of our branding section. I'm gonna turn off the visibility of our branding, maybe bring it free, transform and make this one. It's a little bit bigger, so we can really appreciate the depths of the D moral ization that this pet is suffering. And we'll keep bringing in the images, you know? And I've got a little something for everybody here. Not nice. It drives me nuts nuts that there is no keyboard shortcut for that place command. But, you know, you could map one yourself a little bit bigger. So, for example, if it drives you crazy that there's no keyboard shortcut for this guy right here, you could choose the edit menu scroll all the way down the keyboard shortcuts. And you could use this dialog box to create your own custom keyboard shortcut for the commands that don't have one. That's a nice little tidbits that it it keyboard shortcuts. Okay, so we'll keep bringing in our files. Frida. Anybody I love the eyebrows on that cracks me up to get that one already. We got that one. This one is for one of our best buddies Jack Davis cause Jack Davis is a surfer, and I thought he'd appreciate that It's cute in it. And last but not least, for my motorcycle riding buddies out there. No, I don't ride a Harley. I have a BMW sport touring bike that I got a lot of bodies that right? Hardly. So. OK, so now we've got all of our images. If you wanted to really organize this layers panel, you could, uh, click the top layer shift, click the last one and do that grouping trick, which is Commander Control G. And you could call this one. You know, the actual products where the pets teams that we've got going on. Now we are ready to start building our animation, and it's not as hard as you think. It really is a lot of fun. So at the bottom of your screen, if you have the timeline panel open, go ahead and give its tab. Click. If you don't see it, she's window timeline, and that will open it before we do the next thing. I want to adjust my visibility of all my layers so that my first sprain of the animation, rather that layer content is visible. So for my first frame of the animation, I don't want any of the dog pictures. But I do want our branding, So I'm just going to use the layer visibility eyeballs here to toggle on and off the elements that I want in the first frame. So this is really how I want the first frame toe look now, in the time on panel, let me drag that up a little bit. Siocon See it. You've got an option of two different two different project types that you can populate in your timeline. So let's click that little downward pointing triangle we can choose between creating a video timeline, which will do next when we create our video portfolio and Photoshopped. But right now we want to create a frame animation. So with the check mark next to frame animation, then you're gonna actually click the button that says frame animation. So soon as I click it, there is our frame animation. I'm actually gonna see if I can make the icons in that time my panel a little larger, gonna click the fly out menu next to the top right of the panel, and you can do this, that any panel has previews. Choose panel options from the resulting menu and look at this. So we're only on the medium thumbnail size, so I'm gonna change it to the large thumbnail size and click OK, that's gonna make our our frames there just a little bit larger. You can do that on the layers penalty. Quit the file. Many of the layers panel choose panel options and shoes that largest thumbnail that this makes your previews over here a little bit bigger so you can actually see them. All right, there's our first frame now. It's simply a matter from this point on of duplicating that frame, turning off and on layer content, duplicating that frame, turning off and on layer content. That's it. That's absolutely all there is to it. So let's do that. The way you duplicated frame is you click the new frame icon at the bottom of the timeline Panelist like a piece of paper with a dog your corner. So we're going to give that a click. When you do, the frame is duplicated. Now let's turn off and on what we want on that second frame so I don't want my branding on the second frame Someone turn that layer Group off Now I'm gonna expand the layer group with the actual pet steams And I'm gonna turn on the 1st 1 that I want Duplicate that frame. Turn that dog off, Turn this dog on, duplicate the frame, Turn net dog off the stock on duplicate the frame off and on at all there is to Can you even believe it's so easy now for the last frame or the second to the last frame Rather, I want my call to action. So you want to give people call to action, just like on the direct mail postcard that we did give him? Give him an action to complete. So for this one, I want Teoh, Go ahead and duplicate that frame again. I'm gonna turn off on my dogs up here and we're going to scroll down to the branding and I'm gonna turn on my call to action in the logo. So my call for action is click here to say 50% on your first sitting. Great. Now I want to create another frame that is kind of empty because what we're gonna do is we're gonna put some transitions between these guys, so they kind of fade in and out. But I want my call to action. I don't want texts to fade directly into more text because it's going to be difficult to read. So I'm gonna create one more frame and I'm in Turn off everything but our little blank outline space. Now I'm gonna create one more frame that has that is the same as our initial frame. So now I'm gonna turn back on those two things. So let's click the play button at the bottom of the timeline panel and see what we've got here. Or click on the first frame and then click play. And it went by really, really fast. We can control the time in which each frame is on screen individually, but let's go ahead and send em all toe like, 01 2nd or safer for default. It's at zero seconds, so they just bang bang bang might my bank, which is great if you're making a flip book to make it look like things were moving around. So we can either select one frame at a time and museum and little bits you can see this. Click the little time indicator underneath the frame and set the time individually. Or we can select multiple frames and set them all to the same amount of time. So you can use one of these presets or you can choose other and type in the amount of time that you want. So let's go ahead, and we got the first frame selected. Now let's select the all the dog pictures, and when we click that little time indicator underneath them, I can see that all of them will change. See how another all set to one second. So now when we play it, they go by much more slowly until the in very quick that my call to action is arguably my most important frame. So let's have that stay on screen for two whole seconds. Mm and then maybe our blank screen, maybe 1/2 a second. It may be the last frame, maybe a second, because it's gonna roll into the first frame when we look this thing. Now let's see what we got. We'll click on the first frame, click play. We've got a little bit more civilized slideshow going on here. There now it's handle the transitions in frame animations. This is called twinning, so you can think of that as a photo shop. I want you to put some extra frames in between these two frames so that it looks like one is fading out and the other one was fading in. That's called twinning. So you're gonna have photo shop at frames in between two existing frames. It's very easy to do. I'm gonna add my Tween ing to the last three frames. There's an odd thing that happens up if I were to Tween in between the pet photos. I don't like the way that it looks once we go Teoh the actual Jif format because Jeff is a smaller color space. We're gonna have smaller colors in that file or smaller amount of colors in that file format. And unless I put a white frame in between each of these, it's gonna look yucky. So when I put full color photos in my animated GIFs, I don't do any twinning between them. I just let them go from one to the other. To me, it's much more visually pleasing because the color start looking a little bit weird. If you add twinning in between full color photographs. Now, if you're doing Leinart, you know, you think cartoon are things with an outline that I've been colored in illustrations and stuff. Then the twinning would probably work out fine. But for full color photographs, I tend to not between. In between them, it looks better my personal opinion, but feel free to experiment with that. So let's go ahead and select the first frame that we want to add the twinning to. And then we're going to click this button right here at the bottom of the timeline panel. And again, if you forget what any of these buttons do, just point your cursor, Adam, and take your hand off the mouse for a second. And then the tool tip should come up. So when I click that button, photo shop asks me, Okay, what do you want to Tween this frame with? Well, the next room How many frames do you want to add? The more softer the transition you want, the more frames you'll need to add. But also the more frames you add, the larger the file size of this resulting Jif is gonna be and some websites will limit you say, Oh, you could make an animated gif it 300 by pixels, but it can't be any larger than 50 k or even less than that. So the more frames you add, the larger the file is going to be. So you might try by starting seeing if three additional frames in between is gonna look like you want it to look. So let's try three and just leave. The rest of this said We haven't done any changes with position opacity or layer effects, so we don't really care about all that. So let's go ahead and click OK and watching the timeline panel. See how Photoshopped added those three frames, see how they're fading out. And then, since we added that blank frame, it goes right to, ah, blank screen before it starts coming back up. So now let's add twinning between frame number 11 and frame number so it's click to activate the frame that you want to add the tweeting to click the tweeting button and choose what you want to Tween it with next frame. Most often times, it'll be next frame when you've only got a couple choices here. So we'll say next, friend, go ahead at three frames. Photoshopped. Thank you. Now, if we scroll over, let's take a look at those frames that it added. So here was our original frame. Here's the next one. See how the content of the next frame is fading up and that's the end of the animation there. We're pretty much done at this point. The only other thing that we might sit is how many times you want this animation to play, and this controls how many times it plays on the website. That it's posted on three is a standard, So probably just go for three. He don't wanna loop it forever. I mean, how distracting would that be? Okay, so now let's give it a ago. So let's click on her first frame and click the play button and see what we've got. So our call to action stays on screen a little bit longer fades out now. To me, it's taken too long to get to those other frames so we can just come in here and it's set to play three times, so it'll keep playing until I stop it there. So let's suggest the timing on some of the tweeting. So I've got my call to action on screen for two seconds. But I don't want the Tween frames to be on for two seconds. So let's shift click to select those frames and change those 2.5 as well. Now let's start the playback from here and see if we like that a little bit better. So call to action, and then we start fading out to blank fading back up the text. And again we added that blank slide because text fading into text is impossible to read, so I would put a blank frame in there. Neat, huh? That's all there is to say. This is a photo shot file, so if you don't like the end result, you can go back in and change it. So we've already given it a name or inter enemy to Jeff Older Photoshopped Layers. Yes, click save Great. Now our master file is is safe. Now let's prepare the Jif she's filed. Safer with in this dialogue, you're gonna choose Jif from the format pop up menu and depending on if you're limited by file size, the fewer colors you use in the gym, the smaller the file size is going to be. And you see the file size right there. So as we go down and colors, look how that number changes. So now it's 139 k 32 k But if I play my animation and you can play it right here in the safe for Web dialog box so you can see exactly what your changes appear to the file setting mean on your photographs. So the play button is down here at the bottom, so we can either step through the frames, see how crappy the colors look now. So that means that to preserve if we want to actually get any business from this ad, preserve our reputation here, we're gonna have to go up in the color palette, probably all the way to 2 56 to make those photos look decent. So now, as we step through, I can say, Yeah, that looks good. So you can step through the whole thing right here to see how these options are affecting your file. And when you're finished, click save down here at the bottom. Telephoto shot. Where to put it Well, let's go ahead and have it go into her animated GIF file. Look save now let's go find that file. There's the one we just made. May make sure that's the only just made yet today at 1 14 Now let's click and drag it atop the icon of our Web browser. Or you could use your browser's file Open command. Can you believe it's that simple to make an animated GIF E? No, there's like five people that use photo shopped for this. It's so much fun, so much bad. Okay, so let's do that one more time. Question where you have the pets tombs and then underneath you have demoralizing your your pet, and then the next slide is your pets. Tombs with the website How would you set it up so that you just have the bottom half fadeout with website fade in, But the pets tomb stays steady the whole time. The top half the bottom have just fades out fades in the way tweeting works. It's a whole frame situation, so you can't really specify, you know, Tween out the top portion or the bottom portion, so I'm not really sure how you do that you would probably have to create it as graphics. So you you'd have to kind of make that happen in your layers pale. And then this turned those layers on and off for the individual frames. Yeah, a little bit more work, but you could do it. But it would be, ah, manual kind of thing that you create in layers rather than getting it done through photo shops. Twinning controls. Very question, though. Okay, so let's have another go with the shall we question, Harvey? Yeah. How do you know what your total time is? I don't see that on the timeline of your Jeff. Well, yeah, that's a great question. I never thought about that. How much your total time is? Typically, folks won't limit you toe a time value, but they'll limit you to file size. Which kind of limits how many frames you can have question? Does it change the look of it? Say, if you just wanted but the dogs to stay on longer, not using between, but just to repeat the same picture a couple times. Kind of like when you do an animation, you have the picture stay a couple more times If you want the frame longer or the motion will be slower could. But you could just handle that with the with the tweeting so it wouldn't make a difference. Really? Well, you could if we wanted these the pet images to stay on screen longer. We would just change the amount of time that their own screen with that little pop it in you for the timing changes, not necessarily just repeating the image, right? It just stays on the screen for longer, which is what you want. So this timing stuff is not going to increase your file size, but adding frames one good it violence. Eyes. Yeah. Okay, so let's do it again. So close. That document. First thing we're gonna do is gather up all of her files. Ask the website What size is this? Need to be? So final New 300 by 250 72. We'll call this one animated live version two. Now, let's open up the image where branding is, which is right here and there. Let's position are windows so that we can see both windows at the same time by using the window menu arrange. I'm gonna say to up vertical click the document that has the I didn't You want to steal and we're gonna shift Drag our branding folder over to the new document. You're doing this at home, you're gonna be creating this text in the document. But I don't want to make you all sit through that again. Next thing we need to do is open the timeline panel. I'm gonna try moving that above so maybe I can see a little bit a little bit easier and I'll close Mini bridge there. So now let's click the little downward pointing triangle and let's choose create frame animation. And again, if you don't see this timeline panel cheese window timeline, open it and click create frame animation. And what that does is it creates your first frame, and the look of the frame is going to be determined about what layers you have turned on or off. I forgot to bring in our pictures so she's filed place and let's go bring in our fun are fun shots here. So when I wrote my very first photo shot book, which was way back and see us for you know, David Pogue was one of my mentors. I have two mentors in my life. David Pogon Scott. Kill Me So David Pogue is a pretty famous a CBS News correspondent. Nova Hose used to be New York Times technology columnist, and I was his personal assistant for six years, and I got to sit with him as he wrote all these missing manuals. Macca was 10 missing manual windows and miss the missing Manual and so on and so forth. And he taught me how to make funny screenshots because he's a funny guy. He also wrote Magic for Dummies and Opera for Dummies and Classical Music for Dummies. He's all around, crazy guy. Brilliant. But he taught me that if you're writing something really long, your screenshots better be hysterical to keep people engaged. So I followed that advice when I wrote my first Photoshopped missing manual. So I found all these true wall with shots and, you know, it makes it more fun for me. It cracks me up is I'm writing 1000 page book and preparing all the screenshots, and it also keeps the readers engaged to. So that's why end up using crazy imagery like this. So OK, so now we've got all of our art in. We can pop all the peppy pictures in a group if we want by selecting them and pressing Commander Control G. Let's call this one pets teams. And now we're just gonna adjust our layer visibility to show what we want in the first frame. Now we're gonna duplicate frames, So click that little Icahn right there to duplicate the frame. Now let's turn our branding off and turn on our first pet picture right there. Duplicate. Turn that one off turn that went on duplicate. So it's very easy, and you can really create some complex flip book instant slide shows like this so will duplicate that frame. Turn off the dog and will come down here and turn on our call to action, which is this layer right here. Now let's duplicate that layer, and this is gonna be our blank layer. So we fade the text from one side into the other, and then we'll go back to our original logo there. So now it's just a matter of setting up the timing. So it's click the first frame and click the last frame and said, these guys, all 2.5. Let's set the call to action to two seconds because we wanted to stay on screen longer. And then let's set the time of these guys 2.5 as well. Now, if we want to add frames in between these two frames, click to select one frame. Press the twinning button, decide how many frames you want to add. We're gonna go for three Tween with what? The next frame? Click OK, Photoshopped ads. Those frames never gonna click the blank side. Click the tweeting button again between With what the next frame? How many frames to add? Three. Click OK, and if this last slide that you put in your animation is different than the first slide, you might want to do some twinning on that one. If you did, you could click it, click the twinning button, and that's when you might say Tween with the first frame. So if you're gonna create a loop, I don't need to do that here cause my last frame is the same as my other one. So just know that you could do that to you. And now let's play it. So let's scroll back over to the first frame and click the play button. Call to action stays on screen a little bit longer. Now, I need to set the timing of my of these guys. So click the stop button. So now I'm gonna click my between frames. There we go. Change these 2.5 as well. Scroll back to the beginning. Click the first frame. Quit the play button. Can see what we've got. Well, looks good. Now, let's determine how many times we want that animation to play on the website. So three is a standard, so let's click three times. Question. Can you, um, drag and rearrange the frames once they've been set? Or are they like the like, the one at the end? Since it's the same one, the one at the beginning, Could you have duplicated it? And then when you were done, just drag it to the end? You could do that. We see if you can rearrange these, you can rearrange them. Yeah. Yeah, you could do that. All right, so we're ready to save the sucker. Do you remember to set how many times it plays? Because it would be very disappointing for you to pay money for a website, and it plays one time and stops. So I probably said it 23 times. Now let's choose file save as and we would say, what is a Photoshopped document to preserve our layers? And then when we choose file safer Web and from the format money, we're gonna choose Jif, we can experiment with our colors to see if we might can reduce file size, but with full color photographs, you're not really gonna be able to, but again, if it's Leinart something that has solid blocks of color, then you could go way down just depends on what you're putting in this animation. But I love that that Photoshopped gives you the ability to step through me, see if I can make this dialogue a little bit smaller. I can't grab the end of it. But I love the ability that you can step through the different frames right here in the safe for Web dialog box that you can check out exactly what your parameters. You know what effect they're having on your on your art. So we definitely need to go back up to 2 56 on this. If you had transparent areas in the image. In the frame animation, you could turn on transparency. Let's say you're doing a line, aren't drawing, and you were gonna put it on a website that had a background color. You might want to do transparency with that, but that's basically it. Then we can click, save, give it a name, pop open your Web browser, and you can choose file open file instead of just dragging the file atop the Web browser icon seeking cheese file open file and then navigate to where that file is. Toe open it. So six in one hand, half dozen in the other. If I could tell you how many times I heard that growing up Oh my gosh. And there's our animation priest like, huh questions on that. Any other place other than a website like could you make like a goofy thing to email to your family? Totally. All mean, you're totally The great thing about Jeffs is after Tiny you know, they're little, so this is totally an email herbal file that you could pass around and do anything with it, you know, think about some of the stuff we're doing. The only thing you I don't think you could take this animation in the light room and do anything with it there because light room wouldn't support that Fight Room can read a Jiff, I believe. But the animation part I wouldn browsers are the ones that can read these. And in fact, I couldn't even get it to playing Keynote. I had to use another creative cloud tool called the Adobe Media Encoder, who to change the format of this from an animated GIF to an actual MP for movie. And then I could put that moving into my keynote presentation. That's how I got it to play inside of Kino when we looked at it at the top of the day. So that's how easy it is to make an animated GIF. So even if you're spending your life in light room and you don't use Photoshopped that much, But if you've got it, these are the kinds of things that you can get done with it. There is no, um, you can't get this done, and in design, you can't do this. An illustrator. You can't do this in light room, so it's one of Photoshopped superpowers. You could get it done in Premiere Pro. But that's a professional cinematic movie tool. And when we look at it tomorrow, you guys were gonna be blown away because it takes over your whole screen. It's like, What quadrant of the interface would you like to focus on this week in order to learn it is very complicated, but what we're gonna use it for is for image stabilization, which is a practical use for Premier Pro. We're animated GIFs. They are lots of fun.