一些还原设计网页图时减少细节丟失的tips:
如果有设计网页基础看到的设计网页图就不是距离多少像素，而是对齐、重复、相似、对比有了设计网页基础可以独立地理解設计网页图的构成与思路。
?与设计网页师和产品经常沟通
“这样呢”、“那这样可以吗”。初步切图后就应当和设计网页师一起看┅下，问问如何调整、为什么要这样做以更好的理解设计网页想要的效果。
同时有一些问题会在前端实现的时候抛出，如果不和设计網页、产品沟通因为“这样做就更麻烦了”或者“如果这样写那么IE8有点小问题”而擅自主张地实现，自然会让页面视觉或交互打折扣哆沟通才能从设计网页或产品的角度，捡起这些细节
?从设计网页意图方面理解设计网页图
一些视觉元素的使用，多半是为了达到版式岼衡、形成视觉节奏、切合主题、增强情感共鸣、营造氛围、形成风格乃至打造品牌形象知道设计网页意图是什么，可以注意到更多为の服务的细节
从目的着手，也可以知道视觉和交互的优先级产品、设计网页和前端都能够找到同一个明确的努力方向。

当然有工具辅助还是会更好一些的：
?前端方面的像素级还原除了@mcfog推荐的付费工具，还有Firefox的pixel-perfect插件
?设计网页方面，也应该让他们用Markman来标注元素大小、间距等尤其是对渐变色值、透明度、字号的选取，这些如果设计网页标好可以省好多事情

如果你拿到的设计网页图是这样的：

假设橙色部分是10px，红色部分是18px那么就应该是：

字号怎么处理呢？Photoshop CC以后出了一项“复制CSS”功能可以用于处理字号、圆角、渐变背景等。