欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

「前端 Zero系列」PS切图-测量与取色

 

测量(所有数字都要测量)

尺寸信息 - 测量 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切图-测量与取色

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50845.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-11 22:47 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。