|
導讀Adobe Photoshop,簡稱“PS”,是由Adobe Systems開發和發行的圖像處理軟件。Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具,可以有效地進行圖片... Adobe Photoshop,簡稱“PS”,是由Adobe Systems開發和發行的圖像處理軟件。Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具,可以有效地進行圖片編輯工作。ps有很多功能,在圖像、圖形、文字、視頻、出版等各方面都有涉及。 前面的話前端工程師使用photoshop進行的大量工作實際上是測量。本文是photoshop巧用系列第二篇——測量篇
測量信息在網頁制作中需要使用photoshop測量的信息分為兩類,分別是尺寸信息和顏色信息 【1】尺寸信息 尺寸信息主要通過矩形選框工具配合信息面板進行測量,共包括以下項目: 1、寬度、高度 2、內邊距、外邊距 3、邊框 4、定位 5、文字大小 6、行高 7、背景圖位置 [注意]測量時,畫布放得盡可能大,這樣結果才相對更準確 【2】顏色信息 顏色信息主要通過取色器來進行測量,共包括以下項目: 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移動 更多前端工程師技能之photoshop巧用系列第二篇——測量篇 相關文章請關注PHP中文網! Photoshop默認保存的文件格式,可以保留所有有圖層、色版、通道、蒙版、路徑、未柵格化文字以及圖層樣式等。 |
溫馨提示:喜歡本站的話,請收藏一下本站!