页面制作——Photoshop切图

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拼图：把设计稿的一个个小图标拼合到一张图片里，使用时引入这张图片。减少网络请求，提升网页加载速度。

合并

把同属于一个模块的图片进行合并（仅本页用到的）

把大小相近的图片进行合并（有状态的图标合并）

把色彩相近的图片进行合并

综合以上方式合并

图片之间必须保留空隙