After Effects iPhone Template


Adobe After Effects device templates are a kick ass way to present your UX work in context. I created these free templates from free PSD source files that design rockstars have posted on Dribbble and elsewhere. You can use this template with just a few clicks in your presentation, website, or wherever your little heart desires. If you have no idea how to use this template, check out my video instruction below. If you have no idea how to use After Effects, it’s super easy and fast to learn. Check out my Rapid Prototyping with After Effects training and start kicking ass within minutes.

Download AE Template


The existence of this sexy template would not have been possible without the generosity of Matias Gallipoli. He designed the PSD and posted it for free, because he is a baddass. You can find more of his work at:

Check out Matias’s Dribbble Portfolio
Check out his website
Follow him on Twitter

Template Specs

After Effects Versions Supported

  • Adobe After Effects CC
  • Adobe After Effects CS6

Template size preset options

  • 800 x 600 (Dribbble)
  • 1280 x 720 (HD Small)
  • 1280 x 960 (Small 4:3)
  • 1440 x 1080 (Medium 4:3)
  • 1920 x 1080 (HD Large)
  • 1920 x 1440 (Large 4:3)

Template frame rate

I’ve created all these comp templates at 24fps. While I advocate working in After Effects at 60fps for maximum beauty and tastiness, most presentation deliverables are in the 24fps (or 23.976fps) world. If you want to change the comp frame rate to match your own, go to Composition > Composition Settings in After Effects, to change the frame rate to what works best for your project.

Video Instructions

Written Instructions

Yo here are the steps to make it happen, instant ProStyle™

  1. Download this shizzle
  2. In your already open After Effects project, import the .aep file that comes with the download
  3. Double click the composition preset you desire to use (1920×1440, 1920×1080, 800×600)
  4. Click the ‘replace’ layer to select it
  5. In your project palette, drag the UI comp you want to replace the screen over to the canvas while holding down the option/alt key
  6. Release
  7. That’s it
  8. Reset the outpoint of your work area so that when you render out you don’t cut off or extend past your comp duration
  9. WARNING: if your comp isn’t the exact precise iOS/device dimensions, it may come in too big or small, in which case, you’ll need to scale it up or down to make it fit