we often describe the code written by some excellent developers with "neat", "readable", "friendly", "easy to maintain" and "reuse". Now, there’s a much more fashionable word, grace, that sounds good to me,


page is the level of Internet products, not only looking at the appearance, but also respond to the needs of the rapid updating of Internet products. To be an excellent developer, experience accumulation is essential, and part of the experience is summed up in the details of the work process. Here is the page in the development process of the details of many aspects, I hope to discuss these details, you can help developers do better, more elegant posture to write pages.

starts with Photoshop,

from UI to design static pages are generally referred to as "chetumal". This word is easily reminiscent of Photoshop’s "slicing tool", but now with the slicing tool is not much, most of the visual elements in the page to use, need to split one or more separate pictures.

Separation and combination of

visual elements

‘s rapid update of Internet product requirements has made UI designers prioritize the visual effects of UI design drafts, and therefore sometimes do not have time to sort out the UI design draft source files. So, to get the UI design draft at hand, there may be a lack of naming, grouping confusion and so on.

How does

quickly find the layers of visual elements that need to be separated? This time you should use Photoshop’s auto selection". Also notice that some edges, shadows, and highlights are generated by layer styles. When you select these sections, you should select the actual drawing next to them.


Photoshop’s "move tool". Check out the "auto select" check box when you use it. In addition, you can set whether to select the layer or the group in which the layer is located.

splicing is done on a newly created PSD source file, named after the last output picture. You should use the grid for neat arrangement (shortcut key, Ctrl +, toggle grid display). Neat puzzles are not only convenient for editing, but also for setting the coordinates of CSS code more quickly (everyone likes regular numbers).


in Photoshop Edit > preferences, you can set the appropriate grid size.

to facilitate subsequent editing, spell >