《
网页制作中如何精确还原设计稿的几个步骤》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234H92013.htm
惋惜该软件不三角板也没有圆规，难以测量矩形。别急，可以用其余办法取代，这里用到截屏功效。
5、矩形测量
设计师最好是在页面开端制作前定好视觉规范，这样能够大大减少页面制造后期联调的本钱。另外页面制作可以对模板化的货色前期做统一的标准，如字体、ICON、边框、背风景、间距等做同一的class接口，等后期设计规范固定下来后有变动的处所调起来就很轻易了。
这里先容一款可以精确测量网页的软件FastStone Capture，其堪称是 软件虽小，却五脏俱全。
点击尺子上的图标: ，屏幕右上角放大镜会显示线长度。
二、设计稿标注
一、视觉规范
垂直测量跟横向测量的方式相似，这里就不反复说了,网页制作中id与class的使用原则。
用鼠标拖动从A点到B点的直线，测量两点间的间隔。
--> [
网站建设之]
网页制作中如何精确还原设计稿的多少个步骤
1、翻开测量工具
作为一名及格的页面重构者，“网页还原设计稿”的才能是十分主要的。页面是否能与设计稿丝绝不差，是须要重点关注的。有的时候，细节就能决议成败，可谓失之毫米差之千里。尤其是在打造一个精品项目标时候。
3、垂直测量
点击掌握面板最右边的图标，打开取舍“屏幕尺”，会在屏幕上显示如下图的尺子、为了便利透视测量，可将尺子设置成透明或半透明：
Tag：网页制作 网页制作
点击尺子上的图标封闭尺子，返回软件把持面板，点第三个图标 (扑捉矩形区域)：
拖动鼠标丈量想要测量的网页矩形模块吧，屏幕左(或右)上角的放大镜会显示w*h=值*值，w是宽度，h是高度。
有时候我们从设计师那里拿到的设计稿不必定是精确无误的，例如：统一类的模块题目文字，一个地方是13PX，另外一个地方是14PX;一个页面有多种字体颜色肉眼看起来一样却实际取到的色值不一样,网页制作中CSS的Class灵活应用;每个段落的行高不一样;同一类型的弹出框多种尺寸等等…… 这样的情形，我们不能为了还原设计稿而还原设计稿。
默认尺子是横放的，可以按键盘上、下、左、右键单像素挪动尺子，鼠标点在尺子的刻度上，屏幕右上角会有一个放大镜显示测量的区域，拖动鼠标可以精确测量程度的长度。拖动尺子横向两边沿可将尺子任意拉长或缩短。
点击尺子上的如图的按钮图标可将尺子垂直：或双击尺子可将尺子垂直。
四、FastStone Capture 简略教程
6、网页取色
三、网页标尺工具(FastStone Capture)
点击软件节制面板右边的图标： ，呈现下拉框，抉择“屏幕取色器”，涌现吸管图标,网页制作Table，DIV，XHTML的区别，移动吸管唆使的坐标点击获取屏幕任一地方的颜色值。
务必请求设计师在设计稿上对各种间距、宽度、特殊字体、特殊字色、特别行高级等进行标注，这样在页面制作的时候不必去从新量取也大大增强了还原设计稿的正确度，更减少了与设计师的沟通成本和后期联调成本。如下样例：
航海用的指南针、医生用的体温计、木匠用的卷尺…&hellip,网页优化必须会的SEO技巧;良多职业都有它专用的测量仪器，那么咱们在制作页面的时候势必也要测量间距、宽度、高度、色彩……等等数据，那么页面制作是不是也应当有一个专业的页面准确测量的工具呢?
4、点对点测量
2、横向测量
为了减少与设计师沟通上的成本，重构师不得不督促设计师做前期整站的视觉规范,网页交互设计教程 产品设计选择加载还是分页，把一些公共能商定的内容以文档的情势写明，后期严厉履行起来。
(责任编辑：网站建设)
网页制作中如何精确还原设计稿的几个步骤相关文章