在Photoshop中如何快速的建立辅助线,这不仅仅是视觉设计需要解决问题,也是一名前端开发人员需要解决的问题,因为我们的工作离不开它。今天,就来介绍一款photoshop插件,利用它解决工作中遇到的问题,提高我们的工作效率。

先来看场景1,图中虚线圈起来的部分,有8个icon,会因后台的配置不同而换成不同的icon。

pic01

我们来看一下合图(白色icon,添加了背景色,便于浏览),共33个icon,而且每个icon的尺寸都不相同,唯一可以确认的是,每个icon的最大尺寸为31×31。

pic02

那么你是如何来合这张图,以及后面如何快速获取相应的background-position值的呢?

此处省略1万字,给足思考时间。

我先来说一下没有用铺助线插件时,我的做法。

  • 计算整张合图的尺寸。每行放6个,共6行,每个icon之间留2px的间距,那么宽与高都是6x(31×2)+5x(2×2)=392px(移动端,2倍图)
  • 制作62×62的色块,并填充颜色

pic03

  • 复制5份,将其中一个图层水平拖到最右方,并水平居中分布。

pic04

  • 将前面6个色块合成一个图层,并复制5份,同样将一个图层垂直拖到最下方,并垂直居中分布。

pic05

  • 将icon与相应的色块水平垂直对齐

 

那么我们来看看用GuideGuide插件如何来快速的合图

  • 计算整张合图的尺寸。每行放6个,共6行,每个icon之间留2px的间距,那么宽与高都是6x(31×2)+5x(2×2)=392px(移动端,2倍图)
  • 设置横向纵向列数6,横向纵向列宽62,横向纵向列间距4
  • 点击Make Grid,并填充背景色(设置背景色利于后面icon与网格的对齐)。见下面动画

pic06

通过上面两种方法,都实现了最终的合图,但使用后者在效率上更高,没有那么多繁琐的过程,而且逼格相当的高。

 

场景二,在已知图片

 

pic07图一

的蚂蚁线里,将3个18×20以及1个22x22icon合入,且icon与icon之间的间距为10px(icon见下图),你是怎么合的呢?

pic08

 

不用插件前,我的做法是:将icon导入,顶对齐,全选移动到蚂蚁线的顶部,通过慢慢移动来实现。整个过程需要N次移动才能完成,如果间距不为10px,比如6px,移动次数将增加。

那么通过我们介绍的插件如何来实现呢?显然像上面一样通过简单的设置是不能实现的,因为有1个icon与另外3个不同。

方案1:

把22×22的icon放到最后一个网格,按18×22生成4个网格。因为只有一个特例,所以让它放在最后,即使超出也没有任何问题。

pic09

方案2:

GuideGuide为我们提供足够强大的自定义功能来完成不同的任务,所以,可以通过自定义grid来实现。

$ = 18px | 10px |
| $*3 | 22px | ( vl )
| 22px | ( hl )

pic10

上面的自定义你可能看不懂,但认真的去官网http://guideguide.me了解一下,会发现,其实很简单。这里只是举了几个工作中可以用的例子来进行说明,当然还有其它的功能,这里就不多说了,官方网站有演示。

最后,不要让自己重复做无意义的事情^_^。

本文作者:txji 转载请注明来自:携程设计委员会