LET'S GET MOVING! {the tutorial for making animated gifs that i promised... and the first "moving pictures" link-up challenge}

{{{...a small UPDATE...}}}

NOTE: if you have photoshop version cs5 or later {i now have 5, but had version 2 when i first wrote this},

see bottom of this post for a quicker easier way of saving your file out as an animated .gif file.

you'll still need to follow several of the steps in the first portion of this tutorial... such as the layering steps and those that explain using the animation palette in photoshop. but the saving out steps are simpler and fewer, so again... see bottom of post for that change.

original post starts here...

okay... here we go. i've never done a tutorial with screen captures and such. so i hope this is easy to follow. this was so much work to put together, but i had SO much fun doing it! it's a gorgeous, warm day here, but i managed to get in some tutorial-composing time while the little squirt was napping. so...

as promised, here are instructions for making an animated GIF {or .gif file} in Photoshop, using your own photos. keep in mind, i use Photoshop CS2, but the instructions should be the same for any version you may have. i am not familiar with Photoshop Elements, but i've heard the animation capabilities are more limited with that software. if you are wanting to make a somewhat basic animation, it should still be flexible enough to use... and i would think the steps are similar.

well, without further ado...

actually, before i get into the technical specifics, here are some tips for setting up your shots that you will use in your animation. like i did for my dinosaur animation, it's a good idea to anchor your camera {using a tripod or by setting it on a sturdy surface} so that it does not move from shot to shot. that will give your animation a more realistic effect. sometimes, however, you may want your camera to move with you as you take the shots... to create a moving effect of not just the subject in the photos, but of the photographer {or viewer} too. in other words, if you want your viewer to have a sense of being fixed while the subject is moving, keep your camera fixed {which will make the moving subject more fluid}. but if you want the viewer to have a sense that they are moving as well as the subject in the photos, let the camera move around as you take the various shots for the animation.

to illustrate, see below...

this "flying bird mobile" animation i made is an example of when my camera {or myself} was not fixed in one place... i moved slightly between each shot. the subject {in this case, birds} was moving as well.

in this "flickering window blurry sunlight bokeh" animation, i and my camera were fixed so that the only movement in the animation is the subject {the wind-blown leaves that were creating ever-changing positions of filtered sunlight, and thus, ever-moving bokeh}.

•  •  •

okay...  so now for the technical stuff. these steps are based on the assumption that you have a working knowledge of how Photoshop layers work... and the Photoshop software in general. if you don't yet know layers, e-mail me, and i'd be happy to reply to try to help you better understand the functionality of layers.

JUST TO WARN YOU... this is long. but it's really VERY simple. don't let the length of my tutorial scare you off. some of these steps are explained in great detail, as i don't know the knowledge level of all who will read here, and i want to include as much as i can for any readers who might not be as familiar with Photoshop.

if you are feeling intimidated by making one of these for the first time, start small... make a short animation that has only three frames... or even just two {like an eye winking... one photo with the eyelid open and one with it shut}. as a general rule of thumb, the number of frames you want in your animation is the number of shots you want to take with your camera. so if you want a short simple animation, take three pictures. you will then combine those three images in photoshop by following these steps...

~one~

open the photo that you want to be your last frame in the animation... the one that you want to be seen at the end of the loop. {if you choose to have your animation continuously replaying, it won't technically be the last image, as all the images will keep playing on a loop, giving no apparent start or end. but you will be able to change the amount of time that each frame is seen in the animation, so you can give the illusion that it is the last frame by choosing a longer frame time for that last image... we'll get to that in a bit.}

anyway, in the case of my animation from yesterday, i wanted this shot to be the last frame in my animation...

so that is the image i opened first and used as my base for building the animation {or, the image that i built the other layers on top of}.

~two~

open all the other images that you want to use for the animation. {it may be easiest to open them one at a time, working backwards in the order you want them to appear.} just as you opened the image for the last frame first, you next want to open the photo that will be your second-to-last frame, etc.

with that next file open, select the entire image, or "Select All" {apple-A or alt-A} and "Copy" {apple-C or alt-C}. then, go back to your base file {the one you opened first} and "Paste" {apple-V or alt-V} that image you just made a copy of. this will now become a new layer in your original file, appearing in the layers palette right above the base layer.

keep doing this with each of the images you want to appear in your animation. each time you paste a new layer made from these other photo files onto your first {base} image, the new layer will get added to the top in the layers palette. each one automatically gets named by number {"Layer 1", "Layer 2"...} chronologically in the order you that paste them. but as each new layer appears at the top of the layers palette, your layer numbers will be ordered from the highest {or newest} at the top, down to the lowest {or oldest} at the bottom. the original file you opened {which is your last frame image} will be on what is called "Background" {your base layer}. 

as you see above, i have all four layers {or frames} now in the file. with all layers turned on, what you would see in the file's image window is the top-most layer {which i added last and which will show first when the animation is playing}.

you can change your "Background" base layer name to "Layer 0" if you want... just so it is less confusing and it matches the naming convention of the other layers. actually, you can change any layer name to whatever you want. but for simplicity, i would just rename the base layer {"Background"} to be like the other layer names. just keep this in mind... the higher the layer position, the higher the number in the name. the lower the layer number {and position}, the later the frame appears in the animation. {or, the higher the number and position of a layer, the sooner it appears in the animation.}

i know that sounds like a lot of explanation, but i wanted to drive that home, because it might seem like it makes more sense to choose the image that you want to appear first in your animation as you base image, and then go in that order from there. but if you do that, your animation will play in a backwards order. and it might seem counterintuitive for your earlier animation frames to have higher layer numbers. but if you start renaming all the layers, it can get confusing, especially if you have several. you could also move layers around... but again, it could get rather messy if you do that. i'm trying to limit the steps and keep it as simple as possible. so i think it's best to just let Photoshop number them as you add them and leave them as is.

okay... that's the longest part of the my tutorial. thanks for hanging in there! i promise... from here out, it will be more brief. bam, bam, bam. *wink*

~three~

after you have added all the images you want in your animation as layers onto your base image in reverse order, go to the "Window" menu and choose "Animation" to bring up the animation palette.

in the animation palette, click on the little arrow in the top right corner of the palette box and select "Make Frames From Layers".

this will automatically make a frame for each layer in your file, putting the frames in the same order from beginning to end as the layers are from top to bottom. so your top layer {with the highest number in its name} will be your first frame, and your lowest layer, both in number and position in the Layers palette {which should be your base layer and was originally called "Background"}, will be your last frame.

now that all your frames are added in the correct order, you can choose how much time you want to allocate to each one. click on the down-arrow that is on the lower right corner of each frame and choose how many seconds you want to assign it. 

if you want to assign a number that is not shown, choose "Other" and type in the amount you want. 

if you want all frames {or more than one frame} to have the same amount of view time, hold the shift key down and click each frame you want to assign a global amount to. then click that same arrow on any one of the frames you have selected and assign the time, which will take effect on all highlighted {or selected} frames. 

if you want the animation to appear as one continuous loop with no apparent beginning or end, assign the same amount of time to all frames. if you want the animation to have an obvious beginning or end {like what you see with dino making his apprehensive entrance below}, make the view time of your first and last frames a little longer. {here, i put a longer time on the second frame to create a pause... making it appear as if the dinosaur stopped to check and see if the coast is clear before he crosses. just one example of the ways you can get creative and have fun with it.} 

if you're not sure how much time to give your frames, just experiment. you can always change it. and you can keep testing your experimenting by pushing the play button in the animation palette. 

if it doesn't look right when you test it, keep experimenting.

~four~

when you have it the way you want it, you are ready to save the layered Photoshop .psd file as a .gif file. {don't forget to save your layered file as a .psd file first, though... so you have the original to go back to if you want to make changes.}

as shown in the screen capture above, click on the "File" menu and choose "Edit in ImageReady". this will open your layered file in ImageReady {a sub-application that is bundled with Photoshop that allows you to save images that are optimized, or ready, for the web}. it's important to export to .gif this way, rather than exporting out of Photoshop. i tried doing it right from the Photoshop Save-As menu, and i got undesirable results... it changed the quality of the image and things got all wacky. {of course, i may not have been doing it correctly, but i figure, if it works out of ImageReady, i'll stick with it.}

just like in Photoshop, you can change your image size in ImageReady to be the size you want it to appear in your blog post. 

i make all my images, animations or videos to be 640 pixels wide in my posts, so that they are the same width as my text column. but as you may have different specs for your blog page, you will want to change your image width accordingly.

keep in mind, all the steps i described prior to bringing the file into ImageReady {the steps done in Photoshop} can also be done in ImageReady, as you have all the same menus and palettes... just like you can change your image size in Photoshop first {before you bring it into ImageReady}. but i have found that this step sequence works best for me.

now that you have changed your image size to the desired amount for your post, you are ready to save it as a .gif file. click on the "File" menu and choose "Save Optimized As..." which will bring up the "Save Optimized As" window. 

there, you will name the file how you want it and choose the settings shown below. 

then, just click save.

voila!... you have an animated gif!

you can't upload .gif files into flickr, so adding it to your blog post will require that you upload the animation gif directly from the drive that you saved it to.

•  •  •

i know that was long! sorry 'bout that. i tend to be overly-thorough sometimes. but i do so with the thought that there might be some who are less familiar with the software than others and need more detailed explanation.

i hope it all makes sense. again, if something does not seem clear and you want further explanation, leave a comment with your question or e-mail me. i'd be happy to help you figure it out. also, if i gave some bad information inadvertently, please let me know so i can correct it. {thanks!}

okay... now for those of you who don't have photoshop... before i realized i could make a good-quality .gif file in photoshop, i was using this website to make mine. it's very simple and user-friendly, as all you have to do is upload the photos you want in your animation {in the order you want them to appear} and click "Create animation". but you are limited to ten frames and to a less-than-high-quality size/resolution for your animation. so you may want to invest in a software that allows you to make them yourself.

if you use Elements, here is a very basic set of instructions on how to make an animated gif. 

well, thank you for your patience and diligence if you read this whole tutorial. hopefully i got it posted in time for you to be able to read the whole thing AND still have time to watch the celebrity apprentice tonight. *wink*

tomorrow morning, i'll post a new "moving picture" with a button that you can grab to put in your post, as well as a button for you to link-up if you are feeling ambitious enough to join in the fun and make one too. i know mondays can be busy, so i'll leave it open all week for anyone to participate as they get to it. communities like that are fun... they are a great way to discover new blogs and let others discover yours. i've made many new friends via the link-up parties that i have participated in elsewhere. i hope you'll join in! even if not this week, there will be more opportunities, as i'll do it again each monday that follows.

i hope your weekend was great! 

now let's get those photos moving!

•  •  •

one small ***UPDATE*** ...thanks to lissa for her comment about the most recent version of Photoshop {CS5}. she wrote...

"i use Photoshop CS5 and it does not have ImageReady,  

but you can go to 'File' and choose 'Save for Web & Devices...' as gif."

good to know! {see? i told you my computer and software are archaic!} thank you, lissa!