Log in

No account? Create an account
20 May 2009 @ 04:01 am
How to make .gifs/animations using Photoshop cs4  
Here is one of the first ones I made, which we will also be learning how to make.

btw, sorry back the background in some of the images and ignore the time at the top. haha

you don't really need to read this part.
I got a macbook pro~ not too long ago and downloaded photoshop cs4 because I wanted something new.
But I was kinda bummed that it didn't come with imageready like cs2 had on my pc. I googled and learned you couldn't make .gifs on cs4 but you could on fireworks, I didn't want to download a whole new program just to make gifs. So I decided to explore cs4 but still no luck.
BUT then I saw this tutorial posted. It worked just fine but I didn't like having to make screencaps out of the videos I already ripped, then I explored a little more and I got it! haha I was pretty proud of myself.

First thing first is to find a movie file you want to open, so far I've opened avi, mov, and m4v with no problem, and I think those are the most common video file types? There is also wmv but I don't really see a lot of those anymore and didn't have any one my mac.
I decided to open up a clip from Paramore's dvd The Final Riot.

OH ALSO THIS IS IMPORTANT! make sure you have your animation strip thing open. Just do Windows > Animation and it should pop up on the bottom.
This is what my screen looks like:

the video was 961x553 so I decided to re-size it to 300x173(but the one I posted at the start is 200x115). There might be a pop-up about smart images or something, I just ignored it and said continue or ok, I checked the ignore box or whatever it says so it doesn't pop up for me anymore.
Image and video hosting by TinyPic
All nice and re-szied

Now we go down here:
Image and video hosting by TinyPic
click and drag this thing

to the right until you see the first frame of the clip you want to make into a gif
Image and video hosting by TinyPic
See where it is now?

Now we are going to click and drag this bay boy

over to the start of the arrow thing
like dis:

That is where the gif will start.

now take the arrow thing again and drag it to the right and stop at where you want your gif to end.

Then you will scroll to the end of the time line and see the another one of these but facing the other direction.

oh look, there it is!
drag that the same way you did with the first one.

Now once you are sure you got the start and finish were you want, go to: file > save for Web & Devices

this should pop up:

Wait for it to load(see the bar right above the preview button)

when it loads it shall look like diz~

MAKE SURE to click on the drop down options under "Animations" looping options: forever

I usually clicked preview to see how it looks in firefox and to make sure I got the timing right.

Click save and you're done!

I hope I made sense and didn't mess up! This is my first tutorial, haha

A few things I can't figure out is how to edit the time on each frame and how to edit already made gifs.
Current Music: Tegan and Sara - I Was Married | Powered by Last.fm
ai chanmana06 on May 20th, 2009 01:44 pm (UTC)
save to mems. thank for the tuts. ^^
Your mother: random; I hearthirachelwashere on May 21st, 2009 07:15 am (UTC)
ty :)
(no subject) - kongomorgo on August 23rd, 2009 08:59 pm (UTC) (Expand)
(no subject) - hirachelwashere on August 24th, 2009 04:22 am (UTC) (Expand)
monica mendes: dul ^^moni_kinha on May 20th, 2009 06:19 pm (UTC)
i don't have cs4 but adding to memories! thank you!!
Your mother: music; Adelehirachelwashere on May 21st, 2009 07:15 am (UTC)
thank you!
industrialness on May 20th, 2009 08:37 pm (UTC)
I have CS3 I wish it had a time indicator on it though.
Your mother: music; im a creephirachelwashere on May 21st, 2009 07:16 am (UTC)
mmhhh are you sure you dont? i just googled screencaps and one looks like it has it.
Tima: pic#88860935hikauae on May 20th, 2009 11:54 pm (UTC)
For me it didn't work with .avi files but with .mov files -.-'!!
Thanks for the tutorial! adding to memories for sure ^^.
Your mother: music; gaphirachelwashere on May 21st, 2009 07:17 am (UTC)
mh, thats wierd. i only tried on avi file so maybe i was just lucky? idk haha thank you though!
schlaggyschlaggy on May 24th, 2009 01:28 am (UTC)

You have made it so easy :)

I have CS2 and the time line appeared when the vid opened up...I have never even seen it there before ..LOL

Having trouble opening any avi vid tho, just get a white image, but I just opened an mpg fine. Saying that tho, it is not opening other mpgs ...temperamental thing!

Thanks again !!

schlaggyschlaggy on May 24th, 2009 04:30 am (UTC)
OOOps, I meant CS3.
(no subject) - hirachelwashere on May 24th, 2009 09:26 am (UTC) (Expand)
Syifa: sweetdoodlelove_vip on May 25th, 2009 12:52 pm (UTC)
umm, i've got a little problem DD:
I’m also using CS4 but when I open up the animation box, its timeline is only frames and not like yours. I mean yours says ‘ANIMATION (TIMELINE)’ while mine is ‘ANIMATION (FRAMES)’. You can drag your arrow to anywhere of the video where you want to make the gif while mine is only limited to like only 500 frames.
Take a look at mine: http://i41.tinypic.com/110f1j8.jpg
So is there any way that I can change my timeline to become like yours?
Your motherhirachelwashere on May 25th, 2009 06:54 pm (UTC)
if you move it up a little so its not locked can you see this thing?
sweetfranklin on May 28th, 2009 11:00 pm (UTC)
do you know how to compress a gif to put as an icon?
Your mother: movies; into the wildhirachelwashere on May 28th, 2009 11:59 pm (UTC)
(no subject) - sweetfranklin on May 29th, 2009 01:05 pm (UTC) (Expand)
Steady feet, don't fail me nowecarnation on August 4th, 2009 06:56 am (UTC)
Thank you so much for this tutorial. I bookmarked it a while ago and ended up using the one you linked to since the files (avi) I was using were just showing up white. Tonight I decided to try again and figured out that I just have to convert them to mp4s and it works lovely and is so much easier except for getting the exact, exact places but I can work on that. :D

Now I just need to figure out how to make a beautiful icon gif like the one I have.

Edited at 2009-08-04 06:59 am (UTC)
Your mother: music; and all we knowhirachelwashere on August 4th, 2009 05:23 pm (UTC)
thank you!
and yeah, i cant figure out how to make icons with out if looking fuzzy. :(
(Deleted comment)
Your mother: {paramore} prayhirachelwashere on August 15th, 2009 04:39 pm (UTC)
no problem!
Ellesuperelle07 on August 22nd, 2009 01:16 am (UTC)
you are an absolute ANGEL!
rheea_23 on August 26th, 2009 12:36 pm (UTC)
thank you veery much!! is the first time when i do icons and this because of you <333
god bless you
Dyah_bish_yah on September 6th, 2009 05:04 am (UTC)
This was helpful!
I get the AVI white box of death other people have mentioned as well.
violet_indianaviolet_indiana on September 11th, 2009 08:35 pm (UTC)
You officially rock.

I finally managed to make the perfect gif, and it's all thanks to you!
Not only that, I managed to make it my icon so I'm even happier.

Thanks so much!
mystrilliummystrillium on January 7th, 2010 02:33 am (UTC)
You helped me soo much!!! Thank-you!!!
carpenyxcarpenyx on February 16th, 2010 10:38 pm (UTC)
OMG, thank you so much! This made it so easy! :D