We pride ourselves on having the friendliest
and most welcoming forums for moms and moms to be! Please take a moment
for free so you can be a part of our growing community of mothers.
If you have any problems registering please drop an email to firstname.lastname@example.org.
Our community is moderated by our moderation team so you won't see spam or offensive messages posted on our forums. Each of our message boards is hosted by JustMommies hosts, whose names are listed at the top each board. We hope you find our message boards friendly, helpful, and fun to be on!
In this tutorial, you're going to learn how to incorporate a free animated GIF file that you find online into one of your siggies. Your end product will look something like this:
This tutorial will work in CS4 and probably in all of the other versions of CS. I'm not sure about PSE. I think most of the steps will be about the same, except for the very last step where you animate.
First, set up your siggy the way you normally would. Incorporate elements, text, and whatever (all except for the GIF file). At this stage, my siggy looks like this:
Next, search online for an animated GIF that you want to incorporate into your siggy. There are lots of good sites where you can do this. Here are a few:
For this siggy, I just did a Google search for "animated rose GIF." Once I found one that I liked, I saved it on to my computer. Do this by right-clicking on the image and clicking 'Save As.' Save it somewhere that will be easily accessible, such as wherever you keep your scrap kits.
Now, I go back to CS4 and click on File ==> Import ==> Video Frame to Layers.
A load file screen should pop up. Go to the drop-down arrow at the top and open whatever folder you have your GIF file saved in. I had saved mine in the same folder where I saved the rough draft of my siggy. No files will be showing up yet, and that's okay.
Now, go under "File Name" and just type an asterisk ( * ). Then hit enter. What this does is show ALL the files of all types that you have saved in this folder.
I opened my GIF file by double-clicking on it, and then I get a window that says "Import Video to Layers." I leave the settings just as they are and hit enter.
Now I have two files open in CS4, which are my original siggy + the animated GIF. The animated GIF has been broken down into layers. Right now, they're just called Layer 1, Layer 2, etc. I rename them each as Rose 1, Rose 2, etc. to avoid confusion.
For most GIF files, when you open them, each layer will be on a white background (or perhaps another color) instead of on a transparent one. We need to fix this. The easiest way to remove the background is to just select the white part using the quick select tool and then hit 'Delete.' Later, I'll use a soft eraser brush to clean up the edges if they come out looking rough. Do this for each layer.
Move your two files back into windows again by clicking Window ==> Arrange ==> Float All in Windows.
Now, hold down shift and select all of the layers in your GIF window at once. Drag and drop them all into your main siggy window.
Now you can finally close the GIF window. Move, resize, and change the order of your GIF layers (just like you would for any other element) until they look like you want them to look. Just make sure that whenever you move them or resize them you have ALL of them selected at the same time, so that they stay the same position and size relative to each other. I've moved mine to the middle of the siggy, behind the text, like this.
Open your animation Window by going to Window ==> Animation. There should be just one frame open. Make sure that in this one frame, the first layer of your GIF is visible and the others are all invisible.
Duplicate the frame by clicking on the little button that looks like a bent square.
In this next frame, make the first GIF layer invisible and the second GIF layer visible.
Continue the process until you have a frame for each of your GIF layers. Then, play with the timing for each frame by clicking on the drop down arrows for each frame and changing the length of time. You can preview the overall effect by clicking the play arrow at the bottom of the animation window.
Once you have everything the way you want it, go to File ==> Save for Web and Devices and save it as a GIF (not a JPEG). Then upload to Photobucket as usual!
Note that you can use this same basic process if you have, for example, a video of one of your kids, and you want to break the frames of the video up into different layers and use just a few of the layers to animate the siggy.
Hope that makes sense! Let me know if you have questions.
Thank you to the SSMC makers for my beautiful siggies!