Expert: LizaL - 8/3/2005

Question
ahhh I'm so sorry I meant how do I turn a photo into a cartoon-like picture. I'm so very sorry! I forgot that animation also meant a moving graphic. Thanks for taking time to answer my question, and again, it's OK if you don't want to answer this question. Sorry again, Tina
-------------------------
Followup To
Question -
Hello, I was just wondering how I can turn a picture into an animation using photoshop 7.0 like this photo of Ashlee Simpson on this site http://membersd.asianavenue.com/JustIIHype/

I also noticed that the socks have a beveled look but I'm guessing that she just used the socks from the photo (but i could be wrong). If it's too long of a process then it's quite alright if you don't feel like explaining. Thanks for your help, Tina.
Answer -
Hi Tina,

Was that picture supposed to be animated? 'Cause it wasn't, at least on my machine, and I tried it with 2 browsers -- but that's OK, because I think I can explain what you need to know without seeing the animation.

You can use ImageReady for very simple animations, and in fact, if you don't have Flash, that would be the best program. But bear in mind it's limited -- you can't do nearly as much in ImageReady as you could in Flash.

Basically, with ImageReady, you need a "before" and an "after" graphic. In this case, we could say the "before" graphic would be the pose of Ashlee just sitting there, and the "after" could be with her looking in another direction, for instance. So you'll need two different poses of her in order to animate them.

You'd open the original ("before") image in Photoshop, create a new layer, and put the "after" image on it. I always open my images in Photoshop first, in case they need to be touched up, etc. -- and in a lot of cases, the images I use for my animation might be created first in Photoshop.

But that part's up to you. You *could* just open the original image in ImageReady. But the important part is that you have each pose on a different layer.

If you're in Photoshop you'll need to switch to ImageReady (hit the button on the bottom of the tool palette). Open the Animation palette (Window>Animation), and you should see your active layer showing in the first frame. If you click on the little triangle on the top right of the Animation palette, you can select "Make frames from layers," which will automatically put each layer you've created in Photoshop on its own layer.

Now, if you click on the first frame, you'll see the original pose, and when you click on the second frame, you'll see the second pose. Hit the Play button at the bottom of the palette and you'll see the frames jump back and forth, thus creating a simple animation.

You can edit the speed, tweening, and other options by clicking on the little triangle at the top right of the Animation palette.

Like this -- I used two different colored boxes for a quick example:

http://little-works.com/all_experts/imageready.mov

What you need to make sure of is that each pose is on a different layer. Basically all you're doing is showing one layer at a time, back and forth, thus creating an animated effect.

This tutorial explains what I mean, only it's used to size a graphic for a quick animation:

http://www.webclass.ru/tut.php?tut=63


Hope this helps!

Lisa

Answer
That's OK, Tina -- now you know how to do simple animations in ImageReady, anyway, just in case you didn't -- LOL!

I found some tutorials you might check out:

http://www.good-tutorials.com/track/5752

http://www.good-tutorials.com/track/9792

http://www.good-tutorials.com/track/7729 -- this one suggests using the Cutout filter, and that might give you the best results.

http://www.thedesignworld.com/forums/viewtopic.php?t=665

Hope this helps!

Lisa