Having trouble with animation

[_Paz_]

A friend created and is marketing "Watercolor Color Previewers". There are 12 Previewers, each has a graduated level of opacity of specific paint color hues. When you lay one of her 'Previewers' over your own painting, you get a good idea of what you have already would look like with a layer of the next color added on top. The transparent nature of most watercolor pigments makes this work really well. I'm working on a video to showcase her product. I have a couple of ideas I'd like to pursue.

First, I'd like to make an animated .gif that could live on a web page that would show the Previewers spinning around. Here's what I've done in PSCS6:

open image in PS CS6

timeline>frame animation instead of video timeline> click frame animation a 2nd time.



select first frame, duplicate frame with tool that looks like a sheet of paper with the lower left corner folded up, just below the frame - timeline.

With ONLY frame 2 selected, rotate image 45 degrees. Everything looks fine before I click the checkmark.



But as soon as I do hit the checkmark to make frame 2 rotate, both frame 1 and frame 2 rotate, even though frame 1 was not selected.



Next step should be to select frame 1, hold control and select frame 2, so both are selected, then click the tweening symbol to create the tweening frames.

But, since my original frame 1 went away as soon as frame 2 was rotated, all the tweens look just alike and there is no indication of spinning when the should be an animation is played.

What have I missed?

=======================================================

I've also thought about making an animated .gif that could show this sort of action:



========================================================

Another version is a video.

[youtube]http://www.youtube.com/watch?v=JTkBaex1Efg[/youtube]

Obviously, I need to edit out my arms, but I also need to have the entire background be the same color. I could not get a larger piece of paper to rotate on my lazy susan without bumping into the wall behind my camera setup. I could try to film again with the camera set up on a tripod, looking straight down, but I'm afraid I'll have the same problem with tripod legs.



What would be the best way to go about this?

Would it be possible to select only the spinning color wheel in After Effects CS6, then add a background behind it?

Could I add my photo from the Photoshop project above into a video editor? Since it is already on a transparent background, could I make that spin and possibly have the colors change as the wheel spins, as though it was being viewed through a Previewer as it rotated?




thanks for any suggestions on any front,


Paz

[sidd finch]

You can create an animated gif in photoshop using the layers. select the amount of time each layer is present then save as animated gif. Might be easier than a video.

Sidd

[Bob]

Frame animation doesn't work that way. Frames and layers aren't the same thing and transform works on layers (of which you only have one). You would need to duplicate the layer, rotate the duplicate, and convert to frames. Even then, tween is more of a cross-dissolve and won't give you a feeling of rotation. Instead, use a video timeline.

Open the jpg of the previewer in photoshop and create a timeline. The jpg will be added to the timeline. Stretch it out to 1/2 the duration you want one rotation to last. Convert the jpg layer to a smart object. Duplicate the smart object. This will add a new track to the timeline. Slide the top clip in the timeline to the end of the bottom clip. Select the bottom clip in the timeline and twirl open the properties. set the cti to the beginning of the timeline. Enable keyframes for transform. Move the cti to the end of the bottom clip. Edit Transform Rotate and set the rotation angle to 180 degrees. commit the transform. Move the cti to the start of the upper clip and select the clip. Don't enable the keyframes just yet. Edit Transform rotate and set the rotation angle to 180 degrees and commit the transform. Now enable the transform keyframes. Move the cti to the end of the upper clip and Edit Transform Rotate. Set the angle to 180 degrees and commit the transform. You now should have a timeline that goes through one complete clockwise rotation. Use Save for Web to create the gif. (File>Save for Web). Set the image type to gif. enable transparency. set the animation looping option to forever and save the gif.

Here's a screenshot of Photoshop:

previewers-capture.jpg

Here's the gif:

previewers_gif_spin.gif

This was with the default 30 fps framerate, you could probably lower the framerate to 10 or 15 and still have it work well and the gif will be smaller.

There are a lot of reflections on the previewers. Do you have something translucent that you could light from behind and place the previewers on that?

[_Paz_]

Sidd,

Thanks for your suggestion. It looks like that's more or less the basis for Bob's thoughts too.

Bob said:

Frames and layers aren't the same thing and transform works on layers (of which you only have one)

Ah! So that's what I missed. I see now.

Yes, Bob, that's exactly what I wanted it to do. It looks great except I see the 'transparent background layer squares in the headers of the Previewers. Perhaps I should keep a white background and then cut them out on top of that.

You're right. The reflections are horrible. I've installed a double layer of diffusion panels over my lights and all I can tell it had done is cut down on the amount of light. I've had lots of difficulty trying to make sure the viewer could see the Previewer instead of the reflection while I've been ...filming? Videoing?

Photographing them with backlighting!!! What an ingenious solution!!! Yes, I can probably do that. I have a small, glass topped coffee table. If I can get a lamp or maybe a shop light under it that should work. Thanks!

Thanks to both of you! You guys are the greatest.

[Bob]

I see the 'transparent background layer squares in the headers of the Previewers. Perhaps I should keep a white background and then cut them out on top of that.

The transparency squares are only there because I used your screen capture and they were present in that. They would not, of course, be part of the image when you work with the original in Photoshop. You don't need to have a background unless you want one.

[_Paz_]

The transparency squares are only there because I used your screen capture and they were present in that.

I see.

I photographed the Previewers with them backlit. Losing the reflections is a big improvement.



And then I tried adding assorted background colors to simulate the colors represented by the previewers. They looked ok on my Photoshop screen, but don't look so hot saved as a gif, especially since some of the background colors have polka dots! yikes



Looks like I need to play around with my gif settings or else choose bg colors that are closer to basic hex code colors.

Thanks for the help, Bob. Your instructions make perfect sense, as usual.

Paz

[Bob]

Unfortunately, this is a limitation of the gif format. It's not of question of web safe or basic hex code colors. Gif uses an indexed color palette. Each gif can contain a different palette of colors, but the maximum number of colors in one gif is limited. Colors not in the palette are approximated by dithering. Try experimenting with Perceptual or Adaptive, those may work better for some images. You can also experiment with different dithering options.

[_Paz_]

I see.

I realized my first two attempts have huge file sizes. 5Mb. That won't do!

I've been playing around with different settings. The early ones were Adaptive. This is Perceptual and (only?) 455kb:



The colors flash pretty quickly, and the wheel is spinning faster too. Not sure I like it after all. I may go with the transparent background instead.