Importing image sequences for an animated GIF

- [Voiceover] Let's get back to animated GIFs for just a little bit. At times you'll have animation or a video you created in something like After Effects or another program and you've just gotta share it on the World Wide Web as a looping GIF. I understand this need and Photoshop is just a fantastic program for this conversion process. So to demonstrate this process we'll step away from the loop animation we've created in Photoshop and use an entirely different asset, a short bit of animation I previously created in After Effects and rendered out as an image sequence and we'll use Photoshop to create a looping GIF version for the web. From the Start screen I'll just go ahead and hit Command + O on my keyboard to open a new image file. I'm gonna go to Exercise Files, Chapter 4, and I'm gong to select the O4_01_Smash_ImageSequence 24 frames per second. Notice the frame rate in this folder name, I did that for a specific reason and that will be apparent very shortly. I'm gonna select the first image in this image sequence and I'm gonna go ahead and checkmark Image Sequence at the bottom here. This will make sure that all these images come in as one moving image sequence video file. I'll hit Open and this is where that frame rate comes back into play. Notice that the default frame rate is set to 2997 frames per second. But I wanna make sure it's at that 24 frames per second that my image sequence was created at. So I'm gonna change that to 24 frames per second there and hit Okay. If for some reason you're not seeing the Timeline mode pop up make sure that you're in the Motion screen mode up here. Alright, I'm gonna hit the Space button and play through to take a look at this image sequence. Yep, that's me smashing creativity out of my computer. I'm going to Pause/Playback by hitting the Spacebar and I'm gonna go to the Crop tool just to make this a little bit wider because I wanna put some text behind it. I'm gonna hold down the Option key and just click and drag this out a little bit wider to make it a little more square. That looks pretty good, I'll hit Return and play through again, not bad. I'm gonna go ahead and hit V on my keyboard to go back to my Move tool and I'm gonna go to the Text tool. Now I wanna put a new text layer in here but I wanna make sure it's not inside this video group so I'm gonna close up the video group in my Layer panel and click off of it. I'll go up into my Composition and I'll click to make text and I'm just gonna type in the word creativity. I'll select my Move tool, just kinda move this to the center a little bit. Now down in my Timeline at the bottom, if I open this up we can see that this is a little off center so I'll click and I'll move this and I'll go to the end of my creativity text and drag this back so it matches that layer one creativity smashing sequence that I brought in earlier. Also I want this to be behind it so go into my Layer panel, click and drag it below the video group. Let's take a preview. Not too shabby but I want that creativity to look a little more creative and a little bit more fun. And I can simply do that by selecting my creativity text layer, hitting Command + T for Free Transform and I'm gonna go over to this edge right here and hold down the Command button and just click and bring this up so I can slant this text just a little bit so my creative text looks a little bit more creative. I'll hit Return and there we go. Creativity smashed from the computer and creativity being told to the world through the text, literally saying "Creativity." This looks pretty good and now I wanna export this as a looping animated GIF file. So I'm gonna pause, I'll hit File, Export, Save for Web (Legacy). I'll hit Command + minus just to center it a little more in the screen. I can see what the GIF size will be, 1.5 megabytes, which is just a little bit big. So I'll go up to my Settings and play around up here. First I'm gonna disable Transparency because I'm gonna post this on the web and I want it to be on white, there we go. I'm gonna go down to Lossy, which is at about 20 right now and see what it looks like a little bit increased to something like 35 and it's pretty big at 958 by 1093 so I'm gonna take it down to about 50% the scale size. I'm gonna hit Return and I'm gonna go down to my looping options and take it from Once to Forever. I can then preview below here and it looks okay. It's a little bit grainy because this is a video file so I'm gonna go back up to that Lossy and bring it back down to about 15%. That's lookin' alright and if I look at the GIF file size it's at 621 kilobytes, which isn't too bad. I can live with that. So I'm gonna go ahead and save this and I will navigate to my Exercise files, Export and Renders, and I'm gonna save this as CreativiySmash.gif. I'll save it. Then if I go to my finder window and navigate to Exports and Renders we can check out my creativity smash GIF and look at it in all its glory ready to be posted on the web. So this is a pretty quick and easy process just remember to keep track of the animation's original frame rate like I did with labeling the folder. This way you can match it up in Photoshop. A lot of websites, apps, and other web content use animated GIFs for simple animated icons, loading bars, et cetera, et cetera. In fact, if you take a look at my website owenlowery.com, please ignore the shameless self promotion, it is chalk full of animated buttons, headers, and other visual elements which are all looping GIFs because, well I'm all about them loops.