专业设计师产出设计稿（.psd文件）交给前端开发工程师；前端从设计稿切出网页素材，包括按钮、图表、logo、背景图、其它内容性图片等；按效果图编写代码实现静态页面。
使用PS进行切图，PS适合图片制作和编辑，不适合预览。03年Adobe Photoshop CS，CS6是CS系列的最后一个版本。13年Adobe Photoshop CC。
1、面板、工具、辅助视图
（1）首选项设置
编辑->首选项->单位与标尺->标尺、文字改为像素。
（2）面板
窗口->工具、选项、信息（F8）、图层（F7）、历史记录均开启。
窗口->工作区->新建工作区。（如果工作区被破坏，可以重新选择工作区。）
工具面板：列出了提供的所有工具。左上角有个键更高单列或两列布局。
选项面板：与当前选中工具一一对应，对当前工具的配置。
信息面板：颜色、位置、尺寸。
图层面板：当前打开文件的所有图层，添加、删除、隐藏、改变图层层级。
历史记录面板：回到任意一步历史步骤。撤销Ctrl+Z按一次撤销一步，再按一次恢复这一步；Ctrl+Alt+Z连续撤销；或者在历史面板选择。
（3）常用工具：
移动：自动选择，选择图层而不是组。组是相关图层的集合，组可以嵌套。
矩形选框：信息面板中显示该框的宽度、高度，单位像素大小。
魔棒：容差越小，选择的颜色范围就越小，0指单一颜色。消除锯齿，在选取范围的时候让边缘光滑一点。连续。
裁剪、切片。矩形框选中一片区域->图像->裁剪。
缩放：默认放大，在选区面板可以换缩小。Ctrl+加号、减号，+1显示为100%。“Alt+鼠标滚轮”更常用。
取色器：吸取颜色。
（4）辅助视图
对齐：开启对齐后，图层移动过程中靠近文档边缘、参考线及其它图层时会有吸附力。
标尺：Ctrl+R，从标尺可以脱出参考线。
显示->参考线：C trl+;，需勾选显示额外内容。
2、测量、取色
打开设计稿，获取信息，这些信息往往对应CSS中某些属性。
尺寸信息：width:200px; 颜色信息：color:#ffcc00
（1）测量
所有数字都需要测量：宽度、高度、内边距、外边距、边框、定位、文字大小、行高、背景图位置。尽可能还原设计稿。
矩形选框工具&信息面板作测量。尽可能画布放大，减少测量误差。画布太大时，可以在画布一侧画一个小矩形框，在另一侧画一个添加到选区，方便测量。
文字大小和行高：如果文字是单独的文字图层，选中文本工具在该图层上单击，选项面板显示文字大小，点击“切换字符和段落面板”按钮，显示行高。否则用矩形选框，量取字的高度和行高（从某一行下面到下一行下面）。
（2）取色
所有颜色都要取色：边框色、背景色、文字色。
拾色器&吸管工具用来取色。
文本颜色：选项面板“设置文本颜色”按钮；或画布放大，吸取颜色。如果文字有一些叠加的效果，不适合用文本工具，此时用吸管。
用吸管确定背景是否为纯色，用魔棒工具确定背景是否是渐变。
3、切图
网页上的图片分为两类：修饰性的，一般用在background属性，包括图标、logo、有特殊效果的按钮和文字等、非纯色背景；内容性的，一般用在img标签，包括Banner、广告图片、文章中的配图。修饰性的图片保存为png24（图片质量较高，支持全透明和半透明，IE6不支持该半透明）或png8（仅支持全透明）；内容性的图片一般保存为.jpg；不用切的图片，只需要用img占位。有时需要压缩减小图片大小。
（1）隐藏文字，只留背景
因为文字是写到HTML标签里，需要隐藏文字。除非是一些特殊的文字，比如文字有一些特殊的效果，没法用代码写出来。
若文字为独立图层，去掉眼睛图标，隐藏文字图层。
若文字和背景合并，平铺背景覆盖文字。用矩形选框工具，在背景上画一个矩形框；适合拉伸的背景用自由变换（ctrl+T）；对于有纹理效果的背景等，不适合拉伸，用移动工具+Alt，Alt使只在X方向移动。
（2）切图
png24切图：移动工具选中所需图层（按住ctrl多选）；右键合并图层（ctrl+E）；右键复制图层到新文件或直接拖动至已有文件(新建Ctrl+N)。
png8切图：不支持半透明效果，要带背景切。图层->合并（可见）图层（Shift+Ctrl+E）；矩形选框工具选择内容；魔棒工具去除多余部分，按住Alt从选区中减去。
（3）可平铺背景切图
主要针对CSS里background-repeat属性的切图方式。
用矩形选框工具选取一块区域，复制粘贴到新文件（Ctrl+N，背景透明）。平铺内容充满文件的X轴或Y轴。宽度或高度不够可以拉伸。
（4）切片工具
适用于可以一刀切的活动页。
拉参考线；选择切片工具；点击“基于参考线的切片”按钮；在切片工具下面，选择切片工具，双击每一个切片更改切片名称；文件->存储为Web所用格式->缩放->全选切片->统一设置存储格式->保存。
4、保存
（1）步骤
拖动内容至新文件（适用单个图层）；
选中区域、复制（Ctrl+C）新建（Ctrl+N）粘贴（Ctrl+V）（适用合并后图层中的一部分）。
存储为Web所用格式（Alt+Shift+Ctrl+S）。
（2）格式
通用的三种格式：.jpg .png .gif，
当图片色彩丰富且无透明要求时，建议保存为JPG格式并选择合适的品质（60~80%），对图片适当压缩。
当图片包含少量的颜色或大面积同色区域（平面颜色），无论有无透明要求，保存为PNG8格式。有256种颜色，文件较小，适合传输。杂边：无；扩散：无仿色；可以将该设置命名保存。
当图片有半透明要求（如阴影），保存为PNG24格式，对图片不进行压缩。
GIF动画能显示几帧序列图像，创建简单的动画。
为了保证图片质量，每一张使用的图片都保留一份PSD原文件，以后在PSD上进行修改。PSD可以保留单独的图层，有利于后期维护；如果连续压缩会导致像素点丢失。
注意：不要给图片增加额外空白空间。事先修改好图像大小。
5、修改与维护
要继续放更多的图片，更改画布大小。图像->画布大小->尺寸、定位左上角。
减小画布到指定区域。选区->图像->裁剪，或裁剪工具。画布稍大于图像区。
移动图标：独立图层，用移动工具拖动；非独立图层，用选区工具选中后拖动。剪切（Ctrl+X）粘贴（Ctrl+V），可以将图层中图标分开。
修改PNG8图片时，需要首先将其颜色模式修改为RGB颜色。因为索引颜色模式会丢失颜色信息。图像->模式->RGB颜色。
6、图片的优化与合并
Sprite拼图：把设计稿上的小图标拼合到同一张图片中。减少网络请求，提升网页加载速度。
平衡大小与质量，压缩工具Minimage无损、TinyPng有损。
图片之间必须保留孔隙，小图标20像素。如果更改按钮大小，CSS里背景图位置属性不须改变；容错，如果CSS设置错误，不会导致下面图片露出来。
排列常用横向排列和纵向排列。
合并原则：同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用，有状态的图标合并。
7、浏览器兼容方案
IE6不支持PNG24半透明。存两份：高级浏览器PNG24 sprite.png、IE6 PNG-8sprite_ie.png。
高级浏览器CSS3，低级浏览器 切图。或优雅降级，都用CSS3处理，低级浏览器没有这种效果。