前端工程师技能之photoshop巧用(从效果图到雪碧图)3--切图篇_html/css_WEB-ITnose

【哪些是需要切出来的】
　　[1]修饰性的(一般用在background属性)
　　  [注意]修饰性图片一般保存为png24(IE6不支持半透明)和png8格式
　　　　[a]图标、logo
　　　　[b]有特殊效果的按钮、文字等(如果设计师设计的字体不太常见的话,把文字当图片来切出来)
　　　　[c]非纯色的背景

　　[2]内容性的(一般用在img标签)
　　  [注意]内容性图片一般是服务器的数据，一般不用切图，只用占位即可
　　　　[a]Banner、广告图片
　　　　[b]文章中的配图
　　　　[c]内容性图片颜色较丰富，一般存为JPG格式，且需要一定的压缩

 

【切图步骤】
　　【1】隐藏文字只留背景(若文字上有特殊效果，无法用代码写出，则把文字和背景一起切出来)
　　　　【1.1】若文字为独立图层，则隐藏文字图片
　　　　　　【a】找到文字图层
　　　　　　【b】去掉眼睛图标

　　　　【1.2】若文字和背景合并，平铺背景覆盖文字
　　　　　　【1.2.1】若背景是可以拉伸的，用矩形选框工具在背景上画一个小的矩形框，用自由变换工具(ctrl+t)拉伸背景，将文字覆盖,然后双击或按回车键

　　　　　　【1.2.2】若背景有纹理，不可以拉伸，用矩形选框工具在背景上画一个小的矩形框，用移动工具【v】+alt来复制当前图层，一次次地按下方向键或用鼠标移动(鼠标移动时，按住shift键时可以保证图层按照直线移动)，最终将文字全部覆盖为止

　　【2】移动工具选中所需图层(ctrl+点击图层的矩形区域)，出现蚂蚁线

　　【3】合并图层(ctrl+e)(可选):勾选自动选择,然后将需要的多个图层合并

　　【4】复制图层(ctrl+c) ->新建文件(ctrl+n),并按确定 -> 粘贴图层(ctrl+v)

【实战】

　　【切png8】png8不支持半透明，所以需要带背景切
　　　　【1】合并可见图层(shift+ctrl+e)
　　　　【2】矩形选框工具选择一个大的区域
　　　　【3】魔棒工具去除多余部分(从选区中减去:按住alt)

 

　　【切不规则小图标】:切法和png8的切法类似
　　　　[注意]选择镂空小图标时，一定要取消[连续]

 

　　【切可平铺背景】
　　　　【1】用矩形选框工具选取一块区域
　　　　【2】复制粘贴到新文件中(平铺内容充满文件的宽(x轴)或高(y轴))
　　　　　　[a]若沿x轴平铺，则铺满x轴
　　　　　　[b]若沿y轴平铺，则铺满y轴

　　【切片工具一刀切】:适用于可以一刀切的活动页
　　　　【1】拉参考线
　　　　【2】选择切片工具
　　　　【3】点击基于参考线的切片按钮
　　　　【4】从切片工具切换到切片选择工具(在同一个按钮下)
　　　　【5】双击切片，更改需要的名称
　　　　【6】保存(全选切片,不可用ctrl+a,只能拖动矩形框来选中所有的切片，选中后颜色变亮，然后统一设置存储格式)