How to place UI gif in iPhone perspective mock for use on sites like Dribbble


I've seen many tutorials about how to convert a .mov file to a gif in Photoshop (Convert Video Frames to Layers, etc.), but none about how to place that gif in an iPhone perspective mock to be shown on sites like Dribbble. Can't be that hard, but I can't figure it out.

1/4/2016 12:16:00 AM

Accepted Answer

  1. Make a new layer that will be the screen contents (make it the resolution of the iPhone screen you're visualising, you can find this on Google)
  2. Right click on the layer, convert to smart object (you'll notice a small page icon appear on that layer)
  3. Double click that layer, it will open a new PSD. This is where your animation will be
  4. Create your screen movie using the timeline controls in Photoshop
  5. Save the document
  6. Back in your original document with the smart object layer, you can distort that layer using CMD+T (Mac) or CTRL+T (PC), right click when transforming and more transform options are available to you, I recommend distort. Just match up the corners.
  7. Give the original document a timeline by clicking create video timeline in the timeline palette
  8. Press play and it should contain the perspective animation.
  9. You can add a screen glare layer above it for added realism
  10. Export it as whatever filetype you need, done.
1/4/2016 10:29:00 AM