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.

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 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.