Photoshop Configuration tips for UI designers

Photoshop New Document Settings

Action: menu → file → new

Width: 640 pixels

Height: 1136 megapixel (4-inch iphone device)

Resolution: 72 pixels per inch (ppi)

Color mode: RGB color

Background content: White (optional)

Color profiles: Do not color manage this file (after more color settings)

Pixel aspect ratio: square pixel

Configure the following figure:

　　Alignment settings

This is when you use layers, shapes, and so on to automatically snap to the grid, the vector map is not afraid of blurred edges, to ensure that each pixel remains clear.

Set up:

Menus → views → alignment

menu → view → align to → all

　　Preferences settings

Action: Menu → edit → preferences → general, recommended to follow the figure set

　　Enable Light stroke panning

Just a slip effect, accounting for memory can not improve operational efficiency, it is recommended to turn off.

Change the circle brush hardness according to the HUD moving vertically

function pretty good, press ALT + right or up or down move can change the size and hardness of the brush respectively.

Aligning the vector tool with the transform to the pixel grid

It is highly recommended that this feature be turned on so that you do not produce a half pixel virtual edge, which is very useful. However, it can be temporarily closed when micro adjustments are required.

　　Text Settings

Font I usually set the font to sharp, if you are Photoshop cc version, it has a Windows Lcd/mac LCD anti-aliasing, text can be as effective as the Web page, so it is recommended to upgrade to Photoshop CC bar.

Action: first select text → character tool (AA) choose Windows Lcd/mac LCD

　Global Light

Following the Apple iOS HMI guide, you should set the lighting to 90 °.

Actions: Layers → layer styles → global Light →90°

　Grid settings

Now the iOS interface is designed to be compatible with the retina (Retina), so I set each mesh to 2 pixels, so I'm not afraid of the image being blurred under the retina device.

Actions: Menus → edits → preferences → guides, grids and slices, grid line spacing: 4 pixels, Subnet 2. or grid line spacing: 2 pixels; Sub Grid 1. I like the former ^_^

　　Export Settings

Whether we're doing web pages or not, the export image is best exported using the Save as Web format for the iOS app application.

This is done by "Save as Web Format ..." For example, where the default setting is more important, as shown in the following figure: PNG-24

Actions: Menu → file → save as Web format

Presets: PNG-24

Transparent: tick

Staggered: Not checked

Embed color profile: Not checked (available in Photoshop cc version)

Convert to SRGB: not checked

Quality: two times cubic

　　Retina Monitor Settings

If you are using a MacBook Pro with retina retina, you should make sure that you are using 2800x1800 pixels (1440x900 point)

Action: Apple menu → system Preferences → show → best for display

　Color Configuration

Color configuration is a very complex operation, if you are not the great God in this field, then still be honest with the recommended configuration, here I chose the Marc Edwards (http://bjango.com/articles/photoshop) color configuration options.

　　Summarize

This compass is an introduction to the Phtoshop basic settings for UI design, except for the above, most designers will have their own custom settings, so if you have some technical settings, please feel free to share them in the comments below.

Note : More wonderful tutorials Please pay attention to the triple Photoshop tutorial section, triple PS group: 339853166 welcome you to join

Category:

• PS Getting Started Tutorial