Search Engine

Custom Search

Monday, October 19, 2009

Animation in Photoshop Elements 3

Someone asked me for a blinkie about a month ago. I was painting the house at the time and told her I would do it when I had a bit more time. I write the lessons for my kids, one of them has Photoshop 3. I searched for a tutorial to make a blinkie in Elements 3, to no avail. In the attempt to make a blinkie, well you can see were it ended up. (Yes Barb, you can do this in CS3). So if you have a blog or online photo album and would like to try this.....
  1. When you have a layout finished, save this a .psd (preserves the layers) and remember to save your work as you go, a new file name each time is a good safeguard, don't merge all the layers.
  2. In the layers palette, click off the little eye of the element(s) you would like to move.
  3. Now click Layers, merge visible. Turn the shuttle layer back on, and I sized it very small to start the journey.
  4. For the shuttle, I added a new layer below the shuttle, and with a cloud brush and a light grey, stamped the exhaust. This background provided enough contrast of darks. Now link or lock the shuttle and exhaust together and Layer>merge linked.
  5. For the text layer, the words were spaced 4 times, so that it ran off the page and could run across the bottom of the page.
  6. I had 18 finished layers in the preview, but it should probably have about 30-40 to seem smoother. So duplicate the background layer (I don't think you don't have to do this in CS), the shuttle layer and the text.
  7. Click the eye in the layers palette, so that you don't see the duplicated background.
  8. Click on your move tool and using the arrow on your keyboard, shift the text left 5 spaces.
  9. The shuttle is than increased in size, by pulling the bottom right corner, and locking the dimension at 125 %. This probably could have been a bit smaller, to add more layers. When the image is now offset just a bit for the motion. As the shuttle got larger, I added a new layer beneath the shuttle and added a bit more exhaust.
  10. Now you can click that background back on.
  11. Repeat steps 6-10 until you are satisfied with the results. (You can have as many layers as you want).
  12. Save your work. Now you will start merging the layers, so click on one background and the text and shuttle directly above it. Click layers, merge linked.
  13. Now to prepare it for your blog. Click Image>resize image> (I set) the height and width to 4 inches and set the resolution to 72 dpi.
  14. Click File>Save for Web>click animation (be sure it is set to .gif). The default for the frame delay was 0.2, I didn't change this. And give it a new name.
  15. Now you must use a photo sharing site to post it in your blog. I used Photo bucket, and they have an easy way to post it blogspot. (I"ll try to get it written to a DVD to see if it'll play.)
Barb, you should have program with CS called Image Ready. I'm fairly certain that it keeps the background in all the images, element didn't. It's probably on the left bottom in your tools palette. You will actually we able to preview your animation.
You can do this with anything you want to put in motion. Fall leaves rustling across the page. Bubbles from the tub, a ball at the beach. Think big and always have fun!


  1. Cindett

    I just wanted to let you know how much I love all of your tutorials. Being a newbie to this yours have been most helpful. I love reading all of them. Thank you again for sharing your knowledge.

  2. Thank you so much for doing this! I still haven't found "image ready" yet. When I have time I will have to go to the help section but usually they don't say where the icon is. Anyway I love your tutorials. I will get it. Thanks for taking the time to do it!