前端上路第二弹

真是忙死了，每天下班回家都快8点了，感觉都没什么时间来写东西。今天正好闲下来，抽个空写写。

上一篇说的是ps切片，切完片自然就轮到psd稿标注了，没有好标注的psd稿，就没有完美的静态网页，所为工欲善其事，必先利其器啊。说到psd稿标注的工具，首当其冲的就是markman（中文名：马克鳗）了，我想只要是做过前端的几乎没几个人没听说过markman吧。

当当当当，我们的大主角闪亮登场了！

首先，当然是到官网上去下载Mark Man咯。为了给手懒的同学提供便利，我这里还是放一下官网地址吧，http://www.getmarkman.com/

其次当然是安装好我们亲爱的Mark Man咯。什么？别告诉我你安装都不会，那还学什么前端，不如先去报一个老年计算机基础教学班吧~

话不多说，安装好了之后就打开我们的Mark Man，就是这个样子，把psd稿放进去，方法有很多，可以直接点击这个图示这些区域，选择你要标注的psd稿，也可以把psd稿拖进去。

当把psd稿放进Mark Man后，就变成了这个样子接下来在Mark Man的底部正中间，我们可以看到有5个工具，我们一个一个来。

第一个像两把尺子组成的L状的工具，它的功能是测量长度，比如元素的宽度高度，外边距内边距等等，如图所示：如果想要把像素测量的精准，就需要配合右下方的缩放尺进行操作了，我的习惯就是把图稿放到最大，然后尽量能够精确到最准确。

第二个工具就是范围工具，一般是用来测量矩形元素的大小以及在图稿上的位置，方便进行left和top的定位，不过定位的位置是以图稿左上角为0,0的，如图所示：

接下来是第三个工具，看长相就应该猜测得出几分了，没错，这是一个提色的工具，方便提取出背景颜色，如图所示：

来到了第四个工具，这个我不太常用，一般美工用的比较多吧，这个是一个提示工具，主要用来提示Mark Man做不到标注或者美工想要传达给前端的事情，如图所示：

第五个工具就不用详述了，就是一个移动工具，移动图稿的工具，最常用的功能。

最后如果是免费版的话，是无法将标注好的psd稿保存到本地的（万恶的商人），以前是可以的，不过在更新了某个版本之后就不行了。不过对我们前端来说应该还好，就是一些复杂的首页可能会有影响，要么你是壕买正版享受全部功能，要么就只有忍忍啦。

好了，以上就是我前端进化之路的第二弹，也是我的前端第二个点起来的技能。想想还是很怀念呢~