Support Center

Transparent Slider Images (Photoshop Tips)

Last Updated: Oct 06, 2015 09:59AM PDT
Transparent sliding images are a great way to add a custom look to your app. Rather than appearing full-screen, partially transparent sliders 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 sliders will be larger than the home screen dimensions.

Traditional Slider Sizes
  • iPhone 4/4S: 640x960px
  • Phone: 640x1136px (750x1334px when optimizing for iPhone 6)
  • Tablet: 1536 x 2048px
Modern Slider 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 slider.)

5. Save your image for web (we recommend a file size of less than 1 MB) and follow the instructions on uploading and assigning it here.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found