How the page is made to accurately restore the design manuscript

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

As a qualified page refactoring and web designer, in fact, there is one basic ability: Web page restore design draft.

Can you do a page with a design draft?

One might think, it's not an atomic bomb.

I would like to say: the details are really important! The details determine success or failure, really can be lost millimeter miles, if you are trying to build a boutique project is really so scary. So in front of so many people want to pay more attention to the details of the page, really to the page when the atom bomb to do. Here to share some of my work experience, please make a lot of bricks.

The first step: Hit the snake seven-inch-visual code

Sometimes the design we get from a designer is not necessarily accurate, for example: The same class of module title text, one place is 13PX, another place is 14PX; a page has a variety of font colors the actual color value of the same is not the same; the row height of each paragraph is different; Pop-up box of the same type multiple dimensions; In this case, we cannot restore the design manuscript in order to restore the design.

In order to reduce the cost of communication with the designer, the architect has to urge the designer to make the visual specification of the whole station, and to specify the contents of the public can be stipulated in the form of documents, the later strict implementation.

The designer is best to set the visual specification before the page starts making, which can greatly reduce the cost of the page production. In addition, page production can be a template of things in the early stage to do a unified specification, such as fonts, ICON, border, background color, spacing, etc. do a unified class interface, such as the later design norms fixed down after the change of place to adjust it is very easy.

Step two: Everything is ready, only the east wind-design manuscript annotation

Be sure to ask the designer to design the draft on the various spacing, width, special fonts, special characters, special lines, such as high marks, so that when the page is produced without the need to reload also greatly enhance the accuracy of the reduction of the design manuscript, more reduce the cost of communication with the designer and the late linked costs. Examples are as follows:

Step three: 工欲善其事, prerequisite--Web page ruler tool (FastStone Capture)

Nautical compass, doctor's thermometer, and carpenter's tape measure ... Many occupations have its own measuring instruments, then we will be in the production of the page is bound to measure the spacing, width, height, color ... And so on data, then the page production should also have a professional page accurate measurement tool?

Here is an accurate measurement of the Web page software to share with you, software name is FastStone Capture, remember is a colleague recommended to me last year, just to find a screen can be a small software, and now I want to find a can be used to measure the Web page of the software, I think it can come in handy Software is small, but spite.

1. Open Measuring tools

Click on the right side of the Control Panel icon, open select "Screen ruler", will be displayed on the screen below the ruler, in order to facilitate perspective measurement, you can set the ruler transparent or translucent:

2. Transverse measurement

The default ruler is horizontal, you can press the keyboard, down, left, right key single pixel move ruler, the mouse point on the ruler, the screen in the upper right corner will have a magnifying glass display measurement area, drag the mouse can accurately measure the length of the horizontal. Drag ruler horizontal two edges can lengthen or shorten the ruler arbitrarily.

3. Vertical measurement

Click on the ruler, such as the Picture button icon to the ruler vertical:

or double-click the ruler to vertical the ruler.

Vertical and lateral measurements are similar in that they are not repeated here.

4. Point-to-Point measurement

Click on the ruler's icon: The screen in the upper right corner magnifier will show line length.

Use the mouse to drag the line from a point to point B to measure the distance between two points.

5. Rectangular Measurement

Unfortunately, the software has no triangular plates and no compasses, and it is difficult to measure the rectangle. Do not worry, you can use other methods to replace, here use the screen-cutting function.

Click on the ruler's icon to close the ruler, return to the Software Control Panel, point third icon (Flutter rectangle area): Drag the mouse to measure the Web page to measure the rectangular module bar, the screen left (or right) upper corner of the magnifying glass will display w*h= value * value, W is width, h is height

6, page color

Click on the icon to the right of the Software Control Panel:, the Drop-down box appears, select "Screen Color Picker", the eyedropper icon appears, moving the coordinates indicated by the eyedropper click to get the color value of any place on the screen.

OK, this is the end of a simple tutorial, I would like to make a video demo, but think of the software is actually very simple and simple, if there is not understand where the actual operation.

If you strictly do the above designers to the refactoring process three steps, the page will have so many pages to restore the design of the problem?

As it turns out, I've had a lot less of a problem with the new project I'm responsible for.

Article Source: http://www.cn8f.com/.