Web page design details more elegant design page

Article Description: The page is the performance level of the Internet product, not only emphasizes the appearance, but also should respond to the update fast Internet product demand. To be a good developer, experience accumulation is essential, and part of the experience is summed up in the details of the work process. The following is a detailed description of the details of the page development process, and I hope that these details will help

We often use "neat", "easy to read", "cordial", "easy to maintain", "forte" to describe some good developers write code. Now, there is a more fashionable word for the code "elegant", does it sound like a very cordial?

The page is the performance level of the Internet product, not only emphasizes the appearance, but also should respond to the update fast Internet product demand. To be a good developer, experience accumulation is essential, and part of the experience is summed up in the details of the work process. Described below is the details of the page development process in many aspects, I hope that the details of the discussion, can help you page developers to do a better job to more elegant posture to write the page.

Starting from Photoshop

From a UI design to a static page, it is generally called a "cut diagram." The word is easily reminiscent of the "slicing tool" in Photoshop, but now the slicing tool is not used much, and most of the visual elements that are needed on the page need to be flattened into one or more separate pictures.

Separation and flattening of visual elements

Fast-Updated Internet product requirements Enable UI designers to prioritize the visual effects of UI design drafts, and therefore sometimes have no time to organize UI design manuscripts. So, to get the UI design at hand, there may be problems with layers missing naming, grouping clutter, and so on.

How can I quickly find the layer that contains the visual elements that need to be detached? This is where you should use the "automatic selection" of Photoshop. Also note that some edge shadows and high light are generated by layer styles, and you should select the actual drawing content next to them when you select those parts.

Photoshop's "Move Tool", when used, tick an "Auto select" checkbox. You can also set whether to automatically select a layer or the group in which the layer is located.

The flattening is done on a newly created PSD source file, which should be named the same as the last picture that was exported. When flattening, you should use the grid to make neat arrangements (shortcut CTRL + ' toggle grid display). Neat puzzle is not only convenient for many people to edit, and the CSS code in the background coordinate positioning will be more efficient (who like the regular number).

You can set the appropriate grid size in Photoshop's edit → preferences.

For the convenience of subsequent edits, the puzzle source file should retain the original UI design layer (such as retaining the text layer, do not do layer merging, convenient text changes), and do a good job of layer naming and grouping. In addition, it is recommended to add 2 layers at the bottom: the background layer and the grid dimension description layer.

Background layer: The edge of the subnet is not easily visible in Photoshop, which defaults to the transparent area's grid background (unlike the "grid" of the previous size identification). And with a full canvas background, the grid line is easy to identify. Background generally with pure white, for some of the color of the UI elements, you can fill the black as the background. The background layer is just convenient to arrange the elements, in the output picture, the background layer is set to invisible and then output.

Grid Dimension Description Layer: Blank layer, with the name "20x20" in this format, indicating the size of the grid used. In this way, many people edit, you can easily set the right to edit this puzzle source files of the grid size.

Puzzle source files must be saved to the development directory, you can in the images directory, a separate directory named _PSD, and then the relevant puzzle source files are saved in this directory.

In a static page, a temporary picture (such as a user avatar) used as a placeholder and schematic for a picture can be saved in a directory named _temp.

The miscellaneous edges of GIF and png-8 pictures

Why do pictures in GIF and png-8 format have miscellaneous edges? This is because pictures in GIF and png-8 format use indexed color encoding, and in indexed colors there is only a fully transparent indexed color (used to draw fully transparent pixels, or blank points), without semitransparent index colors. However, the edges of the general visual elements have translucent pixel points to form a visual smooth transition, these translucent points to retain to GIF and png-8, you must specify a solid color substitution. This is also the meaning of the miscellaneous edge option in Photoshop.

This color table in Photoshop can be seen with only this fully transparent indexed color.

In Photoshop, you can also select the matte as "none", when the semitransparent point is discarded and is no longer retained in the output image. Because the edges are missing pixels that are used as transitions, such images can have significant sawtooth and, in most cases, are not effective.

Click on the small arrow next to the "Miscellaneous edge" to select "None" in the Drop-down menu.

If you select a color as a matte, Photoshop takes the translucent pixel in the image into account when it generates the indexed color table and replaces the semitransparent pixels with the appropriate indexed color (reference to the selected matte). There are the visual elements in the colored GIF and png-8 graphs, which are in the same background color as the matte color, the effect is the best, so the selection of the edge color should refer to the background of the final element.

Use png-24 If you have multiple categories of backgrounds that do not guarantee an effect. The png-24 are actually basically png-32, that is, the transparency alpha channel should be included. This is also because in Photoshop, only a check box is used to differentiate between png-24 and png-32.

After the "transparency" is checked, the png-32 is actually saved.

For IE6 that do not support png-32, output a png-8 or GIF that is less effective to a certain extent to ensure the normal appearance of IE6. This is also for the different browsers "progressive enhancement" development idea embodiment.

A png-8 diagram that is saved separately for IE6.

[1] [2] [3] Next page