Tuesday, November 22, 2011

Making an animated .gif header part 1

So one of my blogger friends asked for a tutorial on how to make an animated gif header like the one i have on this blog. I figured since i did it once i should be able to whip up a tutorial of sorts for it. 

As a disclaimer, i am not a computer whiz. I just got photoshop {version C55.1} and I don't know how to do much so far. But i do know how to make animated gifs :) Another disclaimer, animated gifs only publish in 256 colors so it WILL be a little grainy. But i think it's still fun!

Whew! Is that enough disclaimers? Now on to the tutorial. First things first, open photoshop. Select New project. Set you project to 900 pixels width and 400 pixels height (or whatever you choose). Click OK.


Next {i forgot a picture for this step... but it's easy} Go to the window tab at the top and make sure Animation is checked. It opens the small grey box along the bottom of the screen.

Next, in C55.1 open mini bridge from the sidebar. Open the files and the pictures you want. INSTEAD of double clicking, drag the picture over you open project and place. To place up the check mark in the upper corner. {you can still move it, by selecting the layer your picture is in the "layers" bar... so don't fret too much}

When you have finished your first frame, go to the far right of the animation window and scroll up til you see New Frame. Select.


In the New Frame deselect the previous layers by clicking on the eye next to them in the layer toolbar.


Repeat placing pictures like you did on the last frame until you have the frame you like.


Make Another New Frame and place pictures again {do you get the picture? ;)} always remember to deselect the eyes to make the pictures from the previous frames disappear!


Below the frames in your Animation box you will see a "0 sec" this is the amount of time the selected frame will show. I set mine to "5.0" {you can choose any amount you want} Also, make sure it says "Forever" for the looping or else it will go through your animation once, and stop.

Now go to the FILE tab on the top of the screen. Scroll down until you see "Save for Web & Devices". Click.

You will see all the settings. I don't know what they all mean, but i have played around and found that i like the Dither at "75%". It loses a little bit of graininess at that resolution {or whatever Dither is}. Select SAVE.


Type in your title and hit Save! Voile! That was pretty easy, huh?!

I will show you how to upload it to your blog tomorrow! If you have any questions let me know! It was pretty fun to make! I am in love with Photoshop and can see Photos becoming a lot bigger part of my life! :) Thank you again Anonymous friend!

No comments:

Post a Comment