歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

 

热刺白鹿巷:測量(所有數字都要測量)

阿森纳热刺 www.tzxsac.com.cn 尺寸信息 - 測量 width:200px;

哪些需要測量呢?!CSS中所有能夠接受數值型的屬性都需要測量;盡可能100%還原設計稿。

  • 文字大小 font-size

單獨圖層,使用文字工具T,查看選項面板;合并圖層,矩形選框工具,文字高度即字號大小,不同字體有誤差。

  • 行高 line-height

單獨圖層,文字工具T,選項面板-屬性,行高即line-height;合并圖層,矩形選框,第一行下面到第二行下面。

  • 背景圖位置 background-position
  • 寬度、高度 width / height
  • 內邊距、外邊距 padding / margin
  • 邊框 border
  • 定位 top/right等

使用工具:矩形選框工具+信息面板(盡可能放大畫布,以減小誤差)

  • 矩形選框工具:默認是新選區,即唯一一個選區
  • 選區:即矩形選框工具選擇的區域,可多個疊加、刪減、交叉
  • 添加到選區:按住Shift 從選區減掉:按住Alt 與選區交叉:按住Shift+Alt

小技巧:大圖測量寬度 > 左右兩邊畫小圖(shift),寬度為小圖最左到最右的寬度


取色(所有顏色都要取色)

顏色信息 - 取色 color:#fff;

哪些需要取色呢?!CSS中所有能接受顏色值的屬性都要取色。

  • 文字色 color

單獨圖層,文字工具T;合并圖層,放大,吸管拾色;文字圖層有疊加,拾色器+吸管,小心鋸齒,選擇深的地方。

  • 背景色 background-color
  • 邊框色 border-color

使用工具:拾色器+吸管工具(取色時盡量放大)

取色工具巧用:

  • 確定背景是否為純色:不停的點擊,觀察顏色值是否變化。
  • 確定是否為線性漸變:魔棒工具(容差較小的情況下,顏色選定區域,比如Y/X軸漸變)。

「前端 Zero系列」PS切圖-測量與取色

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/css-ps/ps50845.shtml