1.什么是切图
设计稿-产出物(如png、jpg文件)
2.为什么要切图
给网页提供图片素材 html:img css:background
3.如何切图?
1.使用PS工具
1)PS首选项设置
编辑>首选项>单位与标尺 >设置为像素
2)面板
在“窗口”菜单下开启:
1.工具 2.选项 3.信息(F8) 4.图层 (F7) 5.历史记录
如图,最后保存为工作区(窗口>工作区>新建工作区
3)切图常用工具:
1.移动工具
选择工具面板>自动选择+图层 (组是一个文件夹,方便管理,如选择到组,无法选择到图层)
2.矩形选框工具
1.添加到选区 按住Shift 2.从选区减去 按住Alt 3.与选区交叉 按住Shift+Alt
矩形选框工具&信息面板
测量 宽度、高度 内边距、外边距 边框、定位、背景图位置
文字大小(如是T,则通过T工具,查看相关信息否则用矩形选框工具)
行高
如是T,则通过T工具,查看相关信息,打开切换文字和段落面板,查看行高
否则,用矩形选框工具从段落距离上个段落开始测量直到文字底部
3.魔棒工具
主要是用来抠图
4.裁剪工具+切片工具
适合于可以一刀切的活动页
1.拉参考线 选择切片工具 点击“基于参考线的切片”按钮 保存(全选切片,统一设置存储格式)
5.缩放工具
放大:ctrl+加号 缩小:ctrl+减号 ALt+滚轮(正向+,逆向-) ctrl+1 100%缩放
6.取色器
如是文本图层,则通过打开切换文字和段落面板,查看颜色 ,否则用取色器吸取颜色
取色器&吸管工具 可以用于汲取边框色 背景色 文字色
取色工具的巧用 1.确定背景是否为纯色 2.确定是否是线性渐变 (使用魔棒工具)
7.辅助视图
在视图菜单下开启: 1.对齐 2.标尺 ctrl+R 3显示额外内容 4 显示>参考线ctrl+;
切图过程
1.明确哪些是需要切出来的?
1.修饰性(一般用在background属性) 如图标、logo 有特殊效果的按钮,文字等 非纯色的背景
2.内容性的(一般用在img标签) 如Banner,广告图片 文章中的配图
2.切出来的图片存为哪种类型?
修饰性的 PNG24 (IE6不支持半透明,需兼容)PNG8 共同点都支持全透明
内容性的 一般存储为JPG
3. 切图方法
PNG 24的切图方法切图(隐藏文字只留背景)
若文字为独立图层,隐藏文字图层: 先找到文字图层,然后去掉眼睛图标
若文字和背景合并,平铺背景覆盖文字
步骤:矩形选框工具 +自由变换(CTRL+T) 适合图片背景可以平铺的情况
矩形选框工具+使用移动工具+ALT+Shift 适合图片背景不可以平铺的情况,有纹理的情况
切图保存
如果是单个图层,则移动工具选中所需图层(按住Ctrl多选),否则右键合并图层(Ctrl+E), 再右键复制图层到新文件 或拖拽至已有文件(新建:Ctrl+N)
PNG 8的切图方法
带背景切 1.合并(可见)图层(Shift+Ctrl+E), 矩形选框工具选择内容, 魔棒工具去除多余部分(从选区中减去:按住Alt)
可平铺背景的切图
用矩形选框工具选取一块区域,复制粘贴到新文件中 平铺内容充满文件的宽(x轴)或高(y轴)
4.切图的保存
存储所需内容
1.复制,新建,粘贴 或者拖动内容至新文件 2.存储为web所用格式(Alt+Shift+Ctrl+S)
保存类型
1.当图片色彩丰富且无透明度要求时,建议保存为JPG格式并选择合适的品质(60-80比较合适)。
2.当图片色彩不太丰富时无论有无透明度要求,都保存为PNG8格式(在格式中需设置杂边无,无仿色,可以保存设置格式)
3.当图片有半透明的要求时,保存为PNG24格式
4.为保证图片质量 保留一份PSD,在PSD上进行修改
修改与维护
1.要继续放更多的图片 更改画布大小,设置画布定位为左上角,方便已有图标的定位
2.移动图标
1)若图标为独立图层,则使用移动工具拖动即可
2)若图标为非独立图层 用选区工具选中图标区域,再用移动工具拖动图标
3.要减少画布到指定区域 选定选区,裁剪
注意事项:修改png8的图片,需更改颜色模式为:RGB颜色
2.使用背景图
3.图片合并方案
1.什么是Sprite拼图:就是将所需图标放在一张图片里
2.Sprite拼图好处:减少网络请求,提高网页加载速度
3.图片优化合并
1.大小与质量
平衡和取舍:如果质量高,文件大
压缩工具: 无损:Minimage 工具:NetEaseWD minimage
有损:TinyPng 工具:tiny png
2.合并
排列 :图片之间必须保留空隙
排列方式 :横向排列,纵向排列
分类规则: 1.把同属于一个模块的图片进行合并 2.把大小相近的图片进行合并
3.把色彩相近的图片进行合并 4.综合以上方法合并
合并推荐 1.只本页用到的图片合并 2.有状态的图标合并
4.浏览器兼容
IE6不支持PNG24半透明 解决方法:存 png8 和png24两种格式
CSS3&切图