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

PS切图-测量、取色

 

在网页制作中需要使用PS获取的信息分为两类:尺寸信息和颜色信息。

获取信息(设计稿)

尺寸信息 > 测量:width:200px;

颜色信息 > 取色:color:#ffccoo;

(1)测量(所有数字都要测量) >> 尽可能100%还原设计稿

哪些需要测量呢? // CSS中所有能够接受数值型的属性都需要测量

文本 文字大小(font-size)

单独图层,使用文字工具T,查看选项面板;

合并图层,矩形选框工具,文字高度即字号高度,不同字体有误差;

行高(lineheight)

单独图层,文字工具T,选项面板-属性面板,行高即lineheight

合并图层,矩形选框工具,放大,第一行的下面到第二行的下面

背景 背景图位置(background-position)

盒模型 高度、宽度(width/height) 内外边距(padding/margin) 边框(border)

布局 定位(top、right等)

>> 使用工具:矩形选框工具 + 信息面板(尽可能放大画布,以减小误差)

// 矩形选框工具,默认是新选区,即唯一一个选区

选区:即矩形选框工具选择的区域,可多个叠加、删减、交叉

添加到选区:按住Shift

从选区减掉:按住Alt

与选区交叉:按住Shift + Alt

> 小技巧:大图测量宽度 - 左右两边各画小图(shift),宽度为小图最左到最右的宽度

(2)取色(所有颜色都要取色)

哪些需要取色? // CSS中能接受颜色值的属性都要取色

文本 文字色(color)

单独图层,使用文字工具T获得;合并图层,放大,吸管拾色;

文字图层有叠加效果,拾色器+吸管工具,小心锯齿,选择深的地方。

背景 背景色(background-color)

盒模型 边框色(border-color)

>> 使用工具:拾色器+吸管工具(取色时尽量放大)

// 取色工具巧用

确定背景是否为纯色 > 不停的点击,观察颜色值是否变化

确定是否为线性渐变 > 魔棒工具(容差较小情况下,颜色选定区域,如Y、X轴渐变)

【案例】

PS切图-测量、取色

测量普通图片宽高

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

PS切图-测量、取色

 

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

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