教你用PS插件Velositey加快Web原型教程

这里是萧边为你带来的PS插件，Velositey，并迅速完成网页原型设计。这个教程很实用。对于一些学习ps的朋友来说，是值得学习的。建议大家一起学习。





注：本教程中使用Velositey是早期版本。最新版本是1.1，这与教程中显示的界面略有不同，但基本上是相同的，但它更强大。

常见的布局方式

在Velositey开始，让我们回顾一个简单常见的布局方式。采取themeforest的三个最流行的WordPress主题（阿瓦达，拥抱，和凸）为例，你会发现他们有很多共同点。


首先，在大屏幕上，你会发现他们把网站放在导航栏的左边，导航栏里有很大的横幅，多个横幅会滚动播放，整个网页的布局会显示出明显的跟踪系统。


这种布局非常流行，你会发现你经常做类似的事情，很明显，这是一个重复的工作！

在本教程中，我们将了解Velositey的功能，了解如何使Velositey执行任务自动加速原型设计的速度。此外，我们还将利用PS原生函数原型进行适当调整

少说点，我们开始吧！

设置和准备工作


作为一个PS插件，Velositey是不是目前PS的早期版本不够好，CS6和CC两版本已经推出了分别。安装的前提是安装Adobe扩展管理器。安装时，你可以把Velositey文件夹中的压缩包在PS图象处理软件的插件板或文件夹，将它与Adobe扩展管理器。

当你使用它时，在PS的菜单窗口——单击；>扩大mdash；> Velositey，你可以打开Velositey接口。


基本布局

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

新的文件

首先，我们需要点击{ }新；Template按钮创建一个新文件，文件有一个总宽度1170px网格，并且间隔30px。您可以方便地设计网站。

添加标题栏

在新template{ }；下面的按钮，你可以看到一系列的标签，其中一个是头球。当我点击其中一个，Velositey自动生成头文件中。


在这种情况下，我们使用的标题的样式是左边的Lo，导航在右边，在图层面板中，你可以看到页眉中的所有图层都放在文件夹中，你可以根据需要命名。


注意：如果你选择另一头后，Velositey会帮你换。

增加滑块区域（滑块部分）

虽然大尺寸横幅和滑块方面是有缺陷的，许多网站仍然选择保留区。有许多风格建在Velositey，这是很容易添加滑块并添加标题，并点击选择。


在这种情况下，我们选择最后一个滑块样式，因此我们生成一个包含标题、内容和两个按钮的滑块区域。


如上图所示，您可以看到图层面板中滑块区域的层分组。

添加内容

它很容易添加内容。在Velositey的第三个选项卡的内容区域。


我选择了第三种风格，在点击之后，我添加了三列内容，每一列包含标题、图片和预制内容。


添加更多的模块

在Velositey，每个模块相当于一个单独的块的内容。由设计者确定其内容和用途。不像头滑块的地区，我们可以添加多个模块文件。


在这种情况下，我们添加第一个模块，该模块包含整个网格、标题和预制文本的图片。


添加页脚

通常，页脚是在网页的底部添加，和相同的，给我们提供了一些可选页脚Velositey内置：


在这一阶段，我们完成了网页设计的必要部分，从页眉到页脚，只需点击几下，对于更好的布局，您也可以通过这种方式添加一些合理的空间：


现在我们已经完成了基本布局，然后我们可以定制它，使它看起来更符合高保真原型。


细节调整

在对文档进行个性化处理时，尽量保证各层的完整性是基本原则，在每一层进行调整时，不能对其进行破坏性修改，以保证原型的调整，这就需要使用ps的以下特性：

智能对象与智能链接对象

调整层

层的影响

此外，我更喜欢尽可能少地使用该层。

使用智能对象

当LO被放置时，需要将其调整为智能对象。

首先，您需要在标头组中找到LO层，然后右键单击它并将其转换为智能对象。


为了让LO进入这个层，我们在图层上单击右键，选择编辑内容；


这一次，我们将以PSB格式打开一个新文档，在PS中，原来的智能对象PSD在矩形中将成为透明层，我们将为LO在PSB文档中做好准备，左对齐，此时如果您将PSB文档保存到同步变化的PSD文档中。


在这一点上，我们可以很容易地改变和调整螺智能对象层。为了更有效地使用它，我们可以点击右上的这一层，选择转换为链接hellip；选项。


后来，PS会提醒你，保存在PSB格式智能对象文件。作为网站图片系统的重要组成部分，您将使用这一瞧。通常，我们会将它保存在一个文件夹名为image

尽量把附近的PSD图片和图标的文件夹，而不是一个文件夹命名为别人在桌面上。mdash；mdash；PS礼仪的书


您已经编辑了头部中的LO智能对象，它可以在页脚中重复使用。在页脚组中，找到LO层，右击它，选择替换内容；


此时，打开文件夹，在你保存the.psb文件，选择罗，然后在底部用在需要的地方也做罗。


其他地方的做法相似。


使用图层效果

每个人都非常熟悉图层效果的调整。在这种情况下，我们使用图层效果添加按钮的颜色并添加渐变。


重复这些步骤，这里是你需要仔细研究的设计细节，它们使你的网页更易读，更直观，等等。


使用调节层

调整层的存在使得设计师定制的语调层中的非破坏性的方式（亮度，对比，等等），在这种情况下，我们可以在模块分为黑色和白色把图标。模组中，找到对应的层，单击右键，选择编辑内容，选项，单击调整之后，新的层，然后选择黑白效果。


最终产品

最后，将预制的文本内容（标题，文本）替换成您所需要的，然后原型就是完成的产品！


结论

仔细看看Velositey，你会发现使用工具的工作真的能半倍。不管你使用PS、AI或素描，这些系统化的设计平台，有很多的技巧和工具，扩大。当你在业余时间学习时，你会收获很多。你说呢