细谈设计稿还原

按道理来说,做重构切页面那本来就是要还原设计稿啊,没话说。但是如果设计师真的细究到0px还原,那还真不是个小事。

首先一个网站落到PS中,都是图片或文字(附加对图片或文字进行相关处理),而对应到重构来说就是一个个元素,所以要做到还原设计稿,主要要解决下面这三个问题:

  • 元素大小
  • 元素与元素之间的间距
  • 元素在页面的位置

下面对上面问题一一详细展开

元素大小

先来说下元素大小的问题,对于图片类的来说我们就要获取图片在PS中的正确大小,这一般来说百分之八十都没什么问题,除了一些设计师进行过特殊处理加工各层叠加等效果的需要费点时间搞定;而对于文字来说,那就是文字大小了,但是还有个不能忽略的字体问题,同一个大小不同字体可能相差十万八千里。

总结起来就是两点:保证图片跟设计稿一样大小;保证字体大小及类型一致。

对于第一点为了准确性及效率,我们可以采用 Cutterman这个PS插件;而第二点我们就得使用规范去约定,约定网站常规字体类型及大小

元素之间的间距

既然网站从视觉上表现出来的就是图片与文字,那么间距总体来说就是分为三种情况了:图片与图片的距离,图片与文字的距离,文字与文字的距离。

为了得到元素之间的间距,首先我们得有个工具来测量,当然PS默认提供了标尺这个工具来供我们测量,但是实际使用起来还是有点麻烦的,效率不怎么高,而QQ提供的截图效率是快了,不过精准度方面就有点欠缺了,如果真要仔细考究起来那就得使用其他更精准效率也高效的工具了,这里推荐下Markman

看起来挺完美的,我们用Markman一标,间距就搞定了。事实是视觉上的图片与图片的间距确实就是这么简单,但是换到有文字的时候这招就不怎么灵验了,因为文字还有个行高。而行高也是个很复杂的事,光这个行高问题就可以写一篇文章了,这里就不再细叙,具体可参看:

所以如果要解决这个间距的问题,还得让设计师设计的时候就考虑到行高这一因素,然后你还要熟记常规行高的半行间距(半行间距不同浏览器还可能表现不一样),标记的尺寸再减去这个半行间距就是实际的间距。

总之这个问题(图片与文字的间距,文字与文字的间距)细究起来是非常令人抓狂的。

元素在页面的位置

这个相对于前面的来说应该是最简单的问题了,熟练运用各种布局技术一般就能解决百分之九十九的问题了,当然也还有些特别不合理的,那就需要改交互了。总之这个问题是可以通过技术来解决的问题,所以不是问题。

为了准备的跟踪是否还原,我们还有比对工具来查看效果(原理都是把PS图片遮盖在上面,设置一个半透明效果),

仔细研究下就会发现这些都与layout相关,而与paint相关的还原起来还是比较简单的(各种取色器网上大把的有,PS里面的当然是最准的了)。

写在最后

那么是不是就完了呢?我们是不是要追溯下设计稿本身呢?如果设计师设给的稿子本来就是经不起推敲的呢?

假设我们设计师给的稿子都是认真完成的,我们还可能面临以下问题:

  • 设计师水平本身不在同一条水平线上,不同的设计师审美效果不太一样。
  • 设计师的像素真的是完美的吗,出现小数点像素怎么办?
  • 设计师的有些设计到底是故意为之还是出了点小差?
  • 移动端各种手机尺寸,只给一个标准的,其他自由发挥怎么搞?

所以最后如果要细究到0像素还原,最艰难的问题只有两个:文字的问题;完美的设计稿。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

采用DIV+CSS布局对SEO优化有何好处?

DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来SEO优化直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完...

21160
来自专栏MelonTeam专栏

多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS 要说排版技术,在这三个平台中我觉得最有话语权的应该就We...

19370
来自专栏腾讯大讲堂的专栏

如何做一个让人闻风丧胆的H5

前言 最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师,在这个移动互联网叱咤...

21460
来自专栏程序员互动联盟

【专业技术】css 3D transform 感性理解

一、首先,情感化认识 CSS3中的3D变换效果,其实就是现实中姿势的变换; 虽然都是成年人,但考虑到仍有不少窝中待守的雏鸟,如果上面的解释想不过来,就想想以...

29270
来自专栏IT大咖说

从UI到AI——移动端H5生成技术漫谈

15250
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

9020
来自专栏偏前端工程师的驿站

CSS3魔法堂:说说Multi-column Layout

前言  是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗?  当我们希望将报刊、杂志中的阅读体验迁移到网页...

21850
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现网页版阅读器

41460
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

11440
来自专栏前端新视界

视差滚动技术的简介及运用

维基百科地址:https://en.wikipedia.org/wiki/Parallax_scrolling 视察滚动是计算机图形学以及网页设计中的技术。原理...

27960

扫码关注云+社区

领取腾讯云代金券