前面的話
前端工程師使用photoshop進行的大量工作實際上是測量。本文是photoshop巧用系列第二篇——測量篇
測量資訊
在網頁製作中需要使用photoshop測量的資訊分為兩類，分別是尺寸資訊和顏色資訊
【1】尺寸資訊
尺寸資訊主要通過矩形選框工具配合資訊皮膚進行測量，共包括以下專案：
1、寬度、高度
2、內邊距、外邊距
3、邊框
4、定位
5、文字大小
6、行高
7、背景圖位置
[注意]測量時，畫布放得儘可能大，這樣結果才相對更準確
【2】顏色資訊
顏色資訊主要通過取色器來進行測量，共包括以下專案：
1、邊框色
2、背景色
3、文字色
實戰
接下來，通過幾個實際測量來詳細說明使用photoshop測量的要點
【測量圖片寬高】
1、測量普通圖片寬高
先用矩形選框工具選擇一個大的區域，然後再按住alt鍵，減去多餘的部分
 |
 |
 |
2、測量超過1屏的大區域的寬高
先用矩形選框工具在最左邊畫一個小矩形，按住shift鍵，在最右邊畫一個小矩形，資訊皮膚上的寬度資訊就是要測量的該區域的寬度資訊
 |
 |
 |
 |
【測量文字大小、行高及文字顏色】
1、當文字是單獨圖層
通過選項皮膚上的幾個皮膚可以分別得到文字大小、行高及文字顏色資訊
 |
 |
[注意]若文字顏色皮膚選出的顏色與顯示的顏色不相符時，可能是因為文字顏色被加入了其他效果的處理，這種情況還是需要吸管工具來吸取顏色
 |
 |
2、當文字已經合併在圖層中時，則情況較複雜些
a、字型大小
對於不同字型的文字，字型大小可能是不一樣的。一般選擇一行中最大的文字進行測量，結果相對較準
[注意]文字右方或下方有時會有1畫素的間隙
b、行高
行高的測量實際是一行的測量，從第一行的下面到第二行的下面
c、字型顏色的獲取
用吸管工具吸取時要注意，文字放大後有很多鋸齒，要吸取顏色較實的部分
 |
 |
 |
 |
【量字母、數字、符號大小】
敲一個字母對比來看。然後將行高和字型大小設定成一致，看字母和上下到底空幾格，然後再設定行高
 |
 |
 |
 |
 |
 |
【設定加粗】
設定加粗後，字母會多一個畫素，但仍然按照原來的字型大小計算。加粗之後，原來1個畫素的豎線變成2個畫素
 |
 |
【確定顏色】
1、確定純色
當肉眼無法確定一個區域是不是一個純色時，可以用取色工具幫助。開啟取色工具，按住滑鼠不鬆開並移動，當取到的顏色值有變化時就不是純色
 |
 |
2、確定線性漸變
先用移動工具選擇圖層，再用魔棒工具點選，若出現的都是橫向的長條，則為縱向顏色變化的線性漸變
 |
 |
 |
注意事項
【1】量圖的時候量到的內容區的寬度，如果有padding，要減去padding的值
【2】當字型型別為字型時，空格為文字大小的一半
【3】中文字元的標點佔一個字元的大小，英文字元的標點佔半個字元的大小
【4】1個畫素的冒號點是宋體英文狀態，4個畫素的冒號點可能是宋體中文、微軟雅黑的中英文
【5】如果兩個字元捱得太近，甚至發生重疊，很有可能是letter-spacing為負數
【6】若拉參考線精度不高時，先拉出參考線，滑鼠不要鬆，然後按住ctrl鍵，可以讓參考線以0.1px移動