Log in

Previous Entry | Next Entry

How to make a coloured, animated gif in Photoshop CS3 (ETA: I use Extended version of PS CS 3) out of an actual video clip (no screencaps needed).

From a video (Criminal Minds, 1x10) to t h i s and

This tutorial includes: cropping, colouring, rendering, minimizing and converting a video to a gif in a handful of steps.

Beware: Large graphics behind the cut.

1st step: prepare your video clip

In Photoshop you can open almost every video format as long as your computer has the right codecs installed. Personally, I can't use avi files (Photoshop and Quicktime work together, and my QT can't play avi), so I use two other programmes, first: to capture the video sequence and second: to convert it to mp4/mov.

Software (freeware) I use: The KM Player, XMedia Recode, K-Lite Codec Pack

Basically you don't actually need to capture the video sequence, because it doesn't make much difference to PS CS3 how long the video file itself is, but it's easier for the cutting process. You can also use the Windows Movie Maker or the program that comes with your Apple computer to do this.

2nd step: crop, colour, shorten the video

Photoshop lets you colour, resize, shorten, crop, etc. an entire video. It deals with a clip like with normal screencap layers. Either drag and drop your video file into Photoshop or go to File -> Open. Go to Window and click on animation for the animation/timeline tab. This will let you play and shorten the video file in Photoshop.

1. To shorten the video length, you have to move the blue/gray stripes to mark beginning and end of animation.

2. Crop the video to your prefered size. I make my animations around 320px-180px. Use the normal crop tool (Shift + C) to do this. A Photoshop Alert will pop up that will ask you to convert the video to a smart object, click convert.

3. The next step is colouring the video. Everything you do will be shown on the entire animation. This saves you *tons* of time, because you don't have to do it on every frame.

The colouring for my video:
a. To lighten I copied the base layer and set it to Screen. Another Timeline will be added to the Animation tab. This will happen everytime you create a new layer.
b. Levels: RGB - 14 ; 1,08 ; 240
c. Color Fill: #e3c311 on Soft Light (Opacity: 40% ; Fill: 36 %)
d. Colour Balance: Shadows: +1 -4 +13 ; Midtones: -4 -5 -12 ; Highlights: +1 -1 +3
e. Surface Blur (Radius: 1, Threshold: 2) on the two video layers
f. Sharpen the faces which most likely will be a bit blurry by now. Use the Unsharp Mask (about 30%, Radius: 1, Threshold: 2) on the base layer.

4. There are two ways to process now. You either go to File - Save to Web & Devices (which will save the file on spot as a gif with video speed and frame number) OR render the file to a fully working Quicktime mov (or avi, mp4, etc.). Do the latter if you want to use the new video for an animated icon or if you want to add more frames (or delete some for that matter which will make the file size *smaller*) and change the speed.

Since I still have plans for this gif, let's do the second step and render the video. Go to File -> Export -> Render Video and a new window will open. You have a few different options from which you can choose, but I stayed with the original settings. Click render.

3rd step: the animated gif

Open the new mov file you've created of the now coloured/cropped vid, go to File -> Import -> Video Frames to Layers. I usually choose Limit to every 2 Frames which is good enough for a standard gif. Make sure that Make Frame Animation is checked and click OK. Usually the set speed of 0,04 seconds is too fast, to change it hold the shift key from the first frame to the last to hightlight them all in the Animation tab and click on the number. A more natural speed is around 0,08 seconds usually.

You can delete layers or add layers now as much as you want. How to make an icon out of this I will explain later. Now go to File - Save for Web & Devices and a new window will open that gives you options to make your gif smaller or if it's an animated icon to fit it LJ standards.

My settings for this animation:

Make sure the loop options is set on Forever. And voilà, you're done. This will take no longer than 15 minutes once you've done it a few times. I am sure that it's possible to do this with older versions of Photoshop and ImageReady because I remember that a friend used to make animations using mov files in PS/IR 7.


Extra: How to make an animated icon

Repeat everything up to point 4 of step 2. The rest will be done the old fashioned way.

Prepare your animation background (and text). I used a texture by chaoticfae and a text layer saying *touch*. Now Import the mov as Frames to Layers and either skip a few layers or use only the moment you want to animate (for me it's the touch).

Crop the layers the way you want them. I used the black background of the polaroid as my my cropping sample. As you can see, when ever you open up a movie to layers file, all layers are listed. Hold shift to highlight them all and drag them onto the animation background you've prepared.

Now you will only see the base showing up in your Animation tab. Best is, if you set the speed for the animation now, it will be copied onto the next frame. Click on the first layer and make it visible (the eye). Duplicate the selected frame (image) and in your layers palette choose the next layer to make it visible. Repeat this step until you have enough frames for your gif.

Now basically you can repeat the Third Step of this tutorial. Go to File -> Save for Web & Devices and change the settings to fit lj standard (40kb). This will likely tune the quality of the gif down, so keep in mind not to use too many layers.


(I know the gif is rather ugly, but it's good enough to show the process xD)

Thanks for reading! If you have questions, let me know and I'll try to answer them.

comment, please * resources * friend my icon community stormfronticons


( 48 comments — Leave a comment )
Aug. 9th, 2009 11:41 pm (UTC)
very useful....thanks.

but from the userinfo:
Always use an LJ-cut when posting: any image larger than 400 pixels on any side, more than five 100x100 images, an animation sample,...
your example not being under a cut will kill people on dialup (especially if they watch the comms where you've cross-posted).
Aug. 9th, 2009 11:44 pm (UTC)
you think it's better now?
Aug. 10th, 2009 12:23 am (UTC)
dial-uppers will thank you. :)
Aug. 10th, 2009 12:26 am (UTC)
hehe, good :) thanks for pointing it out btw!
Aug. 9th, 2009 11:44 pm (UTC)
Thank you SO much. I've been tinkering with video for the past month, and haven't fully gotten the hang of it. This will be very helpful, I'm sure. Mem-ed.
Aug. 9th, 2009 11:51 pm (UTC)
Thank you for this!
Aug. 10th, 2009 12:30 am (UTC)
Dude soooo totally memming this. I already knew how to do the animation but you totally helped me with the colouring. I never knew it could be done that way.

Question though, how do I do step E in the colouring bit? It says on both layers, just wondering how I would do that on both layers?
Aug. 10th, 2009 06:53 am (UTC)
well, you do it on both video layers (each). It's Filter -> Blur -> Surface Blur.
Aug. 10th, 2009 12:05 pm (UTC)
Aug. 10th, 2009 12:39 am (UTC)
Amazing tutorial! One question, though: is it necessary to install all three of the codecs you linked to in order to make it work?
Aug. 10th, 2009 06:55 am (UTC)
it depends on which video format you use. Like I said I can't get avi to work in my Photoshop because my QT doesn't play avi (video wise). If you use mov or mp4 or wmv, it should work normally.
Aug. 10th, 2009 12:43 am (UTC)
Thanks so much for this tutorial!
Aug. 10th, 2009 06:06 am (UTC)
Meming, definitely gonna try it out when I get back from vacation.
Love CM as well.
Aug. 10th, 2009 05:03 pm (UTC)
Question; this seems to happen everytime I try to make animation's, when I open up my video, you know import it into photoshop my layers are always blank, am I doing it wrong? Or what, this even happened when my friend tried to help me but she uses cs4 and I have cs3.
Aug. 10th, 2009 05:14 pm (UTC)
what kind of video format are you trying to open/import to layers? If it's an avi, it might be the same problem I have with it, that PS cannot recognise it because Quicktime can't.
Aug. 10th, 2009 05:19 pm (UTC)
I converted it to an mp4 format, what format would you recommend?
Aug. 10th, 2009 05:26 pm (UTC)
mp4 isn't possible to import from frames to layers. But you can try and change the ending to mov (without converting) and open it again. You do have the mpeg-4 codec installed on your computer, right?
Aug. 15th, 2009 01:38 pm (UTC)
i downloaded the Xmedia recode, and when i try and convert my AVI files to Movs i get the following error;

Wrong Video Settings, do you know what im doing wrong, because i dont know any other good Avi > Mov free converters? thanks, memed your tutorial too :)
Aug. 15th, 2009 02:25 pm (UTC)
you could try to convert it to mp4 (Ipod G4) and then just change the ending to mov.
Aug. 18th, 2009 01:29 am (UTC)
How many layers is a good number? Because every time I try and do it lj always says that it is too big.
Aug. 18th, 2009 05:54 am (UTC)
10 maybe? did you try to turn down the picture quality?
Aug. 19th, 2009 03:23 am (UTC)
Thank you. This is really amazing.

I was able to use avi files with CS3 on my mac since I have Perian installed which lets quicktime play alot of extra formats. I couldn't use avi files with CS4 on Windows, but I was able to use mp4, mov, etc.

Great result, thanks!
Aug. 27th, 2009 05:09 am (UTC)
Great tutorial! I didn't know you could edit the video prior to making it animated!

One question though, when I import the video into PS CS3... it's blank. Any suggestions? I've tried .avi/.mov/.mp4
Aug. 27th, 2009 05:29 am (UTC)
Okay, maybe it's just the KMPlayer encoding it wrong. I used media player instead and it worked in PS. The speed is slower though. Oh, computers make me angry. :)
Aug. 27th, 2009 06:05 am (UTC)
that's weird if you coded with the KM Player, it should usually work (does it for me). You don't import though, just drag & drop. AVI probably doesn't work because of the same problem I have with it.

(oh btw, try to encode the video with something else that isn't KM Player, I mean record the section of the video, save it to avi and then try to encode it with xmedia recode or ojo converter etc.)

Edited at 2009-08-27 06:07 am (UTC)
Aug. 29th, 2009 03:44 pm (UTC)
THANK YOU SO MUCH. I had no idea it was that simple to make animations! You're a champ!
Sep. 20th, 2009 08:36 pm (UTC)
i've dled all three freewares, yet i can't just drag and drop/open a video like in step one. an message box reading 'could not compute request because it is not the right kind of document' keeps popping up. help?
Sep. 20th, 2009 08:40 pm (UTC)
have you tried it with simply "opening" the file via File - Open? And which kind of video format do you use?
Sep. 20th, 2009 09:25 pm (UTC)
i have, and it's a .mov
Sep. 20th, 2009 09:26 pm (UTC)
can you open it now? Movs you can definitely import as layers.
Sep. 20th, 2009 09:58 pm (UTC)
nope. but yea, i can do the import>videotolayers.
Sep. 20th, 2009 10:01 pm (UTC)
hmmm this is weird, you should be able to do it. What Photoshop version do you use? It has to be PSCS3 onwards, otherwise you have to open it in Imageready.
Sep. 20th, 2009 11:04 pm (UTC)
pscs4 - i'm pretty sure the animation aspect is the same as cs3 ....
Sep. 21st, 2009 06:50 am (UTC)
I checked the preferences but couldn't find a video option. Hmm. I don't know why you can't open it :/

ETA: It might be that you can't open it, but I can because I use PSCS3 Extended.

Edited at 2009-09-23 01:43 pm (UTC)
Sep. 23rd, 2009 01:14 am (UTC)
do you use PSCS3 Extended? Cuz I can't open the timeline, only frames, in the normal PSCS3. ;_;
Sep. 23rd, 2009 01:43 pm (UTC)
Yes. I guess that explains why it works some people and not for others :/
Sep. 23rd, 2009 08:03 pm (UTC)
My cs3 has stopped rendering the videos as it should. It's supposed to be making them into mov files but it's just making these useless blank 'file' files. I can't do anything with them. It used to work just fine but now it's not and I don't know what to do since this is making it impossible to get to the 'frames into layers' phase.
Sep. 23rd, 2009 08:11 pm (UTC)
ok, I can't really help you with that since I don't know if you changed a setting. But you tried to render it to something else than mov?

Image and video hosting by TinyPic
Sep. 23rd, 2009 08:18 pm (UTC)
Yep, the exact same settings and it refuses to render to the correct format. Just weird, useless blank "files"
Sep. 23rd, 2009 08:35 pm (UTC)
you tried to render it to a different format then?
Sep. 23rd, 2009 08:41 pm (UTC)
Yes, I tried to render to a couple formats just to see if it only wouldn't do it to a .mov, and it won't render any video. I tried using different files to render video from and it's still nothing.

Edited at 2009-09-23 08:42 pm (UTC)
Sep. 23rd, 2009 08:53 pm (UTC)
hmm I have no idea what could be wrong, sorry :/ Especially since you said it used to work at some point. Is it a codec problem maybe? Like when I try to open avis and only get blanks?
Sep. 23rd, 2009 09:03 pm (UTC)
That's the only thing I can think of too, maybe I'll mess around with that a bit. Thanks for your help anyway though.

*Edit* Fixed the problem, gah it was my own stupidity. But thank you so much for this tutorial in the first place, it has saved my sanity after being so used to working Imageready.

Edited at 2009-09-23 09:43 pm (UTC)
Sep. 30th, 2009 02:31 am (UTC)
nice tutorial ^^
I'll try it :D and thanks 4 sharing
Mar. 24th, 2010 03:32 pm (UTC)
This looks really great and since I want to be able to make sidebar animations I thought I'd try this. I managed to open my mp4 video in ps and select the part of the video I want to use. But the cropping part just won't work. :-(
I press shift+c and the cropping tool is selected. But I simply can't use it like I normally do with images. I can't mark any part of the video to crop. Am I doing something wrong? I never did any animations in ps before. Maybe it's just something totally simple that I'm missing...
I use pscs3 by the way. ;-)
Mar. 24th, 2010 03:36 pm (UTC)
I'm so sorry to have bothered you. I trie dthis several times, but nothing happened. Then, after I posted my comment here and went back to ps the cropping tool suddenly worked. I literally did nothing besides minimizing the program. But well, at least it works now. :-))
Mar. 24th, 2010 04:18 pm (UTC)
Yay, it all worked out now! :-) Thank you sooooo much for this tutorial! You're awesome!

Incase you want to see what I made: http://www.charming.aislin.net/drwho/amy11-cac.gif
Mar. 26th, 2010 04:08 am (UTC)
After managing the animation part I now wanted to try the extra. I however have a problem. When I pull all the layers onto my prepared base I have a lot of layers in the new image, but none of them is a frame in the animation tab. No matter if I make a layer visible or it just isn't a frame. :-(

I love the Criminal Minds icon by the way. :-)
( 48 comments — Leave a comment )

Latest Month

February 2017


Powered by LiveJournal.com