In the era of technological advancement, the 21st century is witnessing a tectonic shift in the technology market. Professionals always need to keep ready for a knowledge shift. Since the launch of the revolutionary Apple app store in 2008, the technology market has witnessed a major shift from web technology to mobile technology. Here we are about to learn to design an iPhone app using Photoshop. Adobe Photoshop is a graphic designing tool widely used by web designers.

The design elements seen in Photoshop on desktop computers may not appear same on iPhone screens with default Photoshop settings. For this, need to adjust some settings in Photoshop.

1. Change Preferences for Guides, Grid & Slices

As in high resolution retina screens of iPhone 2 px lines look as 1 pt, make the minimum grid lines split in 2 px.

Go to,
Photoshop >> Preferences >> Guides, Grid & Slices

Fill for Gridline Every ’20’ pixels and Subdivisions ’10’ pixels. In this way, one line appears every 2 px.

Photoshop Settings for iOS App Designing

2. Configure Snap

Select Snap to All. This will ensure all objects moved will snap to the 2 px grid.

Snap to All

Then configure your Shapes Tool, select Snap to Pixels.

Photoshop Shapes - iPhone app designers

3. Configure Color Settings

Proper caution should be taken to make sure all colors used in the design should look same across the devices. Usually, different software utilities used in managing color on different devices report different color irrespective of the original one. This issue can be resolved by turning off the default RGB mode in Photoshop files. Following steps should be followed while designing your app for iOS devices.

a. Go to Photoshop >> Edit >> Color Settings

Configure the Photoshop working environment RGB to Monitor RGB. Also, select RGB off under Color Management Policies.

Photoshop Color Management for iOS app desing

Then click on the More Options button. Ensure Blend Text Colors Using Gamma is deselected.

Photoshop advanced color settings

b. Configure Assign Profile

This step should be for every file you work.

Go to Photoshop >> Edit >> Assign Profile and select Don’t Color Manage This Document.

Turn off assign profile to this document

c. Configure Proof Colors

Go to Photoshop >> View >> Proof Colors and assure it’s off.

d. File Saving Configuration

While Saving File for Web & Devices, assure Convert to sRGB and Embed Color Profile are off. Also, ensure all images individually are saved in PNG format only.

Save for web and devices - iOS app designers

4. Screen Sizes

Different iPhone device versions have different screen sizes. While designing for such a device, it is important to remember the screen sizes. Here is a glimpse,

iOS app screen sizes for designers

iPhone 7 Plus has same screen size as of iPhone 6 Plus. To keep yourself updated and follow the Apple app store submission guidelines, the documentation on iOS design principles should be followed.

By using above Photoshop settings web designers can start designing iPhone apps. The principle of incorporating the design into the code is as it is for the web. For quicker and hassle free design-implementation, there are tools available to convert the Photoshop design into the app screen design. These tools are chargeable, better use the manual method at least initially.