iphone-ios-7-icons-layers-800px

The parallax effect in Apple’s iOS 7 was designed to give the phone display a sense of depth, using layers rather than simple drop shadows on icons which can be limiting. That is, at least, what lead designer Jony Ive said he was trying to do with the feature. Ive said the new iO7 software was “constructed and architected visually and from an informational point of view as a very deep UI.”

Without getting too complicated, the software makes use of new accelerometer sensors that react to the angle of the phone. Because iOS 7 has added different layers using the z-axis (see Apple’s diagram), those layers can react or not react to motion. The effect can be used on both the Home and Lock screen, and is more noticeable depending on which wallpaper background you choose.

Before starting you should first be sure your Apple device will support the parallax effect. iPhone 4s models support it (sorry iPhone 4 owners), as well all iPhone 5 models and the iPod touch 5th generation.  3rd and 4th generation iPads also support the effect.

1. Choosing the Right Image

choose-wallpaper-camera-roll-apple

This might be the most time consuming part, because it may take you a while to find the image you want to use. It’s best that you choose an image at least 400 pixels wider and taller than your device’s display resolution. This will allow enough room for the image to “move around” without showing any margins on the top, bottom, or either side when you tilt the phone. When sizing bitmap images, always be sure to scale down, not up, to avoid losing image quality.

Choose an image that is portrait format. While we don’t want to discourage the use of horizontally formatted images, most people hold their phones vertically. And, the Lock and Home screen are aligned vertically. So, it really doesn’t make sense to use a horizontal image for the parallax effect.

Notes on types of images.

  • Try using images with a shallow depth of field (DOF). Meaning, some areas of the image can be sharp while some are areas are blurry as if off in the distance. This creates a sense of depth in the wallpaper image and can help with enhancing the parallax effect.
  • Try using images with patterns, textures, or gradients. These types of images tend to create the best effects. Patterns with areas of sharpness and blurriness create some interesting optical reactions when used as wallpaper with parallax motion turned on.
  • Use images that are large enough to cover the device’s full resolution, with an additional 200 pixels per side. For those of you with a large collection of Instagram photos, the 612 x 612 pixel images probably won’t cut it. Although, there’s certainly no hurt in trying.

2. Adjusting Images

ios7-parallax-wallpaper-image-sizing

Your image may need some adjustment before setting up as a Wallpaper for the parallax effect. While it’s not completely necessary, you can use Adobe Photoshop, the open source Gimp application, or other imaging software to resize and manipulate bitmap images before testing with the parallax effect.

As mentioned above, it’s suggested to use an image that is bigger in pixels than your device. To figure out what size image would be best for your device, refer to the Apple device resolutions below and just add 400 pixels to both the width and height dimensions.

iPhone 4s
960 × 640 pixels (326 ppi)

iPhone 5/5S/5C
1136 x 640 pixels (326 ppi)

iPod touch (5th Gen)
1136 x 640 pixels (326 ppi)

iPad (3rd/4th Gen)
2048 × 1536 pixels (264 ppi)

iPad mini
1024 x 768 pixels (163 ppi)

(For example, with the iPhone 5, you would make or choose an image at least 1536 x 1040 pixels)

3. Selecting the Image for Wallpaper

ios7-choose-wallpaper-screen

To try different wallpapers tap on the Settings icon, choose Wallpaper & Display, and search through your images. The new iOS 7 update also includes two animated, or “dynamic” wallpapers as Apple calls them, that make the parallax effect even more mesmerizing. You can also make your own animated wallpapers, but that’s a different story.

4. Preview and Set your Wallpaper

ios7-wallpaper-set

You can actually preview what the wallpaper will look like with the parallax effect by tilting the phone back and forth. If you’ve saved several images to your phone for wallpaper, this is the perfect time to test them all out before choosing the one you want.

iOS 7 also adds new photo features to the update, including the ability to share multiple photos, shoot in Panorama mode, and capture motion more effectively in Burst mode. The latter two additions can help you take better photos you might use as wallpaper.

If you’re not seeing any motion in the wallpaper image, check to be sure Reduce Motion is turned off. To check this setting to go Settings > General > Accessibility > Reduce Motion. Although this seems contrary, you want to have this checked “Off” so the parallax feature is turned on in the user interface (see below image).

ios-parallax-on-reduce-motion-OFF

Is the parallax effect not your style? Read the following Gadget Review article on how to turn it off.










Jeff Chabot

 
Jeff Chabot has a background in web development and design, as well as working in broadcast television as a studio engineer, lighting director and editor. He frequently writes about technology, broadcasting, digital entertainment, and the internet.