Super practical! A comprehensive guide to the APP design process from a master's personal notes

Start with a low resolution

I usually start with a 1x document size for non-Retina displays.

iPad apps use 1024×768 resolution, while Android uses mdpi or dp (density-independent pixels) for regular device adaptation. If it's a Mac app, it usually starts at 1280×768 (a strange combination of the horizontal resolution of the 13-inch MacBook Pro and the vertical resolution of the 11-inch MacBook Air to ensure that the app fits the smallest Mac display). iPhone apps use 320×568 or any of the resolutions in the above figure.

There are many reasons to start this way, including why you should start with wireframes to organize your concepts, and building in a 1x environment can help you set the size of views and elements. In other words, every element in the interface will fit exactly on the pixel grid at 1x, which is a technicality, but it's still a good start - it means your design will fit the iOS and OS X grid. Another benefit of working in a 1x environment is that you don't have to worry about keeping all elements in an even number (0, 2, 4, 6, 8, etc.), which greatly reduces Photoshop's memory usage and makes operations faster.

Although I have a Retina MacBook Pro, I won’t be changing my current way of working anytime soon. There are so many benefits to this method that I still recommend starting with it even if 2x and 3x are more important in your designs.

Focus on 1×, 2× and 3× at the same time

However, I am not suggesting that everyone should work on non-Retina display devices. After all, the current and future trends will be high-resolution displays, and I believe the focus of the future will be more on high resolution. I suggest that you switch between multiple sizes as needed (the original author has made a PS action to make switching between document sizes more convenient. If you are interested, you can click here to download the file package). But when modifying the layout, I usually do it in 1x, because it definitely helps improve efficiency.

If the document is set up correctly, you can switch between sizes without losing any quality. For example, edit the button style in 2x, go back to 1x to continue adjusting the layout, and then go to 3x to set the layer style... one document solves all problems.

Here are some tips on how to keep elements with clear boundaries at all sizes.

Gradient border effect

You can try setting the border effect to a gradient color. The advantage of doing so is that it automatically fills in a lot of details. As you can see in the picture above, in Retina size, it is a sharp gradient effect with a slightly brighter border, while in non-Retina size, it is a monochromatic sketch edge. Gradients are very useful, especially because they can be used not only when filling blocks, but also for strokes and layer style strokes.

Layer styles and outlines

If you’re looking for a more refined layer style, try the Outline setting. Outer Glow is ideal for outlines, as it makes the line go from a single pixel at 1x, to a softer 2px at 2x, and a more refined 3px at 3x.

0.5pt and decimal point strokes

A 0.5pt stroke is displayed as a single pixel in 2x, and as a single pixel with a softer border in 1x. Vector strokes can be non-integer (layer style strokes cannot be set to non-integer)

The same applies to the 3x display - a 0.33pt stroke will automatically be adjusted to 1 pixel.

Half-pixel nudge

Turning on Photoshop's snap to pixel feature can help create sharp graphics. If you want to move with precision of half a pixel, turn off snap to pixel, zoom in to 200%, and nudge half a pixel by pressing the arrow keys on your keyboard. This method can simulate the effect on a non-Retina device as it would on a Retina device. The nudge unit varies depending on the scale of the view. The stroke created by this method is a single pixel at 100% transparency at 2x size, and a single pixel at 50% transparency at 1x.

Feather Mask

Feathering is a great way to soften shape layers. Feathering can do most of the same things as layer styles, but it's more precise because both the shape layer and its feathering can be set to non-integer values.

However, it also has its drawbacks - the feather mask cannot automatically adjust the proportions with the document size, which is why David Jensen created a series of scripts for adjusting the size of the feather mask (the original code is published on GitHub, and it is included in the PS action package file provided by the author in the previous article). If you use the PS action provided in the previous article to switch between 1x and 2x sizes, the size of the feather mask will also be automatically adjusted (of course, you need to run it under the premise of installing David's script).

If the document you create needs to be freely resized, then bitmap layers and bitmap masks are definitely a nightmare. Most masks, including smooth-edged masks, can be completed through shape layers, groups, and feathered masks. Here, Photoshop's vector mask function is highly recommended, which can complete most of the graphics you can think of, although the creation process may be slower.

#p#

Material

I work with textures in two ways. When I have large texture images that need to scale with the different sizes of the document, the best way to do it is to size the image in 2x and then convert the layer to a Smart Object. This will make the texture appear pixel-perfect in 2x and scale it down as a bitmap in 1x.

If it's a delicate element like noise, it's best to keep it at 100% in both sizes. In this case, Smart Objects don't work because they will make the image scale up or down in proportion to the document size. For this type of effect, I use Pattern Layers or Layer Pattern Styles.

Like Smart Objects, the pattern function still has a problem, which is that it changes accordingly with the document size. For example, if you set a 100% pattern size in 2x, it will become 50% in 1x. This will make a high-definition noise texture blurry. Here we have to mention David Jensen again. Another script he wrote, "Pattern Scale 100%", solves this problem. This script is also included in the action package file mentioned above and will be automatically applied when running the action.

Set the elements that need to be resized proportionally as Smart Objects, and the materials that need to remain fixed in size as Patterns, so that you can automate the document. These settings are especially important when you often need to switch between 1x and 2x.

Live Preview

If it is an iOS or Android app, I would use the free software Skala Preview to test the whole process. If your rendering includes an iPhone or iPad window (device outline image), two-finger tap to center and hide the device outline image in the preview. Please note that this is based on the Photoshop document containing the device outline.

Slice Output

You may think my way of working is a bit crazy, but over the years, all my projects have two sets of Photoshop files - one set is the model image, and the other set is the element file for slice output.

There are many benefits to doing this.

I make sure all elements in the mockup document are named correctly and the different states of the app are organized into groups. I build each element based on its suitability for multiple situations, but I occasionally use bitmap layers. Sometimes bitmap layers can even make the work faster and allow me to quickly try out different layouts.

I only create one Photoshop document for each size and orientation. The portrait-scale document for the iPhone app will contain multiple states of the interface, separated by different groups. I don't use composite layers very often, they are too fragile (of course, Photoshop CC 2014 has solved many problems with composite layers). Using groups means multiple copies, but even so, I still think it is the most practical of all. If you need an element to be synchronized in different groups, you can try layer tags. This feature is interesting, but I don't use it much.

I keep my output files in a flat format, with each element as a separate slice. This approach clearly shows the boundaries and file names of each output slice. The flat format means that transparency is obvious and it is easy to select the vector nodes you need without worrying about selecting another layer.

We can preview PSD element files through the quick view in the window, even if the computer does not have Photoshop installed. This is great. If you want to find an element of a long-ago project, you can find the file through quick view in just a few seconds. After opening it in Photoshop, you can see the name of the element output, and align it for editing and re-output.

Each slice document contains only one element used in the application, so the files are small and fast.

Slicing may seem complicated to set up, but it is not. Once you get started, it is easy. Of course, the action file package mentioned above also contains various slicing actions.

The Show *** Size action creates a bitmap layer of the minimum size from the selection in the marquee. This method is very useful for cutting off excess areas.

The Make Slice by Layer action creates a slice using the selected layer. I usually select the layer I just created with the Show *** Size action.

I don't actually save files at the minimum size very often. I find it important to manually control this process because I often want to leave a few extra pixels of space around elements to account for possible future changes such as increasing their size (adding a little white space doesn't really affect file size or memory usage that much).

Slice by Selection can also be found in the Actions package. It is a shortcut to slice. I don't know why, but I just think the Selection tool is easier to use than the Slice tool directly.

Slices can also be saved in the document without being exported, for example, if an element has become deprecated but you don't want to delete it yet.

Once the slices are set, Save for Web will export all the slices. It is not enough to export just one set of images, we need 1×, 2× and 3× files, and the 2x and 3x files need to have @2x and @3x suffixes. This is where Hazel comes in.

Hazel: Moving and renaming files

Hazel is an automated file organization tool that can batch rename files in a specified folder and move them to other folders.

Once the slice file is created, I run an action that combines all the following scripts and steps:

- Save all slices in a format for the web and save them in the "Export" folder.
- Zoom the document up to 200%.
- Use a script to scale the feathered mask up to 200%.
- Use a script to adjust the pattern scale to 100%.
- Save all slices in a format for the web and save them in the "Auto @2x" folder.

Once this combination is complete, all 1x element files are placed in the Export folder, and all 2x files are placed in the Auto @2x folder. Hazel will automatically find the Auto @2x folder, add @2x to the end of all the files in that folder, and then move them to the Export folder. The same process applies to @3x files.

Below is the entire process of the action. Because it is a screen recording, there is a certain degree of lag. However, even if it is really running at full speed, the two scripts will take a while to complete.

Subfolders for Android, Windows, and Elements

Matt and I have very similar workflows, probably because we discuss this a lot. He was designing an Android app and needed to use this workflow - Android uses different subfolders (drawable-hdpi, drawable-xhdpi, etc.) for different size elements instead of suffixes. All images are placed in separate folders in the format used for Web, and we need to find an automated process for Android subfolders.

We eventually decided to put pound signs in the slice names - putting the pound sign between the folder name and the file name so that Hazel can organize the slices after they are exported.

Windows 8 also uses subfolders to distinguish element files of different sizes, so the word method can also be used.

Hazel rule files are also available in the action files package.