团队的协作流程一般分为以下几个阶段：
专业的设计师做设计
由前端工程师切图重构还原成浏览器能渲染的页面，再开发功能。
术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助。
没错，客户需要的站点就是一碗蛋炒饭的话，前端开发人员就有必要让这碗蛋炒饭实物看起来跟食品封面上面的图片一样可口美味！
拒绝图片仅供参考请以实物为准
UI给你什么样的设计稿你做出来就是他想要的样子！
说远一点是匠人精神近一点就是对设计成果的尊重
1.2匠心：为什么要抠那个1px设计师有这种精益求精的工匠精神，
没理由在前端这里断送呀！！！
所以，前端开发，很有必要精确还原设计稿甚至要精确到像素级别！！！
二、如何做到还原设计稿还原设计稿是本分，没话说。
但是如果真的细究到0px还原，那还真不是一件小事。
一个网站在设计师手中，都是图片或文字（附加对图片或文字进行相关的处理）的排版；
那么对应到前端来说就是一个个块、一个个元素(附加元素自身属性的实现)的排版；
PS:WEB前端一般把一个个组件模块称之为块（Block），组件内部的子节点称之为元素（Element）；即BEM核心思想。
所以要做到还原设计稿，主要是要解决下面这三个问题：
块、元素的大小以及他们自身的基本属性（形状、圆角、颜色、背景、阴影等）
块与块、元素与元素之间的位置关系与距离
块、元素在页面的位置（父子模块、父子元素的相对位置）
下面对上面问题一一详细展开分析。
2.1块、元素的大小以及他们自身的基本属性先来说下元素大小的问题，对于图片类的来说我们就要获取图片在PS中的正确大小，这一般来说百分之八十都没什么问题，除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定；然后，块与元素他们自身的基本属性使用CSS进行还原。
而对于文字来说，就是文字字体大小（font-size）了；但是有个不能忽略的字体（font-family）问题，那就是同一个font-size使用不同的font-family可能表现出来的大小会相差十万八千里。
总结起来就是两点：保证图片跟设计稿一样大小；保证字体大小及类型与设计稿一致。
2.2块与块、元素与元素之间的位置关系与距离
既然网站从视觉上表现出来的就是图片与文字，那么距离总体来说就是分为三种情况了：
图片与图片的距离
图片与文字的距离
文字与文字的距离
为了得到他们之间的位置距离，首先我们得有个工具来测量：
PS有切片工具来进行测量（下文会着重介绍）。
像素大厨、Markman也是极好的测量距离的工具。
2.3块、元素在页面的位置（父子模块、父子元素的相对位置）这个相对于前面的来说，应该是最简单的了，熟练运用各种布局技术一般就能解决百分之九十九的问题了，当然也有些特别不合理的布局需求，那就需要跟UI和UE讨论了。
总之，这个问题是可以通过技术来解决的问题，所以不是问题。
那么，为了准确的跟踪是否还原，我们还需要比对工具来查看还原效果（原理基本都是把设计稿遮盖在页面上方，设置成半透明，然后查看效果）。以下是两个检查界面还原度的工具：
Perfect Pixel
Alloy Designer
三、Photoshop的运用（版本PhotoshopCC以上）3.1常用面板这里的面板，指的是在顶部主菜单“窗口”下可开启的窗口。最常用的几个窗口必属
“属性”面板
“信息”面板
“图层”面板
电脑屏幕够大的同学，建议把它们都展开在界面右边。
3.1.1属性面板结合快速选择图层，属性面板可以展示不少图层信息，而这些信息在开发中非常有用：
可查看文本的字体大小和颜色等
可查看形状工具(U)画出的形状的填充色和圆角等信息
可查看智能对象的宽高
可以看出，属性面板主要展示的是PS“原生”的对象的信息。
3.1.2信息面板“信息面板”和“属性面板”类似，只不过前者展现的信息和后者不太一样。
比如，快速选中图层后，如果在“属性面板”不能看到图层的宽高信息，可以用快捷键mac: