Front-end engineer Skills Photoshop skillfully (from renderings to sprite) 2--measurement

"Information that needs to be measured"
[1] Dimension information--Measurement (Rectangle Marquee tool + information Panel)
[note] When measuring, the canvas is placed as large as possible
[A] width, height
[b] inner margin, margin
[C] Border
[d] Positioning
[E] Text size
[F] Row height
[g] Background map position
[2] Color information, take color (color picker)
[A] border color
[b] Background color
[C] Text color

Actual combat

"1" measurement picture width height
[1.1] measure normal picture width : First select a large area with the Rectangle Marquee tool, and then hold down the ALT key to subtract the extra part

[1.2] measure the width of a large area over 1 screens : First, use the Rectangle Marquee tool to draw a small rectangle on the far left, hold down the SHIFT key, and then draw a small rectangle on the far right, and the width information on the information panel is the width information of the area to be measured.

"2" Measure text size, line height and text color

[2.1] When text is a separate layer : You can get text size, line height and text color information by several panels on the options panel

[note] if the text color of the panel selected color and the color of the display does not match, it may be because the text color is added to other effects of processing, this situation still requires the eyedropper tool to absorb the color

[2.2] When the text has been merged in the layer, the situation is more complicated

[note] Zora the reference line when the accuracy is not very high, first pull out the guide line, the mouse does not loose, and then hold down the CTRL key, you can let the guide to 0.1px Mobile
　　[2.2.1] Font size : Font size may not be the same for text in different fonts. General selection of the largest line of text to measure, the result is relatively accurate
　　[2.2.2] Row height : A line of measurement, from the bottom of the first line to the bottom of the second row
　　[2.2.3] Font Color acquisition : Use the eyedropper tool to note that the text enlarged after a lot of jagged, to absorb the color of the more solid parts

[3] volume letters, numbers, symbol size : A comparison of a letter to see. Then set the line height and font size to match, look at the letters and up and down to the bottom of the empty few, and then set the row height

[4] set bold : The letter will be more than one pixel, but the calculation is still calculated according to the original font size. After bold, the original 1-pixel vertical line becomes 2 pixels

[5] Determining color
[5.1] Determine the solid color : When the naked eye cannot determine whether an area is a solid color, you can use the Color tool to help, open the Color tool, hold down the mouse does not release, and move, when the color value of the change is not a solid color

　　

　　[5.2] Determining the linear gradient : First use the Move tool to select the layer, and then click with the Magic Wand tool, if the appearance of the horizontal bar, then the vertical color changes in the linear gradient

"Precautions when measuring drawings"
[A] The amount of time to measure the width of the content area, if there is padding, remember to subtract the value of padding
[B] The space is half the size of the text when the song body
[C] The punctuation of Chinese characters is the size of one character, and the punctuation of English characters is half the size of a character
[d]1 pixels of the colon point is the song Body English state, 4 pixels of the colon point may be Arial Chinese, Microsoft ya Black in English
[E] If two characters get too close, or even overlap, the letter-spacing is negative

Front-end engineer Skills Photoshop skillfully (from to sprite) 2--measurement