Creating an animated gif banner ad

Hey everybody, it's internet consultant Ryan Dohrn, and today we're going to be working with Photoshop. I'm actually going to be in Photoshop CS5 on a Mac, but the process, whether you're on a PC or Mac, is going to be similar. And we're going to be creating today an animated GIF file for an advertisement. So I want to go File, New, and I want to create the correct size of the ad. So it's going to be a 300 by 250 banner ad. Make sure you set the resolution at 72. If you don't, What's gonna happen is you're going to have a file potentially that's 300 DPI and it's gonna be too big, okay, for most. So let's call this, uh, let's just call this Ryan Test Banner and it's gonna be a 300 by 250. Click OK. Alright, so here we are and what I'm gonna do, I'm just gonna go ahead and call this one. Well, you just use text and I'm gonna call, uh, this is layer number 1, okay. And if I wanna make this text bigger, obviously I'm gonna go View And I'm going to— I'm sorry, Window, I'm going to choose Character. And then here's my font size, so let me go make that 30 so I can see it. Okay? Alright, so that's going to be my first layer. So on this you could put a picture or, you know, whatever. Alright? Now I need my next layer, so I'm going to go Layer, New Layer, and this is going to be Layer 2. Okay, what I'm going to do just so I can see what's going on in my animation, I'm going to shut off Layer 1. And let's go ahead and do Layer 2. So this is— we're just going to put on here, this is Layer 2. Alright, again, so this is in an animation. So your first layer is going to be here, okay, as we turn these little eyeballs on and off. So Layer 1, then it's going to go to Layer 2, then it's going to go to Layer 1, then it's going to go to Layer 2, depending on how we loop it, okay? Now you notice what I've done is I'm going to go Window, okay, and in CS5 I'm going to go Animation so I can see the animation. Okay, down here below. And what I want it to do, I want it to loop forever. Do you see this right here? Loop forever. So here's my first frame. Okay, and what do I want to appear in my first frame? My first frame, I just want layer number 1. Okay, and how long? Okay, I want it to appear for 1 second. I'm gonna hit this button here to go ahead and make my next frame. Okay, so here is layer number 2. What do I want in layer number 2? I just want the contents from layer number 2. And how long do I want that to appear? Let's just say I want that to appear for 2 seconds. Press play and we can watch this actually occur. Okay, boom, boom, and that's what it's gonna look like in your animated GIF file. Okay, alright, so let's go ahead and go and, uh, and stop that, pause it. Okay, now how long do you want it to loop? I'm gonna say I want it to loop forever. Most Interactive Advertising Bureau standard sizes say 3 times, then it's got to quit. Okay, now I need to save this for the web, so I'm gonna go File, okay, and I'm gonna do Save for Web and Devices. Now if you're on an earlier version of Photoshop, okay, what you're gonna do is create your layers here in main— the main Photoshop program. Down here in the lower left at the bottom of your toolbar, you're gonna click the button for Image Ready. It's gonna take you over to Image Ready, which is gonna look exactly like this. In ImageReady, you're gonna do File, Save Optimized As. In CS5, instead you're gonna go File, Save for Web and Devices. Now you're gonna get over to this screen here, and what you're gonna do in this screen is very, very easy, okay? You're simply going to— you can preview it right here if you want by clicking Preview, and that'll open it in your default browser, alright? For the most part, everything here is already gonna be selected for you, but you can go through and make all kinds of changes. Just make sure it's 300 by 250, and then you're simply going to click Save, and that's going to allow you to save it over to whatever folder that you want to place it in. Now, if you're not sure exactly how it's gonna look, I encourage you then to choose Preview. So if you click Preview, it's actually gonna pull up a web browser, it's gonna automatically write a little snippet of code for you, and it's gonna show you what your animation is gonna look like. And it's going to loop through it 3 times. And then to get back, just simply close your web browser and come back to your program and click Save. Altogether, that's it. It's pretty easy to do an animated GIF file. Obviously, this is just the basics. If you need more help, reach out to me. My email address is pretty simple. It's just ryan@ryandohrn.com. My last name is spelled D-O-H-R-N. And I'm an internet consultant and would be happy to help you your company or your customers. Again, it's just Ryan Dohrn. It's ryan@ryandohrn.com. Take care. Hope this was helpful, and good luck with CS5.