ssgsdh 发表于 2021-8-9 10:58:41

明白:PS插件Velositey疾速搞定网页原型设计


优设的老读者可能会注意到,我们推荐V这个PS插件已经不是一次两次了。这款著名的PS页布局设计工具为何会有神器之称?因为它真的能让你在短短几分钟内完成页原型设计。正如同V的口号所说:让设计师专注打磨细节完善设计,而不用在无聊枯燥的事情上耗费时间。事实上,V就是这样!注意:教程所使用的V为早期版本,目前最新版为11,与教程中所示界面稍有差别,但是基本一致,不过更为强大。zerospace的相关资讯可以到我们网站了解一下,从专业角度出发为您解答相关问题,给您优质的服务!http://www.ykmlg.cn/images/2021/08/06/0d05a1f2d47f77827d12d89967a9a622.png
常见的布局样式在真正开始研究V之前,让我们先来简单温故一下常见的布局样式。以TF最受欢迎的三个W主题(A、E和S)为例,你会发现它们有着许多共同点。
首先,在大屏幕上你会发现,它们都将LOGO置于导航栏最左侧,导航栏下都有大幅B,并且多个B会滚动播放。整个页的布局会呈现出明显的遵循栅格系统来设计的痕迹。这种布局方式是如此的普及,你会发现你经常在做类似的事情,很明显这是重复工作!在这篇教程中,我们会了解V的功能,并了解如何让V快速地自动执行任务,加快原型设计的速度。此外,我们还会借助PS的原生功能为原型进行适当的调整。闲话少叙,让我们开始吧!
设置和准备工作
作为一款PS插件,V对于早期版本的PS支持并不好,目前单独推出了针对CS6和CC两个版本,安装的前提是安装好A的扩展管理器。安装的时候,可以将压缩包中的V文件夹放到P的P-里的P文件夹中,或者使用A扩展管理器来安装。当你使用的时候,在PS的菜单中点击窗口扩展V,便可以打开V的界面。
基本布局让我们从新建一个新文档开始。
新建文档首先,我们需要点击[+]NT按钮来新建一个空白文档。文档自带栅格,总宽度1170,间隔为30,方便你为进行设计。
添加H在[+]NT按钮下方,你可以看到一系列选项卡,其中一个是H。当我点击其中的一个的时候,V会自动在文档中生成H。
在这个案例中,我们使用的H的样式是L在左,导航在右。在图层面板中,你可以看到H中所有图层均置于文件夹中,你可以根据需求进行命名。注意:如果你随后选择其他的H,V会帮你替换掉。
增加S区域(SS)尽管大尺寸B和区域有缺陷,但是很多依然选择保留这个区域。V中内置了许多样式,增加区域和添加H一样容易,点击选择即可。
案例中,我们选择最后一个样式,于是就生成了一个包含标题、内容和两个按钮的区域。
正如上图所示,你可以在图层面板中看到区域的图层分组。
增加内容区域增加内容区域也一样简单。V中第三个选项卡就是内容区域。我选择了第三个样式,点击后添加了三列内容,每列包含标题、图片和预制的内容。
页: [1]
查看完整版本: 明白:PS插件Velositey疾速搞定网页原型设计