Photoshop Tips: Transparent Animated Images

Last Updated: Apr 28, 2017 11:28AM PDT
Transparent animated images are a great way to add a custom look to your app. Rather than appearing full-screen, partially transparent animated images will only cover up a portion of your home screen. Here's how to format them using Photoshop.

How-To:

1. Create a new canvas or project (depending on your photo editing software). For Traditional effects, you'll use the same dimensions as your home screen. For Modern effects, your animated images will be larger than the home screen dimensions.

Traditional Animated Image Sizes
  • iPhone 4/4S: 640x960px
  • Phone: 640x1136px (750x1334px when optimizing for iPhone 6)
  • Tablet: 1536 x 2048px
Modern Animated Image Sizes
  • iPhone 4/4S: 1040x960px
  • Phone: 1040x1136px
  • Tablet: 1936x2048px
Note: Sizing for Parallax and Ken Burns is largely trial & error. For Ken Burns, we suggest starting with larger dimensions than dictated above to ensure the zoom effect works well on each device size. For Parallax, if you plan to include text or important graphics in the images, be sure that content is restricted to the center 640px (in width) of the image—otherwise, that content will be cut off by the effect.


2. Make this canvas transparent.




3. With this new canvas open, also open the image you'd like to use, so they're side-by-side.




4. Copy the image and paste it onto the canvas. You can adjust the sizing and positioning from here. (The checkered portions are transparent, so you'll see your home screen background image from behind the animated image.)




5. Save your image for web (we recommend a file size of less than 1 MB) and upload and assign it. 





Some examples of creative transparency: