Master's personal notes app design process full science

Today this translation is full of dry goods, including a lot of practical experience, such as the elements in various sizes to keep the boundaries of clear skills, slicing professional methods, naming rules, etc., is definitely worth each UI designer collection!

　　Starting from low resolution

I usually start with a 1x document size that is not retina displayed.

The ipad's app resolution is 1024x768, and Android is the MDPI or DP (density-independent pixels) General equipment fitting size. If it is a Mac application, it usually starts with a 1280x768 (13-inch MacBook Pro horizontal resolution and a bizarre combination of 11-inch MacBook Air vertical resolution to ensure that the app works for the Mac's smallest display). iphone app uses either 320x568 or any of the resolutions in the top image.

There are a lot of reasons to start with, like why you start to organize concepts from a frame diagram and build the settings that can help you view and element size in a 1x environment. In other words, each element in the interface fits perfectly with the pixel grid in the 1x dimension, which is a technical operation, but it's a good start-meaning your design matches the grid of iOS and OS X. Working in a 1x environment also has the advantage of not having to keep in mind that all elements have to be kept even (0, 2, 4, 6, 8, etc.), greatly reducing Photoshop memory usage and faster operation.

Although I have a Retina MacBook Pro, it should not change the way it works in a short time. The benefits of this approach are too much, even if the 2x and 3x are heavier in your design, I still recommend this way to start.

　　Also focus on 1x,2x and 3x

However, I'm not suggesting that we all work on a retina size display device, after all, the current and future trends will be high resolution, and believe that the future will be more focused on high resolution. I suggest, as needed, to switch between the various sizes (the original author of the PS Action, make the document size switch more convenient, interested in children's shoes, can point to this download package). But when I change the layout, I usually do it in 1x, because it definitely helps to improve efficiency.

If the document is set correctly, you can switch between the dimensions without damaging any quality. For example, edit the button style in 2x, go back to 1x and adjust the layout, then go to the 3x to set the layer style ... A document solves all problems.

Here are some tips on how to keep the elements clear in each dimension.

　　Gradient boundary effect

You can try to set the boundary effect to fade, so the advantage is that it automatically fills in a lot of detail. As seen in the figure above, the sharp gradient effect in the retina dimension is slightly lighter at the boundary, whereas in the retina dimension it is a sketch edge. Gradients are useful, especially if they are not just filled with color, but can also be applied to strokes and layer style strokes.

　　Layer Styles and outlines

If you are pursuing a more optimized layer style, you can try contour setting. The outer glow effect is ideal for frame lines that make the line a single pixel in 1x, a softer 2 pixel in 2x, and a more optimized 3 pixel in 3x.

　　0.5pt and include decimal strokes

A 0.5pt stroke is displayed as a single pixel in 2x, and a softer, single pixel in 1x, with a vector stroke that is not an integer (a layer style stroke cannot be set to a non-integer)

Similarly also used for 3x display--0.33pt strokes are automatically adjusted to 1 pixels.

　　Half Pixel light shift

Turn on Photoshop's snap pixel feature to help create sharp graphics. If you want to move exactly half a pixel, turn off the pixel alignment and zoom the view to 200% to nudge the half pixel by pressing the arrow keys on the keyboard. This approach can simulate the effect on a retina device on a retina device. The light shift unit varies according to the different proportions of the view. The stroke created by this method is a single pixel of 100% transparency in the 2x dimension and a single pixel of 50% transparency in 1x.

　　Feather Mask

Feathering a mask is a recipe for softening a shape layer. Feathering a mask can do most of the work in a layer style, but it is more accurate because the shape layer and its feathering masks can be set to a non integer.

However, it also has drawbacks-feather masks cannot be automatically adjusted to the document size, which is why David Jensen created a series of scripts to adjust the feather mask size (the original code is published in GitHub, which is already included in the PS action package file provided by the author). If you use the PS action provided in the previous text to switch between 1x and 2x, the size of the feather mask will be adjusted automatically (and, of course, it needs to be run with the David script installed).

If you're creating a document that needs to be free to transform dimensions, then the bitmap layer and the bitmapped mask are definitely nightmares. Most masks, including the smooth edges of the masks, can be done through shape layers, groups, and feather masks. In this case, you should strongly recommend Photoshop's vector mask feature, which can accomplish most of the graphics you can think of, although the process may be slower to create.

　　Material

I have two different ways of dealing with materials. When large material pictures need to follow the different dimensions of the document to adjust accordingly, the best way is to set the picture size in the 2x size, and then convert the layer to a smart object. Doing so allows the material to be rendered in perfect pixel size in 2x dimensions, and is reduced in bitmap form in 1x dimensions.

If it's a delicate element like noise, it's best to keep the size of 100% in both sizes. At this point, the smart object does not apply because it makes the picture scaled or scaled proportionally to the document size. For this kind of effect, I use pattern layer or layer pattern style to implement.

As with smart objects, there is still a problem with pattern functionality, which varies with the size of the document. For example, if you set a 100%-size pattern in 2x, it becomes 50% in 1x. This will make a high-definition noise texture blurred. Here we have to mention David Jensen, and another script he wrote "pattern ratio 100%" solves the problem. The script is also included in the action package file mentioned in the previous article, and is automatically applied when the action is run.

You can automate your document by setting the element that needs to be scaled to a smart object and maintaining a fixed sized texture to be patterned. Especially if you often need to switch between 1x and 2x, these settings are critical.

　　Live Preview

If it's iOS or Android apps, I'll test the whole process with free software Skala preview. If your image contains an iphone or ipad window (picture of the device frame), double-click to center and hide the device block diagram in the preview. Note that this is based on the case that the Photoshop document contains the device's outer frame.

　　Slice output

People might think I'm working a little crazy, and all my projects over the years have two sets of Photoshop files-one for model diagrams and the other for element files for slice output.

That's a lot of benefit.

I'll make sure that all the elements in the model document are properly named, and that the different state interfaces that are applied are sorted by group. I'll consider the applicability of many situations to build each element, but I occasionally use the bitmap layer. Sometimes the bitmap layer can even make the work more efficient and try different layouts quickly.

For the same direction for each dimension, I create only one Photoshop document. The vertical scale of the iphone application will contain multiple interface states, differentiated by different groups. I don't use composite layers very much, they're too fragile (of course Photoshop CC 2014 solves a lot of problems with composite layers). Using a group means replicating multiple times, and even so, I still feel that this is the best of all ways. If you want an element to be synchronized in different groups, you can try the layer label. This function is very interesting, but I do not use it.

My output document is in flat format and each element is individually set to a slice. This method clearly shows the bounds and file name of each output slice. A flat format means that the transparency of a file is obvious, and you can easily select the desired vector node without worrying about choosing another layer.

We can preview the PSD element file through the Quick View in the window, even if the computer without Photoshop has the ability to enjoy it. It's great. If you're looking for an element of a long time ago, you can find the file in just a few seconds, with Photoshop, and you'll see the name of the element's output, and align and edit it and then output it again.

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

Slicing seems to set up very troublesome, but in fact, as long as the start is simple. Of course, the action packages mentioned in the previous article also contain slices.

Show the best size action is to create the smallest size of the bitmap layer in the selection box, which is useful for removing extra areas.

Slicing by layers creates slices using the selected layer. I usually choose a layer that was created just by showing the best size action.

In fact, I do not always save the file as the smallest size. I find it important to manually control this process because I often want to leave more pixel space around the element for possible future modifications, such as increasing the size of the element (some white space does not affect the size or memory of the file).

Making slices from a selection can also be found in the action package, which is a shortcut to making slices. I don't know why, but I just feel that constituency tools work better than using slicing tools directly.

Slices can also be saved only in documents without output, for example, if an element is deprecated, but you do not want to delete it.

When the slice is set, the format that is stored in the web will output all slices. It is not enough to output only one set of images, we need 1x, 2x and 3x size files, and 2x and 3x files should be @2x and @3x suffix. We need to use the hazel here.

　　Hazel: Moving and renaming files

Hazel is an automated file-finishing tool. It can bulk rename the files in the specified folder and move them to another folder.

When the slice file is set up, I run an action that combines all of the following scripts and steps:

-Store all slices in the web format and deposit them in the "Export" folder.

-Enlarge the document to 200%.

-Use script to enlarge the feather mask to 200%.

-Use script to adjust the pattern scale to 100%.

-Store all slices in the web format and deposit them in the Auto @2x folder.

When this combination is complete, all the 1x element files are stored in the Export folder, and all 2x files are placed in the Auto @2x folder. Hazel automatically finds the Auto @2x folder, adds @2x to all the file names in the folder, and then moves them to the export folder. The procedure for @3x files is also so.

Below for the entire movement of the operation process. Because it is a screen recording, there is a certain degree of sluggish. However, even if the real full speed operation, two scripts also need to run for some time to complete.

　　Subfolders of Android, Windows, and elements

Matt and I have very close working processes, which may also be because we have a lot of discussion in this area. He used to design an Android app that needed this process-Android uses different subfolders (DRAWABLE-HDPI, DRAWABLE-XHDPI, etc.) for different sizes of elements, not suffix names. To put all the pictures in a separate folder in the format stored for the web, we need to find an automated process for the Androzo folder.

We finally decided to place the well number in the slice name-place the well number between the folder name and the filename so that the hazel can be sorted out after slicing.

Windows 8 is also a way to use subfolders to differentiate between different sizes of element files, so you can also use a word method.

The Hazel rule file is also found in the action package.