【前端】-002-页面制作-切图
2016-12-21 本文已影响43人
9756a8680596
设计稿中图片分类
- 修饰性素材
- 用在CSS background属性中
- 例如，图标、logo、按钮、文字和非纯色背景等
- 需要切图获得
- 内容性素材
- html img 标签中占位
- 例如，banner、广告图和正文图片等
- 从服务端读取或切图获得
Photoshop准备工作
- 首选项设置，在编辑>首选项>单位与标尺中将单位（标尺/文字）改成像素。
- 面板，在“窗口”菜单下开启：工具/信息（F8）/图层/历史记录调整面板后，需要保存工作区：窗口>工作区>新建工作区
- 辅助视图，在“视图”菜单下开启：对齐/标尺/显示>参考线，需要开启视图菜单下的显示额外内容，才能看到画布里的参考线和网格。
切图格式
- 内容性图片切图，由于内容多为色彩丰富图片，一般存储为jpg格式，需要对图片质量进行压缩处理
- 修饰性图片切图，可以使用png8（全透明）/png24（半透明/全透明）格式，其中png24图片质量较高
另外关于png8、png24和jpg图片的区别：
- 色彩丰富的、大的图片切成jpg的;
- 尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的;
- 半透明的切成png24。
来源：https://www.douban.com/note/493629944/
切图的操作
- 隐藏文字只留背景（一般情况下的文字是html中的内容，不需要切出来）
- 文字是单独图层
- 点击眼睛按钮，隐藏文字图层
- 文字和背景是同一个图层
- 选中该图层
- 用矩形工具，在需要切图的空白区域画一个框
- 使用“自由变换（CMD+T）”拉伸矩形框，覆盖文字即可
- 如果背景不适合拉伸，则需要使用“移动工具（CMD+option）”移动覆盖即可
- 关于可平铺背景的切图
- 如果要填充X轴，将矩形工具截取的背景填满文件的宽
- 如果要填充Y轴，将矩形工具截取的背景填满文件的高
- 切片工具（适用于区域分割明显的活动页）
- 拉参考线
- 选中切片工具，在选项中选中“基于参考线的切片”
- 选中切片选择工具，对不同切片区域进行命名
- 保存文件的格式
- jpg格式：色彩丰富，无透明度要求，品质一般为60~80
- png24格式：有半透明要求，例如阴影效果
- 单图层，选中背景所在的图层，右键“复制图层”（或拖拽）到新窗口即可
- 多图层，选中各个图层，右键“合并组”然后拖拽到新窗口即可
- png8格式，带背景切，无论是否有透明度要求，图片色彩不太丰富
- 首先要“合并可见图层”
- 然后用矩形工具选中带背景的切图区域
- 最后用魔棒工具，按住option去掉非切图区域
- psd原文件，为了保证图片的质量和修改方便，切图需要保留原psd文件
- 操作方法
- 在文件选项中，导出“存储为web可用格式”
- 对导出的图片质量进行压缩，png8要扩散：无仿色，杂边：无
