How To: Create an Animated Video Forum Signature in Photoshop

Posted 8 months ago at 3:02 pm. 4 comments

Did you know Photoshop can take a video and make an animated image out of it? Yes, it can! Photoshop has the ability to import a video file and convert each frame into a layer and automatically animate it, heres how:

1. Find the video file you would like to use. If you only want to use a portion of it, don’t worry, photoshop will let you select that later.
2. In Photoshop CS3, go to file->Import->Video Frames to Layers…
3. Choose the video file you would like to use. (I’m going to use part of the MacBook Air commercial)
4. When you select which part of the video to use, you hole down the shift key and drag the playback marker thingy from where to start and where to finish. Keep the video short. Most video is 30FPS. We are only going to use every other frame. Limit yourself to around 10 second, which would be around 150 layers in photoshop, but more keep it as short as possible to keep the size of the file small.
5. You should resize the image (Image->Image Size) to whichever size you want the video to play. Remember, the smaller the better again. (I used 120 for the height, and let it automatically find the corresponding width by having constrain proportions checked).
6. Now that you have the video resized, you need extend the canvas for the rest of the signature. Go to Image>Canvas size and change it to the size you want your final image to be. (I used 500×130)
7. Now, select all of the layers. (Tip: Click layer 1, then shift-click the last layer), and select all of the frames (same tip), and move the video where you would like it placed. If you don’t select them first, the animation will get messed up.
8. Make sure all of the animation frames are selected when you move everything around. If you don’t, you will manually have to nudge it back!
9. Make a new layer under Layer one, and make you background on it.
10. Make a new layer on the top of the stacks, and make the image of your signature on it.
11. Add text on the top.
12. Make the last frame longer so it doesn’t seem like an infinite loop.
13. When you are done, File->Save for web & devices.
14. A window pops up. Save as .gif. Change the settings to get the lowest file size possible for an acceptable quality.

 Now, clearly, I didn’t put too much time making this look good. I just placed video and text. However, the point of this tutorial wasn’t to make as good a signature as I could, but to show how to incorporate video.It is hard though. I only had 60 video frames, and it came out to 200 and some odd kb. I hope this was informative and you learned how to add video to a photosohp document!