Front-end engineer skill-photoshop (from renderings to sprite) 2-measurement, photoshop Sprite

Source: Internet
Author: User

Front-end engineer skill-photoshop (from sprite to sprite) 2-measurement, photoshop Sprite

[Information to be measured]
[1] 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
[C] border
[D] Positioning
[E] Text Size
[F] Row Height
[G] background image position
[2] color information-> color (color reader)
[A] border color
[B] background color
[C] text color


[1]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.


[2] 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


[3] 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.


[4] 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


[5] 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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.