前端工程師技能之photoshop巧用系列第二篇——測量篇

前面的話

　　前端工程師使用photoshop進行的大量工做其實是測量。本文是photoshop巧用系列第二篇——測量篇

 

測量信息

　　在網頁製做中須要使用photoshop測量的信息分爲兩類，分別是尺寸信息和顏色信息

　　【1】尺寸信息

　　　　尺寸信息主要經過矩形選框工具配合信息面板進行測量，共包括如下項目：

　　　　一、寬度、高度

　　　　二、內邊距、外邊距

　　　　三、邊框

　　　　四、定位

　　　　五、文字大小

　　　　六、行高

　　　　七、背景圖位置

　　　　[注意]測量時，畫布放得儘量大，這樣結果才相對更準確

　　【2】顏色信息

　　　　顏色信息主要經過取色器來進行測量，共包括如下項目：
　　　　一、邊框色

　　　　二、背景色

　　　　三、文字色

實戰

　　接下來，經過幾個實際測量來詳細說明使用photoshop測量的要點

【測量圖片寬高】

　　一、測量普通圖片寬高

　　　　先用矩形選框工具選擇一個大的區域，而後再按住alt鍵，減去多餘的部分

　　二、測量超過1屏的大區域的寬高

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

 

【測量文字大小、行高及文字顏色】

　　一、當文字是單獨圖層

　　　　經過選項面板上的幾個面板能夠分別獲得文字大小、行高及文字顏色信息

　　[注意]若文字顏色面板選出的顏色與顯示的顏色不相符時，多是由於文字顏色被加入了其餘效果的處理，這種狀況仍是須要吸管工具來吸收顏色

　　二、當文字已經合併在圖層中時，則狀況較複雜些

　　a、字體大小

　　　　對於不一樣字體的文字，字體大小多是不同的。通常選擇一行中最大的文字進行測量，結果相對較準

　　　　[注意]文字右方或下方有時會有1像素的間隙

　　b、行高

　　　　行高的測量實際是一行的測量，從第一行的下面到第二行的下面

　　c、字體顏色的獲取

　　　　用吸管工具吸收時要注意，文字放大後有不少鋸齒，要吸收顏色較實的部分

 

【量字母、數字、符號大小】

　　敲一個字母對比來看。而後將行高和字體大小設置成一致，看字母和上下到底空幾格，而後再設置行高

 

【設置加粗】

　　設置加粗後，字母會多一個像素，但仍然按照原來的字體大小計算。加粗以後，原來1個像素的豎線變成2個像素

 

【肯定顏色】

　　一、肯定純色

　　當肉眼沒法肯定一個區域是否是一個純色時，能夠用取色工具幫助。打開取色工具，按住鼠標不鬆開並移動，當取到的顏色值有變化時就不是純色

　　二、肯定線性漸變

　　先用移動工具選擇圖層，再用魔棒工具點擊，若出現的都是橫向的長條，則爲縱向顏色變化的線性漸變

 

注意事項

　　【1】量圖的時候量到的內容區的寬度，若是有padding，要減去padding的值

　　【2】當字體類型爲字體時，空格爲文字大小的一半

　　【3】中文字符的標點佔一個字符的大小，英文字符的標點佔半個字符的大小

　　【4】1個像素的冒號點是宋體英文狀態，4個像素的冒號點多是宋體中文、微軟雅黑的中英文

　　【5】若是兩個字符捱得太近，甚至發生重疊，頗有多是letter-spacing爲負數

　　【6】若拉參考線精度不高時，先拉出參考線，鼠標不要鬆，而後按住ctrl鍵，可讓參考線以0.1px移動