Clipping Mask in Illustrator using Photoshop image

Question

I have two photoshop pngs, I am trying to simulate a rotating coin 3D effect. One image will act as heads and the other will act as tails. How can I get these two images to rotate together to simulate the front and back of a coin spinning on a 0 axis? Output to be either a gif or mpeg4. Here is an image of the heads side of the coin. Both images are 512 x 512 with a radius of 80.

Can this be done in photoshop, illustrator, or something else?
How do I get an image on the back of the image below to look as if the image is double sided?

Answer 1

I think the error message you've got is quite a good hint. To make a clipping mask in Ill you have to have at least a) object you want to clip, b) a vector path you want to use as a clipping mask. The a) should be arranged below b). Now having both selected (you may want to use “Layers” palette to get a good view what's selected) you should choose Object->Clipping Mask->Make from main menu. For more complete explanation with some examples take a look at Adobe's Ill help page (topic: “Clipping masks”).

The other thing IMHO you could be attempting to do and asking for is using Photoshop's clipping path saved with Ps file as clipping mask in Ill, but that's quite different story :).

Answer 2

What's the end goal? GIF can only have 1bit alpha, so you'll end up with bad masking, if you're trying to use the animation on top of something else that's unknown. MPEG4/H.264 does support an alpha channel, but you may have difficulty generating what you're after.

If the end goal is for use on the web, CSS3 animation can do what you're after with just the two images.

If the end goal is for use in an iOS app, then again, there's ways to animate using CoreAnimation that will only require the two sides as individual PNG images.

If the end goal is for use as part of a video, then you may be better off doing the 3D rotate within Final Cut Pro X or Premier or whatever you're editing in.

If the end goal is for use in a presentation, then Keynote can do the card flip already.

So I think the best solution may be a totally different approach. If you do want to animate within Illustrator or Photoshop, then you'll probably have to create each frame individually — a painful and slow process that will make things like getting timing and easing right very difficult. For example, you may want to have the animation start slow, pick up speed, then slow down near the end. It's easy to have an ease-in-out timing curve with CSS3 animation or CoreAnimation, but harder when you're editing by hand.