解析PS的Velositey插件在网页设计中应用

我们推荐Velositey这个PS插件已经不是一次两次了。这款著名的PS网页布局设计工具为何会有“神器”之称？因为它真的能让你在短短几分钟内完成网页原型设计。正如同Velositey的口号所说：让设计师专注打磨细节完善设计，而不用在无聊枯燥的事情上耗费时间。

事实上，Velositey就是这样！

先下后看，年薪百万：http://vdisk.weibo.com/s/zduirFgzTMPAc

注意：教程所使用的Velositey为早期版本，目前最新版为1.1，与教程中所示界面稍有差别，但是基本一致，不过更为强大。

常见的布局样式

在真正开始研究Velositey之前，让我们先来简单温故一下常见的布局样式。以ThemeForest最受欢迎的三个Wordpress主题（Avada、Enfold和Salient）为例，你会发现它们有着许多共同点。

首先，在大屏幕上你会发现，它们都将网站LOGO置于导航栏最左侧，导航栏下都有大幅Banner，并且多个Banner会滚动播放。整个网页的布局会呈现出明显的遵循栅格系统来设计的痕迹。

这种布局方式是如此的普及，你会发现你经常在做类似的事情，很明显这是重复工作！

在这篇教程中，我们会了解Velositey的功能，并了解如何让Velositey快速地自动执行任务，加快原型设计的速度。此外，我们还会借助PS的原生功能为原型进行适当的调整。

闲话少叙，让我们开始吧！

设置和准备工作

作为一款PS插件，Velositey对于早期版本的PS支持并不好，目前单独推出了针对CS6和CC两个版本，安装的前提是安装好Adobe的扩展管理器。安装的时候，可以将压缩包中的Velositey文件夹放到photoshop的Plug-ins 里的 Panels 文件夹中，或者使用Adobe扩展管理器来安装。

当你使用的时候，在PS的菜单中点击 窗口—>扩展—>Velositey ，便可以打开Velositey的界面。

基本布局

让我们从新建一个新文档开始。

新建文档

首先，我们需要点击“[+] New Template”按钮来新建一个空白文档。文档自带栅格，总宽度1170px，间隔为30px，方便你为网站进行设计。

添加Header

在“[+] New Template”按钮下方，你可以看到一系列选项卡，其中一个是Header。当我点击其中的一个的时候，Velositey会自动在文档中生成Header。

在这个案例中，我们使用的Header的样式是Logo在左，导航在右。在图层面板中，你可以看到Header中所有图层均置于文件夹中，你可以根据需求进行命名。

注意：如果你随后选择其他的Header，Velositey会帮你替换掉。