1.工具、面板、视图
什么是切图？
第一步：从设计稿里切出网页素材（按钮、图标、LOGO、背景图、内容性图片）
第二布：编写代码。在代码中引入切出来的背景图，最终按效果图实现一个静态页面。
PS工具
工具面板、选项面板、信息面板（F8）、图层面板（F7）、历史记录面板
在“视图”菜单下开启对齐，标尺（Ctrl+R）,显示>参考线（Ctrl+；），勾选“显示额外内容”
移动工具、矩形选框工具、魔棒工具、裁剪工具+切片工具
快捷键
放大：Ctrl+加号 缩小：Ctrl+减号 撤销：Ctrl+z 连续撤销：Ctrl+Alt+加号
2.测量、取色
哪些要测量？
所有的数字都要测量（CSS中需要接受数值型的属性都要测量）
宽度、高度、内边距、外边距、边框（width、height、padding、margin、border）
文字大小、行高、背景图位置（font-size、line-height、background-position）
运用矩形选框工具和信息面板测量。
矩形选框工具
添加到选区：Shift 从选区中减去：Alt 与选区交叉：Shift+Alt
哪些要取色？
所有颜色都要取色（CSS里面能接受颜色值的属性都需要取色）
边框色 border-color 背景色 background-color 文字色 color
运用拾色器和吸管工具取色。
取色工具巧用
确定背景是否为纯色（拾色器）
确定是否为线性渐变（魔棒工具）
3.切图
哪些需要切出来？
修饰性的（一般用在background属性）图标、LOGO、有特殊效果的按钮和文字、非纯色背景。
内容性的（一般用在img标签）Banner（活动页，广告图片），文章中的配图。
切出来的图片存为哪种类型？
内容性一般存为JPG，修饰性存为PNG24（支持半透明）或PNG8，都支持全透明。
切图的操作
隐藏文字只留背景（若文字和背景合并，矩形选框工具+自由变换（背景可做拉伸）/移动工具+Alt（背景有纹理效果））
保存为PNG24（合并图层Ctrl+E）或PNG8格式（带背景切，合并可见图层Shift+Ctrl+E，魔棒去除多余部分Alt）
可平铺背景的切图（沿x轴平铺要充满文件的宽，沿y轴平铺要充满文件的高）
切片工具（适用于可以一刀切的活动页）
4.保存
保存为哪种格式？
当图片色彩很丰富且无透明要求时，建议保存为JPG格式并选择合适品质（60-80）。
当图片色彩不太丰富时，无论有无透明度要求，保存为PNG8格式。
当图片有半透明要求，保存为PNG24格式。
为保证图片质量，保留一份PSD，在PSD上进行修改。
5.修改、维护
扩大画布大小：定位选在左上角
移动图标：若图标为非独立图层，用移动工具拖动图标。分开图层：剪切后粘贴。
减小画布：选区+裁剪 或直接使用裁剪工具
注意事项：修改PNG8图片，颜色模式更改为RGB颜色。
6.图片优化与合并
Sprite拼图：把设计稿的一个个小图标拼合到一张图片里，使用时引入这张图片。减少网络请求，提升网页加载速度。
合并
把同属于一个模块的图片进行合并（仅本页用到的）
把大小相近的图片进行合并（有状态的图标合并）
把色彩相近的图片进行合并
综合以上方式合并
图片之间必须保留空隙
网友评论