Question

前端工程师，请问切图是什么意思？我会写div﹢css已经比较熟练了，js也、jquery这些也学完

前端工程师，请问切图是什么意思？我会写div﹢css已经比较熟练了，js也、jquery这些也学完了，现在想做前端的工作，但是切图这个概念一直困扰着我，我不懂这到底是个啥意思？是个很复杂的过程吗？截图的动作算不算切图？我一般用QQ截图来截取我所需要的效果图，这算切图吗？？做前端都得切图吗？

Answer 1

是的，做前端必须必须会切图，但是 切图 就是PS里面的一步操作，十分简单。QQ截图和PS切图是动作不一样，但是基本上是一样的，QQ是截取，而PS里面有个工具张的像 刀 ，拿着这个刀在图上面画，所以叫切图。

你选择这个工具，选择切片工具，然后：

在图片上这么画上一块儿或者说切上一刀，就叫切图。

然后在选择 文件→储存为web所用格式→在用切图选择工具

把你需要保存的切图那块儿选中，点击存储，

选择选中的切片，在点击保存，就这么先切，在选择，在保存，就完成了切图，但是PS切图比qq截图用着爽多了，因为在PS里面可以将图片放大N倍，在切，在小的图也能切，而且可以一次切很多，也能一次保存很多，所以比QQ截图用着爽。总体来讲比QQ截图专业吧。

追问

太感谢了，您的回答很专业很精彩，我有点明白了，原来是因为我没玩过ps的原因

Answer 2

总的来说，专业一点的公司，前端人员的工作是根据UE提供的设计图完成一个1px误差级别的开发。说白了就是和设计图长得一模一样（间距，尺寸），所以我认为切图有两层含义：
1. 利用切片工具测量各个小块之间的间距，文字的行高，等等之类的。目的是为了和设计图保持一致
2. 从UE给的设计图中取出需要的图标，我的做法一般是选中图标的图层然后再复制出来处理（当然这是对于跟你接口的UE也比较专业）如果UE给你的设计图就是一个大图，没有图层，那么只能通过选区再保存了。

追问

感谢您专业的回答，请问常用的切图工具有哪些呢？我一直以为设计图就是ps出来的，还是不太明白，给我的感觉怎么老是觉得切图就是截图啊

追答

额。。切图我都是用的ps，我的感觉：

1. 看你们公司的要求程度，如果截图就能满足需求那没必要搞得这么专业

2. 要求严格的公司，图片不仅要有尺寸的保证，大小、兼容性也需要考虑（主要针对ie6）
   

追问

图片还有兼容性的呀，是图片的格式吗

追答

是的额，ie6是不支持透明背景的png图片的额。

Answer 3

以前切图是切成小块，为了加载速度快。
现在切图只是在效果图上，选择需要的部分，比如用矩形选区，选好后把它保存成gif或jpg，只要有需要的部分，这就是切图。

Answer 4

很简单啦，就是用ps那个截图的工具把美工ps 的网页设计图分部位切下来，打个比方说吧，一个页面上有一个登录的小按钮，你要在ps里面隐藏背景图层从而让那个按钮栅格化，然后你沿着这个按钮四周把这个按钮截取下来保存为png的格式放到你网站需要图片的文件下面以便后来用，不能用QQ快捷键，因为他会认为后面那个栅格化的那个格子也是图像。

Answer 5

分割成小元素