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

作者 : 开心源码 本文共716个字,预计阅读时间需要2分钟 发布时间: 2022-05-11 共76人阅读

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

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

青岛中新(83837777.com)

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 「前台 Zero系列」PS切图-测量与取色

发表回复