Photoshop Configuration tips for UI designers

Source: Internet
Author: User

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 ( color configuration options.


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

    • PS Getting Started Tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.