Front-end engineer skill-photoshop (from sprite to sprite) 2-measurement, photoshop Sprite
[Information to be measured]
 dimension information-> measurement (rectangular box selection tool + information panel)
[Note] the canvas should be as big as possible during measurement.
[A] width and height
[B] padding and margin
[E] Text Size
[F] Row Height
[G] background image position
 color information-> color (color reader)
[A] border color
[B] background color
[C] text color
Measure image width and height
[1.1]Measure the width and height of a common image: First use the Rectangular Box selection tool to select a large area, and then press and hold the alt key, minus the excess part.
[1.2]Measure the width and height of a large area over 1 screen: First use the Rectangular Box selection tool to draw a small rectangle on the leftmost side, hold down the shift key, and then draw a small rectangle on the rightmost side, the width information on the information panel is the width information of the area to be measured.
 Measuring text size, line height, and text color
[2.1] when the text is a separate layer: You can obtain the text size, line height, and text color information from the Panel.
[Note]If the color selected by the panel of the text color does not match the color displayed, it may be because the text color is added with other effects. In this case, you still need a straw tool to absorb the color.
[2.2] the situation is more complex when the text has been merged into layers.
[Note]If the accuracy is not very high when you pull the reference line, first pull the reference line, do not loosen the mouse, and then press ctrl to move the reference line at 0.1px.
[2.2.1] font size: The font size of different fonts may be different. Generally, the largest text in a row is selected for measurement, and the result is relatively accurate.
[Note]Sometimes there is a gap of 1 pixel between the right and bottom of the text
[2.2.2] Row Height: The measurement of a row, from below the first line to below the second line
[2.2.3] How to obtain the font color: When using a straw tool, you should note that there are a lot of sertices after the text is zoomed in, to absorb the more solid color part
 letters, numbers, and symbols: Enter a letter for comparison. Set the Row Height and font size to the same, check whether the upper and lower rows are empty, and then set the Row Height.
 set bold: One pixel more than one letter, but the calculation is still based on the original font size. After thickening, the original 1-pixel vertical line is changed to 2 pixels
 determine the color
[5.1] determine solid color: When the naked eye cannot determine whether a region is a solid color, you can use the color Extraction Tool to help open the color Extraction Tool, hold down the mouse, do not release, and move, when the obtained color value changes, it is not a solid color.
[5.2] linear gradient Determination: First use the mobile tool to select a layer, and then click it with the magic wand tool. If a horizontal bar appears, it is a linear gradient with vertical color changes.
[Notes for measuring graphs]
[A] The width of the content area in the volume graph. If padding exists, remember to subtract the value of padding.
[B], the space is half the text size
[C] The punctuation of a Chinese character occupies the size of one character, and the punctuation of an English character occupies the size of half a character
[D] the colon of one pixel is the English state of, And the colon of Four pixels may be the Chinese and English characters of
[E] If two characters are too close or even overlapped, the letter-spacing is negative.