As a qualified page reconstructor, the ability to "restore web page design draft" is very important. Whether the page can be exactly the same as the design draft needs to be focused on. Sometimes, details can determine success or failure, and the difference between success and failure can be said to be thousands of miles. Especially when creating a boutique project.
1. Visual specifications
Sometimes the design drafts we get from designers are not necessarily accurate. For example: the module title text of the same type is 13PX in one place and 14PX in another place; a page has multiple font colors. It looks the same to the naked eye but the actual color value is different; the line height of each paragraph is different; the same type of pop-up box has multiple sizes, etc... In this case, we cannot restore the design draft for the sake of restoring the design draft.
In order to reduce the cost of communication with the designer, the refactoring engineer had to urge the designer to make visual specifications for the entire site in the early stage, write down some publicly agreed upon content in the form of a document, and strictly implement it in the later stage.
It is best for designers to set visual specifications before starting to create the page. This can greatly reduce the cost of post-production joint debugging of the page. 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 create unified class interfaces. Once the design specifications are fixed in the later stage, it will be easy to adjust any changes. .
2. Annotation of design drafts
must require designers to mark various spacings, widths, 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, and the restoration is greatly enhanced. The accuracy of the design draft also reduces the cost of communication with the designer and the cost of post-production joint debugging. Here's an example:
3. Web page ruler tool (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 spacing, width, Height, color... and other data, then should page production also have a professional tool for accurate page measurement?
Here is a software that can accurately measure web pages, FastStone Capture. It can be said that although the software is small, it has all the essentials. .
4. FastStone Capture simple tutorial
1. Open the measurement tool
Click on the icon on the far right of the control panel
, open and select "Screen Ruler", the ruler as shown below will be displayed on the screen. To facilitate perspective measurement, the ruler can be set to transparent or translucent:
2.
For horizontal measurement, the default ruler is placed horizontally. You can press the up, down, left, and right keys on the keyboard to move the ruler by a single pixel. Click the mouse 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 length of the level. Drag the two horizontal edges of the ruler to lengthen or shorten it.
3. To measure vertically,
click the button icon as shown on the ruler.
To make the ruler vertical: Or double-click the ruler to make the ruler vertical.
The methods of vertical measurement and horizontal measurement are similar, so I won’t repeat them here.
4. To measure point-to-point,
click the icon on the ruler:
, the magnifying glass in the upper right corner of the screen will display 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 set square or a compass, making it difficult to measure a rectangle. Don’t worry, you can use other methods instead. Here we use the screenshot function.
Click on the ruler icon
Close the ruler, return to the software control panel, and click the third icon
(Capture rectangular area):
Drag the mouse to measure the rectangular module of the web page you want to measure. The magnifying glass in the upper left (or right) corner of the screen will display w*h=value*value, w is the width, and h is the height.
6.
Click the icon on the right side of the software control panel to select the color of the web page:
, a drop-down box appears, select "Screen Color Picker", the eyedropper icon appears, move the coordinates indicated by the eyedropper and click to obtain the color value anywhere on the screen.