Let's go. Welcome back. In this video, you'll learn how to create an animated stuff like taking a look at this quickly notice we've got a kind of shaded gray. I've got a blackboard around the outside.
And I've got the three lights, red, yellow and green. In this case, I've got them all in on
This go ahead and kind of maybe make this video we're more realistic when the rep comes on and turns off and yellow comes on and off and so forth there.
But now that we know what we want to do, and let's get started here. So the first step is to come up here to file. I'm going to choose new
Me, I go ahead and drag this over in the screen recording window, and we're going to go. Hundred and 10 pixels and with
300 pixels and heightened this problem is already set there at 72 for the resolution and then this, go ahead and press and I can see it right there below, drag it over here. Press create that now.
Okay, so the very first step I want to do is create kind of a gray someone to go ahead and press on the foreground icon. I'm not the Color Picker window.
Now go ahead and took the light shade of grey and press okay at this point it's going to fill that all grass. So I'm just going to come right up here to select all, and then to fill it out, come up here to edit. I'll go to film, and then I'll choose foreground color and press OK.
OK. Now if I take a look at this. Let's assume I want to get a blackboard around the house. So let me show you the two different ways of doing that.
One is I can see it's artists like that. So I could use this, I want to create a three pixel board around the outside.
I could go ahead and use my arrow keys to go 123 again I'm just using this as a screen recording window or not. And I'm gonna go ahead and go down three times 123
So I use my mouse. I moved them selected area over three to write down three I could then come up here to select I could go to inverse
I could go ahead and make sure my foreground set the black and I could hit
Well all backspace or I could come up here to Edit and Fill fill the selected area there and it's gonna be hard to see because the background here was kind of black and I've just added the black border long there.
Okay, at this point, I could come along and go to Select All again. And now I'm going to press the left arrow key three times 123 press the up arrow three times 123 I would then select the inverse come along and come up here to edit Phil and press of
Healing. Let me go ahead and select that and sure enough, I've created a border around the outside. That's the three pixels. Okay, let me show you a different way here, and I'm just going to undo all that
Was pressing Control Z. And I think I got that all removed.
So it's hard to tell. Here. Now what I'm gonna do is create a copy of the background.
OK. And now what I'm gonna do is I go ahead and right click, that's right click on the top layer there go to blunden options.
I'm going to go to a stroke. And let's start with three. But the big thing here is make sure that set inside that set the outside
You've added some stroke, but it's not going to be visible within your image since I went outside the image there.
Now instead, I'm going to choose inside and now they've got this set to three and I could press a cab.
And and that's going to kind of hard to see, but I've created a three pixel watermelon. The outside the nice approach less more like about this approach is if I decided I want a bigger stroke.
No problem. I can just come right along up here and I could change this to some other value, maybe five or four accepted go back the three and press OK.
OK, so we've got the background taken care of. Now we're going to start working on the lights just don't work on the line. So I'm gonna go ahead and press and use the elliptical marquis tool.
I'm going to go fixed size 80 pixels and with it. It took souls in hide and I want to place these on workplace that on its own layer. So I'm going to press right over here is the trash can.
Just select the that is the critical error icon, go and press that that's going to create a blank layer. And now I'm going to go ahead and press right up here.
If you want, you can use your arrow keys to kind of help move that into position. Now what I'm gonna do is go ahead and press on the poor gown.
Coloring. This can open up the Color Picker window. I'll go ahead and I get a shade of red and press OK, and then I'll come along and fill that by going up to Edit and film.
Foreground Color and press OK, and I'm going to go ahead and before I forget, I'm gonna go ahead and call this one. This is going to be my red
And on and know what I'm gonna do is just go ahead and create a copy of that and what times I will dislike intimacy, something like that.
I'm gonna go ahead and create a copy of that trying that down to the Create New Layer icon. So I've got a copy of it. I'm gonna go ahead and call this one read off.
Let's go ahead and start working on the red off and we'll come back and finish up the red on
To work on the red off. I'm going to go ahead and first of all get is lighter shade of red. So here's my that's kind of my on
And for the off, I want to have just to tend to read, kind of like a light bulb that's read. It's got a little tend to read, but it's not very bright. Maybe somewhere over here and press OK.
Now I'm going to go ahead and I can just use out of the magic wand press here on the red and come up here to Edit and Fill impressive guy.
Okay, finally, this point. Typically, I'll do select that. Now what I'm gonna do is add an inner shadow. And to do that, I simply right click on the layer I go up to blend and options.
On the come over here to inner shadow turn it on and go ahead and press. I tell you what, let me hit the reset to default, just in case of some kind of get back to the same area.
It may be all want to do is increase the distance a little bit here. You can see as I do, that gets a little darker at the top.
And I'm gonna go ahead and call that one. Good. So my red office finished now let's go ahead and turn this layer off, although it's a moment to see what's going on here. I want to make this my active layer.
I'm not going to right click on it and we go to blended options and let's add a Dublin and boss and the super dense looking like. And maybe I should do the same thing. There may be a reset to default
And if you're wants you maybe could increase the size or even not the depth there. I'm just gonna go ahead and press sometime
Okay, now finally want to insert kind of make it really look like it's turned on. And to do that, I'm gonna come up here to filter. When we come down to a render and I'm going to choose.
Lens flare and feel free to adjust these you can see that's kind of bright there maybe you'd want to turn the brightness down a little bit and I'll let you determine where you want to put that little lens flare in class. Okay. Okay, so here's. Here it is. This is the off.
If I turn that you can see where it's going to be beyond. Okay. Moving continuing on. I'm now going to go ahead and press on the Create New Layer icon again.
I'm going to come up here and use the elliptical marquee I can see it's still a fixed size. Let me go ahead and press right about here.
And now we're going to get a shade of yellow. Let me go ahead and press on the foreground going to call the window. Get a shade of yellow and press OK, and then I'll turn around and fill that
And press OK.
OK, this point. No, we don't want to do is I'm gonna go ahead and create a copy of that and then I'll work on the offers, just like we did with the red some take a table. First of all, go ahead and type in yellow.
And I'll call this one on and I'm I create a copy of that by simply taking that layer and drag it to the Create New Layer icon.
And now I'm gonna go ahead and click on this and I'm going to call this one layer and off.
Okay, just like I did a second ago. I'm going to go ahead. Well, let me get these like that. First of all, I'm going to go ahead and get a lighter shade of yellow
Something to come go here, press on my foreground icon press on smoke up the Color Picker. Get a light lighter shade of yellow that where it's really you can really see where it's yellow and press
Okay, at this point, I'm going to go ahead and press on the yellow and I'll fill it.
Fill and press OK.
And just like we did earlier. I'm going to right click on it, go to blend and options and what choose an inner shadow and I'm just going to use all the default values impressive can
You let me. I do select that there. OK. So the hill. The Office looking great. Now let's come back to the yellow on to make sure you turn that I always gets what's going on down here. I'm going to right click on it blunden options.
Melbourne and boss. I'm just going to use all the same values I did for the red and press OK. Now I'm going to come up here to filter.
I'm going to come down to a render and lens flare and just simply here. Looks like I need to kind of increase the brightness little bit so I can even see what's going on there. Okay. And there is the yellow on here. Let me come back here to turn off the wall. Okay.
Let's keep on going here. Maybe I'll remember to do is the green is at the bottom. So I can tell you what, let me just show you a picture of a watch, you can redo the order of these, I can simply a drag these layers around
And I'm going to go ahead at the red at the top and the red on red, yellow, and so forth. So by highlighting this layer. Now, and impress the Create New Layer icon.
Notice it's going to place it between the background and the yellow. So it's going to be kind of at the bottom. So hopefully my layers match the lights here. OK, so moving on here. I'm going to go ahead and select Elliptical Marquee Tool. Come on down here to the bottom.
And let's get a shade of green. Again, this person will be the on so it'd be kind of a bright green dress. Okay. And let me go ahead and fill that so come up here to edit Phil and press sometime
Yeah. And let's go ahead and not give this a name. I'm gonna call this green
And on
And I want to go ahead and dislike that first I'm gonna go ahead and create a copy of that. I'm just gonna take this layer and drag it to the Create New Layer icon and then go ahead and call this one off.
So I've got my green off. So let's go ahead and make it look like it's off. So I'm gonna go ahead and
Press on the magic one highlight this area press on my foreground icon, open up the Color Picker window. Get a light shade of green.
And will come up here to edit film foreground color and. Okay. And then what I'm going to do is go ahead and right click on the off Linden options at an inner shadow. Whoops. New shadow and just said, OK.
OK, let me just like that. There. And that's looking great. Okay, falling for the off.
I mean for the on I'm going to turn this layer. I'll make this my arm, my active layer. I'm going to right click on it, you can look to blend and options.
Available and and boss is the default values for us. Okay. And just like the other ones will come along and Filter, Render a lens flare Filter, Render lens flare.
In the beginning, they have shade of green in here or a lens flare in the green
Okay. And let me go ahead and put them in the States. So notice I've got an on and off layer for all three lights in. We're now ready to animate the animated. I'm going to come up here to a window. I'm gonna come down to have one window time one and you can see here
Little I've got a couple options here. I can either use video timeline or frame intermission.
And make sure you have frame animation, then go ahead and actually press on the button create frame animation.
And as soon as you do it. You can see what that one frame well to create the other ones. I'm just going to come right over here for us on the Create new
The duplicate selected frames icon. Now what I'm gonna do is I'm going to come up here and I'm going to turn the read off.
And which now by turning that one off. This one is now visible. Okay, so that was the second frame. I'm not going to go ahead and duplicate this frame.
And in this case, I'm going to turn make the red off. And if you're wanting to turn that back on, we turn that one off. Now I'm going to go ahead and reverse these. So the yellow is on
So here the red one was on here. The yellow. And one more time. I'm going to duplicate the selected for him. Now I'm going to go ahead and make the yellow
And turn an effect. I want to make sure the green is on, but since this one was on it was hiding the office to turn that one off.
OK, so now take a look here. Here's the first one. All of them are off of it. The red, yellow and the green here.
Okay, right now, if I was to run it through zero, second delay. So if I ran that slider is going to get to go and kind of crazy here. So it's like, oh no, stop them.
If you want to add a delay. You can do this one at a time. Maybe you could up and they don't have to be the same. Very good.
One second half second half a second three second delay, but just to simplify things here. Let me go not like the first one.
I'm going to hold the Shift creaky hold the shift key. It's like the last one, and then we'll just go with a one second delay.
Notice I've got this forever. I can make this one time three times. I could come down here to other and specified. Okay. I want to animate it five times. I'm just going to go forever and press OK. And sure enough, you can see the red, the yellow and the green
OK, now let's go ahead and maybe one of the important steps here is how to save this image. And if I take a look here. I've got
I'm going to be saving it on the desktop and a subdirectory called Tim. This one is called animated stoplight large that's one that I've been looking at here.
And let's go ahead and in the same directory. Let me go ahead and show you how to save it.
So the first step, you're going to probably always want to do if you get an image of this magnitude here with this and the different layers and awesome
The timeline. So maybe later on to go. Now let me change the delay here to two seconds on the first one I'm going to change that back. So in this case you want to definitely save it in PSD format. So to do that you come up here to file it go to save as
And I'll just call this animated
stoplights not to look up the word new here, and I'll go ahead and press Save.
And I'll press OK. So now if I was to reopen this one up. I'm going to have all the layer information available for me and also the timeline, so I can use the adjusted these things. Okay, now to save it.
As an animated image for your browser mobile device, etc. So you can view it out to do that, you're going to come up here to file, you're going to go to export.
And you're going to go. Same for web legacy so File, Export say for web legacy here and that's going to open up the same for web dialog box up here.
And I'm going to drag this in in way down here in the bottom right hand corner is well kind of towards the bottom is the word say, and I'm gonna go ahead and press down
And that's going to open up. Now you can drag this over here and that's going to open up the Save optimized window as and I'm going to go. I'm just going to use all the default values here and simply say that
Okay, now if I come along. Take a look at this directory. You can see I've saved the PSD file. And what I want to come along and make some changes, but also have saved.
This image here which will know that place it on a website, it's going to be an animated image and those lights will continue to turn on La Luna, just to show you how you right click on it. Now, let me go open with
And let me come up here to Firefox.
And here it is. So in my case my browser has got this dark background. So by places on a website that had a white background and they would see that black border.
Well, hopefully this video you'll learn how to create an animated stoplight and make sure when you save it that you come up here into a file, export Save for Web, and I'll get you the next video. Thank you.