你是如何把ui图较完美的制作成网页的？

Question

工作也好几个月了，拿到效果图总是火急火急的切，制作完成后总会发现很多ui还原度问题，哎，我感觉自己也是认真在切图啊，烦烦烦，烦死，反思中……

Answer 1

一些还原设计图时减少细节丢失的tips:

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

当然有工具辅助还是会更好一些的：

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

---

针对后续问题：如何处理line-height?

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

可以这样量：

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

p{ margin: 10px 0; line-height: 18px; }

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

Answer 2

题主我看你骨骼清奇，资质不凡，这里有个AlloyDesigner我就送给你了，不要一千八百八十八，不要八百八十八，只要九块九毛八，是九块九毛八。有了它，像素级还原再也不是梦想，还原度不流失不蒸发。