猎酷网

网页美工之photoshop辅助线

2013-03-26 0人评论 1044次浏览 分类:设计经验

一、你的辅助线的样子是准确的还是随意的

网页美工之photoshop辅助线

杂乱的辅助线

网页美工之photoshop辅助线

准确又整齐的辅助线 

二、辅助线基本操作
新增:
   通常做法是在显示标尺情况下,从标尺处直接拉出辅助线,这种做法不够明确,当视图放大时候经常会发现辅助线并不对齐实际像素。
删除:
   将辅助线拖出文档窗口视图外,就可以删掉辅助线。如果要删除辅助线,可以使用菜单“视图”-“删除辅助线”的功能。
旋转:
   按住Alt时可以90°旋转辅助线,其实就是水平和垂直两种辅助线之间的互转。
锁定:
  菜单“视图”-“锁定辅助线”功能,锁定全部辅助线。
显示和隐藏:
   菜单“视图”-“显示”-“辅助线”,快捷键为Ctrl+H。
设置:
   在菜单“首选项”-“辅助线和网格”的弹出窗口可以设置辅助线属性。在“辅助线和网格”设置窗口可以修改辅助线的颜色和样式。或者在选择移动工具并且辅助线没有锁定的的情况下,双击辅助线,这时也会弹出设置窗口,但这样可能会导致辅助线轻微移动。
准确定位:
   新增辅助线有另一种更准确的做法,在菜单“视图”-“新增辅助线”的弹出窗口,通过输入数值精确定位。除了输入准确的整数坐标,也可以输入百分比数值。例如输入50%快速定位图片的中线,输入61.8%或38.2%就是当前图片的黄金分割线。如果需要很多辅助线,就需要花较长时间来计算,虽然通过输入准确的数值可以让辅助线对齐像素,这也是比较费时的做法。

网页美工之photoshop辅助线

黄金分割

对齐像素:
   拖动辅助线时按住Shift,辅助线会自动对齐到当前标尺的刻度上。标尺的刻度会随着视图缩放而发生变化。
使用动作或脚本:
   960网格系统是网页上比较流行的网格系统。http://960.gs/网站制作了一个atn文件让设计师生成不同类型的960网格。这个动作会新建一个固定宽度的文档然后对该文档添加辅助线。如果要让辅助线居中,需要改变画布的大小。可以将画布宽度改为960PX,运行动作之后再将画布水平方向两边扩展相同尺寸,这样辅助线便会居中。

网页美工之photoshop辅助线

更改画布大小的时候辅助线会居中

使用脚本创建网格系统会更加自由而且灵活。脚本除了能完成类似ps动作这样固定的操作,还能可以加入逻辑或者判断,从https://gist.github.com/1335730 上下载压缩包,或者将代码复制复制出来保存成.jsx文件。在ps菜单“文件”-“脚本”-“浏览”打开下载的”NumberGuidesGride.js”文件(需要文件浏览对话框的文件类型下拉选项选择”.js”文件),脚本会询问垂直辅助线的间隔和宽度,不需要水平辅助线的可以输入0。
使用扩展:
   GuidesGride是一个免费的设置辅助线的photoshop的扩展,能够建立各种有规律的辅助线,保存和管理各种用户预设。介绍文档 http://www.guideguide.me/ 。这个扩展安装需要使用到Adobe Extension Manager,安装完之后重启ps,便可以在菜单“窗口”-“扩展”下打开GuidesGride面板。

三、相关书籍
   《秩序之美——网页中的网格设计》Ordering Disorder:Grid Principles for Web Design
   《栅格系统与版式设计》Grid Systems:Principles of Organizing Type(Kimberly Elan)

四、一句话总结
离你越近的地方,路途越远;最简单的音调,需要最艰苦的练习。

顶一下
(0)
0%
踩一下
(0)
0%

发表评论共有0访客发表了评论

    暂无评论,快来抢沙发吧!

我来说几句吧

验证码: 看不清楚?