CUED-迅雷用户体验设计中心

提高效率的小工具GuideGuide

啊菠萝 | 2012-11-09 | 视觉设计

提高效率的小工具GuideGuide

 
提高效率的小工具GuideGuide
 
今天为大家介绍一款非常实用的PS小插件GuideGuide,它提供了一个非常便捷的方式生成像素级别的辅助线(栏,行,中线……)
 
想像一下在PS里面创建好一组多栏目的辅助线:页面多宽,分2栏目还是3栏,分栏里面又有多少个分栏……数学不好的同学估计手心都开始冒汗了。确实,在PS里面创建网格是个非常痛苦的事情,不少设计同学都是大概估算一下宽高来拉辅助线;或者画一个矢量图形,然后复制移动来分列。如果总的宽度有了变化之后,又将他们整体拉宽来重新分列。没耐心的人估计已经开始喊:“我是设计师,不是数学家”,有耐心的人会重新算过一遍之后再来,还有公式如下:
 
(页面宽度 – (间隙宽度 x (分栏数 – 1) ))÷ 分栏数 = 栏目宽
 
看起来是不是有点想暴走?设计个页面还要搞这么复杂的东西。
 
 
 
实用的小工具GuideGuide来了
 
为啥要把时间花在数学上,而不是省心一点,留出多一点时间来将设计做得更好呢?只要输入一些数字,GuideGuide就会利用PS里面的辅助线自动的在你的文档中划分好网格。当你用了之后就会由衷的觉得:很好很强大。而且,它真正的强大之处在于:支持选框工具–如果你的文档中有选框的话,它可以在选区内生成对应的辅助线。
 
 
 
分栏与分列
 
页面需要分栏和等比间隙?GuideGuide轻松搞定
 
 
 
找到中点
 
GuideGuide让你找到对象的中点变得易如反掌,只要画一个选区或者在图层面板(ctrl + 鼠标左键)创建一个选区,然后点击中点按钮,就可以立即创
建中点线。
 
 
然后将此列中的其他元素根据需要来对齐
 
 
 
存储常用的划分为选项
 
如果你经常用同一种网格划分方式,可以存储为选项方便以后随时调用
 
 
 
发挥你的创造力
 
GuideGuide有分栏,有边距,有中点…… 发挥你的想象力它可以做的更多
 
 
 
划分导航
 
当你要将一定宽度的导航划分为N等分的分栏的时候,是不是又要计算宽度了?现在不用烦恼了,用GuideGuide吧
 
 
1.用选区工具画一个你导航宽度的选区
2.输入你导航的分栏数以及他们之间的间距
 
 
 
等边距矩形绘制
 
当你想绘制一个与你当前元素等边距的矩形,是不是又要计算了?
 
1.在图层面板(ctrl + 鼠标左键)创建选区
2.在边距栏输入一个负数,然后点击图标,GuideGuide会自动输入四边等距的指数,然后回车创建辅助线
3.根据新创建的辅助线绘制四边等距离的矩形
 
 
 
 
基准线网格绘制
 
利用GuideGuide便捷的行高设置,轻松创建整页的横向对齐基准线
 
1.输入你想要的行高
2.将你页面中的元素相应的对齐
 
 
 
 
剩余像素分配
 
在分栏的时候不是永远都能完美的等分,如果你要在一个10px宽度内分3栏,那么多余的像素怎么办?设置里面的剩余像素分配设置决定将多余的像素分配到哪里,默认是“右下角”
 

 

点击下载

下载完毕后开启 Adobe Extension Manager 安装插件,然后打开PS在 windows > extensions 下面开启窗口

 

  1. new 说:

    能不能找个中文的出来~英文不影响使用,但老不习惯呀~

  2. k186 说:

    为什么有时候点了 却不生成参考线。。。。

  3. 月什 说:

    下载试试

  4. 快乐的小2B 说:

    PS CC怎么安装了  CS6倒是安装上了  官网上说CC也可以用啊 但是安装不上

  5. cc 说:

    我的是win7 旗舰版  能用这插件吗?

  6. […] 文:http://cued.xunlei.com/log055 发表于 设计教程 标签: GuideGuide插件, ps插件, PS辅助线 « 高斯模糊的算法 苹果推出中文版技术支持论坛 » 敬请 留言, 或从本站 引用本文。 […]

  7. sarah 说:

    下载了  为什么不能安装进adode extension manager,麻烦能也发给我吗Q1004842856

  8. 小欣 说:

    为什么安装不了,可以发到我邮箱么 498373124@qq.com

  9. Gill 说:

    为什么安装不了啊啊啊啊啊啊啊。。。嗷嗷嗷嗷嗷。。

  10. […] Manager 安装插件,然后打开PS在 windows > extensions 下面开启窗口原文地址:http://cued.xunlei.com/log055 PS工具 标尺 […]

  11. 天添 说:

    很激动看到这个,可下载不了呢??417580930@qq.com能不能传我那,太感谢了~~~~

  12. […] 以上内容源于:迅雷CUED 界面演示: 官方Gif演示动画: Installation 安装说明 Download and upzip GuideGuide. […]

  13. guiguizhu 说:

    PC  PS CS5 安装了,打开是灰色的,空白的,什么都没有。这个是什么情况?

  14. yw 说:

    终于找到这个工具了,太方便了,我以前还苦逼的手动拉参考线!

  15. 七彩云儿07 说:

    下载了,可是安装不了!怎么出现它

  16. 七彩云儿07 说:

    这个怎么下载

  17. 李惟 说:

    好像用不了了,我打开guideguide之后就一个黑色的空白界面,什么也没有
    我是MAC 10.8.2,PS CS6
     

  18. betwin999 说:

    原来真的有这样的好工具,以后不用死盯着屏幕拖辅助线了。

  19. vlichao 说:

    很使用,谢谢

  20. 说:

    先下载。

  21. 这个是否有点像PS里面的guide?

  22. 奶茶 说:

    蛮实用的小工具。。。谢谢了。。。

  23. leon 说:

    干货,V5!

  24. 珊珊 说:

    很实用。

  25. Mr.Simpler 说:

    军哥献上来的干货,给力啊~~

  26. Mrq0228 说:

    数学不好的中枪了…看了介绍非常实用…果断下载试试

  27. 范范 说:

    太实用了,来得真及时

发表你的评论