Detailed PS for the iOS design process know-how

In this article I (the original author) summarizes the methods that are followed when designing iOS software in Photoshop. Many of the techniques apply to general UI design. Note: The shortcut keys mentioned in this article are for Windows; Mac user can, cmd corresponds to Crtl key, opt corresponding ALT key.

1. Keep the size even

You're going to start with the retina screen design and then zoom out on the standard resolution, right? In order for pixels to remain perfectly present at the standard resolution, you need to ensure that the size and distance are even. The specific approach is: Based on the 2ps grid design. Guides, grids, and slices (cuides,grids&slices) in the Editor (edit) preferences (preference). Change the grid line spacing (gridline) and sub grid (subdivisions) to make the mesh spacing line 2px. For example, set the grid line spacing to 64px, and the subnet to 32.

Photoshop Tutorials

2. Blending mode only uses normal mode

When you set a layer effect that is directly above another element, blending mode is only normal (for example, projection and outer glow in blending options). Using other blending modes may look good in Photoshop, but it may also have undesirable effects after being saved in PNG format.

3. More convenient to change the gradient color

Want to change the hue (hue) of the gradient button without having to change the gradient's starting color value each time? Here are two methods that can achieve exactly the same effect.

Method 1: Use color overlay in gradient layer blending options

Method 2: Use a gradient overlay on a solid color layer

Translator Note: The above use of the vector mask, in fact, the use of clipping masks can also achieve the corresponding effect, personally think it is simpler.

4. More use of radial gradients

Overlay the radial gradient layer on the navigation bar to make the navigation bars more interesting.

Method 1: Radial Gradient tool

Method 2: Bevel and Emboss

You can also use the bevel and emboss in the layer blending options. You can set it as shown in the following figure. By adjusting the settings to achieve the desired effect. The more subtle the adjustment is, the better it looks.

5. More use of shadow deformation

The shadow in Photoshop (any other layer effect) and its corresponding layer can be separated. This will be able to manipulate the shadow.

Category:

• PS Getting Started tutorial