we left off in chapter one having finished this graphic, and now we are going to animate it.




to do this, we need to have layers.  so i'm going to right click on "layer 0" and select "duplicate layer."  will do this 5 times...that means my animation will have 5 frames.  keep in mind that animating something in photoshop is very basic, and nothing like a GIF animation program.  you can't preview your animation until you go to save it, and i haven't been able to even get THAT function to work.  

so mostly working an animation in photoshop is like doing something by hand when there are lots of machines out there that can whip them out in a fraction of the time.  and any special effects you want to apply to your animation, you have to do yourself.  

therefore the only animation i've found to be fairly workable in photoshop is the changing of color, making a flashing light sort of effect.  so anyway, we've got our five layers going here....




notice i have the top layer highlighted.  this is the one we are going to change first.   so click on ENHANCE and from the drop down menu select "adjust color" and then "adjust hue/saturation..."




so i've changed the color on my top layer, and now i will need to go to the next one.  so i click on the second layer to highlight it, but that doesn't mean it will be showing because i still have the top layer there over it.  so in order to see the second layer, i am going to click on the eye symbol of that first layer to make it go away for now.  

then i will change the colors on the second layer to something different than the first....



notice there that i'm also playing with the saturation and lightness levels.  figure what the heck.....plus going from a dark to light will create more of a flashing effect.

so we go through all our layers in the same way until each frame is a different color.  



now i'm not too happy with that fourth color, but what other options do i have?  under color adjust you will find other color-changing tools.  the one i'm going to use is "color variations."



a window will pop up that looks like this....



just looking at it, i think the green increase would be kind of nice.....look to the left there and you will see settings you can use to toggle the results.  many times i will set the number 2 one, "adjust color intensity" to a lower level.  that makes the increments of change LESS so there is more of a gradual shift.  this can be better when you are really having to fine-tune something.  

i usually just leave the number one setting on midtones, but differences you would see are pretty self-explanitory there.

so i'm going to increase my green, maybe darken it and play with this until i have something that seems to work....



the lighting on that fifth layer looks off to me, so i'll click on the layer to highlight it and click on the eye symbol from the layer above it....



then click on ENHANCE again, but this time selecting "adjust lighting" and then "brightness/contrast"

you will see this window.....simply adjust the settings to what looks good to you.  




much of this takes what i call "an artist's eye."  some have it, and some don't.  if you honestly believe you are one of those that "don't"....that doesn't mean you can't do a project like this.  all you do, instead of playing with the coloring, is adjust the hue levels at even numerical increments for each frame.  



of course, i have to be different, and just play with the damn thing for the hell of it.  it's sort of like opening up a present you have no idea what it will be.  you may be pleasantly surprised by your creation, or you may find yourself gagging....sometimes laughing at the results.  there's not a lot you can do with flashing colors, but you never know if you're going to stumble on a combination that leaves you with a "WOW! how the hell did i do that?!"

anyway, we're now ready to animate our picture.  but first, i think i'm going to adjust the size.  remember how we started with an 800x600, so this thing is pretty big.  and now, it is 5 times that size.  remember that when you animate.  why you will notice some animations take a very long time to load, even on a highspeed connection.  and we don't want this thing to be boggy and a pain in the ass.  

so we go to IMAGE, click on that and select "resize" and then "image size."




you will get a window that looks like this:



you look at the settings there, and it tells us the current size of our picture. we are going to replace the 800 with a 400.  notice the check boxes toward the bottom there.....with all those checked, that means that i don't have to worry about what number to replaced the 600 with.  it will do that automatically to keep the proportions.  

if at some point, you wish to change only the height or only the width, or basically control both, then just UNCHECK the top 2 boxes.


ok, now with it resized, i really AM ready to animate this puppy.  so we go to FILE and then "save for web"




this is the screen you will see pop up....



you want to check the ANIMATE button.....



for all intents and purposes, you don't need to change anything else, and then can hit "OK."   but there are a couple things that will make a difference in how your animation comes out.  you have colors, dither, and matte there on the top right to select from.  it's best to have matte set to none, unless you want to add a background color.  

at the bottom of the screen you will see the settings for the animation SPEED.  the default setting is 0.2, which is a pretty good rate.  if you want it to go twice as fast, you change it to 0.1  etc....remember these are percentage points, so the faster you want it to go, the smaller the number.

after you hit OK....you will get a pop up asking you to name your picture.  i am going to call this "blink" and here is the final result:



and just to let you know, you can OPEN UP animations in photoshop.  say you found an animated picture on the web that you really like, but it's too big for what you need.  you can open the animation up in photoshop, resize it the same as we went through here, and re-save it.  you can also remove some of the frames if you feel it is too big and they aren't needed....you can change their colors....basically do whatever you want with them and then re-save the animation.  
i suppose as a responsible person, i should caution about "borrowing" images from the internet at this point.  truth is, if it doesn't have a copyright symbol on it, i don't sweat it.  

so that's one thing to keep in mind when you do original creations.....you'll want to put a copyright on them, at least if you feel they are worth it.  and that involves using the lettering function in photoshop.  so the next lesson will be on lettering and all that you can do with that.....



  










  

  
back to main tutorial page