IT工程師數位筆記本

前面的話

　　前端工程師使用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移動