Overview

Transparent Carousel Images are a great way to add a custom look to your app. Rather than appearing full-screen, partially transparent carousel images only cover up a portion of your home screen. This article describes how to format them using Photoshop.

Solution

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

   Traditional Carousel Image Sizes

   • Phone: 640x1136px (750x1334px when optimizing for iPhone 6)
   • Tablet: 1536 x 2048px

   Modern Carousel Image Sizes​

   • Phone: 1040x1136px
   • Tablet: 1936x2048px

   Note: Sizing for Parallax and Ken Burns is largely trial and 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 is cut off by the effect.

2. Make this canvas transparent:

   

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

   

4. Copy and paste the image onto the canvas. You can adjust the sizing and positioning from here. The checkered portions are transparent. Your home screen background image is visible from behind the animated image.

   

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