前端工程師技能之photoshop靈活使用系列第二篇——測(cè)量篇

前面的話

　　前端工程師使用photoshop進(jìn)行的大量工作實(shí)際上是測(cè)量。本文是photoshop巧用系列第二篇——測(cè)量篇

測(cè)量信息

　　在網(wǎng)頁(yè)制作中需要使用photoshop測(cè)量的信息分為兩類，分別是尺寸信息和顏色信息

　　【1】尺寸信息

　　　　尺寸信息主要通過矩形選框工具配合信息面板進(jìn)行測(cè)量，共包括以下項(xiàng)目：

　　　　1、寬度、高度

　　　　2、內(nèi)邊距、外邊距

　　　　3、邊框

　　　　4、定位

　　　　5、文字大小

　　　　6、行高

　　　　7、背景圖位置

　　　　[注意]測(cè)量時(shí)，畫布放得盡可能大，這樣結(jié)果才相對(duì)更準(zhǔn)確

　　【2】顏色信息

　　　　顏色信息主要通過取色器來進(jìn)行測(cè)量，共包括以下項(xiàng)目：
　　　　1、邊框色

　　　　2、背景色

　　　　3、文字色

實(shí)戰(zhàn)

　　接下來，通過幾個(gè)實(shí)際測(cè)量來詳細(xì)說明使用photoshop測(cè)量的要點(diǎn)

【測(cè)量圖片寬高】

　　1、測(cè)量普通圖片寬高

　　　　先用矩形選框工具選擇一個(gè)大的區(qū)域，然后再按住alt鍵，減去多余的部分

　　2、測(cè)量超過1屏的大區(qū)域的寬高

　　　　先用矩形選框工具在最左邊畫一個(gè)小矩形，按住shift鍵，在最右邊畫一個(gè)小矩形，信息面板上的寬度信息就是要測(cè)量的該區(qū)域的寬度信息

【測(cè)量文字大小、行高及文字顏色】

　　1、當(dāng)文字是單獨(dú)圖層

　　　　通過選項(xiàng)面板上的幾個(gè)面板可以分別得到文字大小、行高及文字顏色信息

　　[注意]若文字顏色面板選出的顏色與顯示的顏色不相符時(shí)，可能是因?yàn)槲淖诸伾�被加入了其他效果的處理，這種情況還是需要吸管工具來吸取顏色

　　2、當(dāng)文字已經(jīng)合并在圖層中時(shí)，則情況較復(fù)雜些

　　a、字體大小

　　　　對(duì)于不同字體的文字，字體大小可能是不一樣的。一般選擇一行中最大的文字進(jìn)行測(cè)量，結(jié)果相對(duì)較準(zhǔn)

　　　　[注意]文字右方或下方有時(shí)會(huì)有1像素的間隙

　　b、行高

　　　　行高的測(cè)量實(shí)際是一行的測(cè)量，從第一行的下面到第二行的下面

　　c、字體顏色的獲取

　　　　用吸管工具吸取時(shí)要注意，文字放大后有很多鋸齒，要吸取顏色較實(shí)的部分

【量字母、數(shù)字、符號(hào)大小】

　　敲一個(gè)字母對(duì)比來看。然后將行高和字體大小設(shè)置成一致，看字母和上下到底空幾格，然后再設(shè)置行高

【設(shè)置加粗】

　　設(shè)置加粗后，字母會(huì)多一個(gè)像素，但仍然按照原來的字體大小計(jì)算。加粗之后，原來1個(gè)像素的豎線變成2個(gè)像素

【確定顏色】

　　1、確定純色

　　當(dāng)肉眼無法確定一個(gè)區(qū)域是不是一個(gè)純色時(shí)，可以用取色工具幫助。打開取色工具，按住鼠標(biāo)不松開并移動(dòng)，當(dāng)取到的顏色值有變化時(shí)就不是純色

　　2、確定線性漸變

　　先用移動(dòng)工具選擇圖層，再用魔棒工具點(diǎn)擊，若出現(xiàn)的都是橫向的長(zhǎng)條，則為縱向顏色變化的線性漸變

注意事項(xiàng)

　　【1】量圖的時(shí)候量到的內(nèi)容區(qū)的寬度，如果有padding，要減去padding的值

　　【2】當(dāng)字體類型為字體時(shí)，空格為文字大小的一半

　　【3】中文字符的標(biāo)點(diǎn)占一個(gè)字符的大小，英文字符的標(biāo)點(diǎn)占半個(gè)字符的大小

　　【4】1個(gè)像素的冒號(hào)點(diǎn)是宋體英文狀態(tài)，4個(gè)像素的冒號(hào)點(diǎn)可能是宋體中文、微軟雅黑的中英文

　　【5】如果兩個(gè)字符挨得太近，甚至發(fā)生重疊，很有可能是letter-spacing為負(fù)數(shù)

　　【6】若拉參考線精度不高時(shí)，先拉出參考線，鼠標(biāo)不要松，然后按住ctrl鍵，可以讓參考線以0.1px移動(dòng)

更多前端工程師技能之photoshop巧用系列第二篇——測(cè)量篇 相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！