0

I know there are other tools for designing web app layouts, but my favorite is still Photoshop (CS5). One of my favorite things about it is how easy it is to animate an interface in action and export the animation as a Quicktime video.

I'm wondering if it's possible to take this a step further: I'd like to take a picture of an iPhone at an angle:

enter image description here

And an animated interface (front view), and I want to render the animation (as key-frames in PS) of the interface except at the angle of the iPhone, within the iPhone's screen.

I've been trying to figure out how to do this, and I think I probably need to use a smart object, but I'm not sure if animation frames are packaged with a smart object, so maybe a different method needs to be used.

Can I combine Photoshop animation of a UI layout with a 3D perspective view? If so, how is it done? To be clear, my goal is simply to animate elements of my interface in PS as usual, except superimposed with perspective over an angled iPhone model.


In case it can be done with a smart object, the example above is a PSD I downloaded which has the smart object aligned in place, where I only have to replace it.

1

You can import and skew a mp4 video file that's a previous export of your flat rendering of interactive action.

So work as normal, export as video, and import as video, distort/skew to fit your iPhone models, and export again.

  • you dont actualually need to make the file into a video you can just import it as a smart object (Or just select all make smart object and paste that into new scene) then free transfor it into place. That way you can still do changes in animation – joojaa Sep 19 '16 at 7:11
  • @joojaa Actually Im having trouble making your solution work. I made the interface a smart object, then put it in place on the iPhone background, but then I tried animating something in the smart object, and then creating an animation in the iPhone file, and the smart object doesnt animate - it only shows as the last frame in its animation. – Viziionary Sep 28 '16 at 4:40
  • @joojaa Oh I think it's because I use animation frames. – Viziionary Sep 28 '16 at 6:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.