「前端 Zero系列」PS切图.docx

PAGE PAGE 1 「前端 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轴渐变）。