Saturday, October 20, 2007

How to make the cow moo

Ah well, looks like I peeked everyones interest in how I made that animation on the cow 2 posts down! Well, as I mentioned about a month and a half ago, I've been struggling with the Mac switch over thing, but there is one good thing about the switch, and since I'm learning new stuff, I've dived right in and really learned new stuff. Especially in photoshop. And all my pc user friends out there, you can do this on the PC too. But you have to have Adobe Photoshop.

I started out with 2 photos:

Then I cropped them so they were exactly the same size.

Ok, now when you're cropping these images, it's important to pay attention to the details. You should be somewhat familiar with photoshop, too. That'll help. So this is where it can get a little complicated. If the mere mention of photoshop turns you to mush, you can fast forward to the end of this post for a link to Adobe's video tutorial. Visuals always help me and I wouldn't have been able to do this without the tutorial.

Now back to cropping your photos. In Photoshop (I used CS3), create a new document that's the same size as your original photos and add both of them in as 2 layers. I had the silent cow as my bottom layer and the mooing cow as the top layer. I made the mooing cow about 20% transparent and moved her around till she was exactly over the silent cow. Once I was happy with how it lined up, I cropped both of them then saved each layer in it's own document. Are you still with me?

So now I have 2 separate images but they match perfectly.

And here is where I consulted the tutorial on
Working with Image Sequences

follow those directions.
I had the silent cow play for .5 sec and the mooing cow play for 1 sec and had it loop forever.

Now when you're ready to save, make sure to resize the image and "Save for Web and Devices" in Photoshop and (this is important) save as a GIF rather than a jpg. jpgs do not animate. I used the GIF 128 Dithered option for the best image quality. In that save for web window, you'll notice there are play options on the bottom right and after you've selected to save as a GIF. Click on play so you'll have a preview of what it will look like.

So hurray! You've created your animated GIF!! Bravo!
(It took me nearly an hour so try to remain calm and have a lot of patience).

Think you're finished and can just pop it onto your blog? Ah, well, blogger wouldn't let it be so simple now would they? Here's the dealio with MY blogger. I download all my images to an FTP sight, that's why my blog is: rather than I use a blogger template but some things are just a little different. So in regular blogspot, I think you will need to post the image so it doesn't resize on your front page: ie it stays the original size that you saved it as. That might mean that you have to save it smaller, like your maximum side should be no bigger than 600 pixels - but don't quote me on that.

So, there you go! A complete rambling and probably nonsensical How To Animate. I totally apologize for how i give instructions. I'm certain i made it sound more complicated than it really is, so those of you who know photoshop really should just click on the tutorial. It's fun and the effect is worth it!


rosemary said...

You lost me at photoshop and're so smart. I'll just look at your greatness.

Ragged Around the Edges said...

My head is spinning at the technology. You are tooooo smart. Love the cow gif. . . and your talent.

Lilli & Nevada said...

That sounds good, but way past my tech of trying to do things like that, Seems like it would take a long time to do this, i will just enjoy yours, clever girl.

Nan said...

My daughter-in-law's mom and I are determined to learn photoshop this winter.

Thank you so much for all the great info.

phinner said...

uh, yeah.

now we need a photography tutorial, Teach!

paris parfait said...

How clever you are! I still have not had time to sit down with Photoshop and figure out all its capabilities. One day, I'll get there! xo