photoshop网页精准切图及设计稿精准测量方法

24552次浏览

今天总结一下ps的切图技巧,首先声明,这个方法好用,但是对你的图层比较混乱的来说,不一定好用,还是建议用传统的方式进行切图。

一、Photoshop 切图技巧

精确第一步,精准的使用 Photoshop 切图。拿到设计稿一般是 PSD 格式的,我们首先会认真观察一下设计稿,思考一下对应的 HTML 结构和 CSS 设计模式,然后开始根据需求进行切图。

传统的切图流程

确定好了切图方案之后,对于大的 PSD 来说,往往新建一个画布,然后将 PSD 里面需要切出来的图层拖动到新画布中,使用“剪裁”工具把这个图层进一步的剪切,变成最小内容,剪去多余的部分。然后打开“存储为 Web 所用格式”对话框,根据图片选择格式、压缩比以及是否是渐进式等等,然后选择路径修改文件名。 这样的缺点很明显,有时候图标或者图层有半透明的阴影,这时候对于边界的界定就不好处理,此外需要大量重复的剪裁、返回上一步、继续剪裁、保存图片等等。人工操作过多,导致效率底下,成本增加,大量时间浪费在基础重复的操作中(为此一般项目的扣图都扔给另一个同学^_^)。

改进后的切图流程

计算机就是为了帮助人类完成大量重复的工作,有没有自动切图的功能或插件呢?为此我也在不断的搜索。 然后有一天就发现了 Photoshop 内置的自动切图脚本。位于“文件”-》“脚本”-》“将图层导出文件”。意思就是将你的图层分层分别导出为文件,而且还支持剪裁图片和格式选择等等。
enter image description here
选择剪裁图片之后,将会自动给你剪裁到最小状态,由于是机器剪裁,所以精度非常高,半透明的阴影也完全 OK。 于是,改进后的切图流程就变成了:从 PSD 中找到要剪切出来的图层,然后拖动到新画布上面,栅格化文字或者合并组、合并图层,将要剪切出来的图片们合并到一起变成一个图层,然后使用这个脚本自动导出,命名一下图片。 这个脚本的不好就在于命名,输出的时候命名比较乱,需要自己修改一下,但是已经非常自动化操纵了,相见恨晚。(图层比较混乱的还是建议用传统方法,此处只是介绍这种方法!)

二、使用马克鳗量取精准尺寸

马克鳗很好用,但是正版的要花钱,只能用试用版,试用版的坏处是导出的图片有水印!若您习惯用QQ截图的方式测量尺寸,也无所谓,只要效率高就可以!

之前得测量方法

很多同学都是用QQ截图来获得设计图的尺寸!好在QQ 截图得功能比较强大,测量得还算准确,缺陷就是需要来回切换程序界面,一次次得测量,这样必然导致低效率。

此外,不只是测量尺寸,还原设计稿还需要提取对应位置得背景颜色等等。这样还需要在后台打开 Photoshop 然后偶尔切换到 PS 中,用拾色器来取色。

改进后得测量方法

马克鳗得主要功能就是对设计稿测量尺寸、获取颜色、标注信息等等。而且支持各种格式得图片,甚至支持 PSD 格式,标注完之后会自动生成一个 markman 文件,你可以发送给别人,不会影响原来得设计稿。还支持 Retina @2x 设计稿得缩小,例如针对移动端得设计稿往往设计成双倍尺寸得,测量之后尺寸都需要除以2,而使用马克鳗之后,会自动读取文件名后面的 @2x ,如果确定是双倍设计稿,就会自动给你缩小一倍。

这样改进后的测量方法就变成了:

打开设计稿(PSD 或者将 PSD 中不同页面的设计稿保存出来 jpg),使用马克鳗进行标注并且观察设计结构和样式,思考如何做页面结构如何切图。

之后根据上面的方法切图,再打开马克鳗测量后的图片,对照尺寸重构页面。

当然,试用版的马克鳗不一定会满足你的要求,但是马克鳗确实是一款很不错的测量软件!本篇文章只是简单介绍这几种方法,希望对您有帮助,谢谢!

Tags: photoshop

相关文章: