Photoshop是前端工程师无法回避的一个软件，软件本身十分的强大，但我们仅仅需要通过其来完成基本的切图工作即可。

一个完整的项目流程是市场进行需求分析，产品做出项目原型，UI根据项目原型出设计图，前端根据设计图制作页面，后端进行数据相关工作，网站经过测试后上线。

1. 什么是切图？

从UI设计稿中切出网页素材

设计稿（.pdf文件）— 素材切出 —— 产出物（如 .jpg .png文件）

2.为什么切图？

给网页提供图片素材；有时候网页中一些比较漂亮的效果没办法用代码实现（或难以兼容），

then，可以通过引入图片资源的方法来实现这些效果。如：

HTML：img <img src="images/avatar.jpg" alt="头像" />

CSS：background .icon{background-image:url(../images/sprite.png);background-position:0 0;}

3.如何切图？

使用PS工具，使用背景图，图片合并方案，浏览器兼容

PS切图的基本思路：

（1）工具、面板、视图

（2）测量、取色

（3）切图

（4）保存

（5）修改、维护

（6）图片优化与合并

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-ps/ps50542.shtml