As a qualified page reconstructor, the ability to "web page restoration design draft" is very important. Whether the page is exactly the same as the design draft needs to be paid attention to. Sometimes, details can determine success or failure, which can be said to be a huge difference. Especially when creating a boutique project. 1. Visual norms Sometimes the design drafts we get from designers are not necessarily accurate, for example: the same type of module title text, one place is 13PX, the other place is 14PX; a page has multiple font colors and looks the same as the naked eye. However, the actual color values obtained are different; the row heights of each paragraph are different; the pop-up frames of the same type are multiple sizes, etc. In this case, we cannot restore the design draft in order to restore the design draft. In order to reduce the cost of communication with designers, the reconstructor had to urge designers to make visual specifications for the entire site in the early stage, write some publicly agreed content in the form of documents, and strictly implement it in the later stage. It is best for designers to set visual specifications before the page starts to be produced, which can greatly reduce the cost of post-production joint debugging. In addition, page production can make unified specifications for templated things in the early stage, such as fonts, ICONs, borders, background colors, spacing, etc., and it is easy to adjust the changes after the post-design specifications are fixed. . 2. Design draft mark It is necessary to require the designer to mark various spacing, width, special fonts, special font colors, special line heights, etc. on the design draft. This way, there is no need to re-measure when making the page, which greatly enhances the accuracy of restoring the design draft. , which reduces the communication costs with designers and the cost of post-stage joint adjustments. Examples as follows: 3. FastStone Capture Compass for navigation, thermometer for doctors, tape measure for carpenters... Many professions have their own special measuring instruments, so when we make pages, we must also measure data such as spacing, width, height, color, etc. So should there be a professional page accurate measurement tool for page production? Here is a software that can accurately measure web pages, FastStone Capture, which can be described as small but complete. 4. FastStone Capture simple tutorial 1. Open the measurement tool Click the icon on the far right of the control panel and open and select "Screen Ruler". The ruler in the figure below will be displayed on the screen. For the convenience of perspective measurement, the ruler can be set to transparent or translucent: 2. Horizontal measurement The default ruler is placed horizontally. You can move the ruler by pressing the upper, lower, left and right buttons on the keyboard. The mouse is on the scale of the ruler. There will be a magnifying glass in the upper right corner of the screen to display the measurement area. Drag the mouse to accurately measure the level. length. Drag the edges of the ruler to lengthen or shorten the ruler at will. 3. Vertical measurement Click the button icon as shown on the ruler to make the ruler vertically: or double-click the ruler to make the ruler vertically. The methods of vertical measurement and lateral measurement are similar, so I won't repeat it here. 4. Point-to-point measurement Click the icon on the ruler: , the magnifying glass in the upper right corner of the screen will show the line length. Use the mouse to drag the straight line from point A to point B and measure the distance between the two points. 5. Rectangle measurement Unfortunately, the software does not have a triangle board or a compass, making it difficult to measure rectangles. Don't worry, you can use other methods instead, and the screenshot function is used here. Click the icon on the ruler to close the ruler, return to the software control panel, and click the third icon (catch the rectangular area): Drag the mouse to measure the web page rectangular module you want to measure. The magnifying glass on the upper left (or right) of the screen will display w*h=value*value, w is width and h is height. 6. Color collection of web pages Click the icon on the right side of the software control panel: the drop-down box appears, select "Screen Color Picker", the straw icon appears, move the coordinates indicated by the straw, click to get the color value at any place of the screen.