Photoshop Tips: Transparent Carousel Images

Last Updated: Feb 14, 2018 12:33PM PST

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


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 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 & 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:
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found