常见的布局样式
在真正开始研究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会帮你替换掉。
增加Slider区域(Slider Section)
尽管大尺寸Banner和slider区域有缺陷，但是很多网站依然选择保留这个区域。Velositey中内置了许多样式，增加slider区域和添加Header一样容易，点击选择即可。
案例中，我们选择最后一个slider样式，于是就生成了一个包含标题、内容和两个按钮的slider区域。
正如上图所示，你可以在图层面板中看到slider区域的图层分组。
增加内容区域
增加内容区域也一样简单。Velositey中第三个选项卡就是内容区域。
我选择了第三个样式，点击后添加了三列内容，每列包含标题、图片和预制的内容。
增加更多模块
在Velositey中，每个模块相当于一个独立的内容块。它的内容和用途由设计师来决定。和Header、滑块区域不同，我们可以在文档中添加多个模块。
在案例中，我们添加了第一个模块，其中包含一个横跨整个栅格的图片，标题和预制的文本。
添加Footer
通常网页的最底下都会添加Footer，同样的，Velositey为我们内置了一些可选的Footer：
在这个阶段，我们已经完成了网页设计的必要部分，从Header到Footer，只需要几次点击就可以了。为了更好的布局，你还可以这样添加一些合理的空档：
现在我们已经完成了基本的布局，接下来，我们可以定制它，让它看起来更符合一个高保真的原型。
细节调整
当我们为文档进行个性化调整的时候，尽可能保证每个图层的完整性是基本原则。每个图层在进行调整的时候，不能对其进行破坏性的修改，这样可以确保原型的可调整性。这样一来，我们就需要用到PS的以下特性：
智能对象和智能链接对象
调整图层
图层效果
此外，我个人比较喜欢尽可能少地使用图层。
使用智能对象
在置入LOGO的时候，将其调整为智能对象是非常有必要的。
首先，你需要在Header组中找到那个名为LOGO的图层，鼠标右键点击它，将其转换为智能对象。
为了将LOGO置入这个图层，我们在这个图层上点击右键，选择“编辑内容”。
这个时候，我们会在PS中打开一个PSB格式的新文档，原来PSD中的这个矩形的智能对象会变为一个透明图层，我们将准备好的LOGO置于这个PSB文档中，左对齐，这个时候如果你保存了这个PSB文档，原来的PSD文档中会同步改变。
此时，我们可以将这个LOGO智能对象图层轻松改变、调整。为了更为有效地使用，我们可以在这个图层上点击右键，选择“转换为链接…”选项。
随后，PS将会提醒你保存PSB格式的智能对象文件。作为网站图片体系的重要组成部分，这个LOGO你会用上的。通常，我们会将其保存到一个名为“image”的文件夹中。
“尽量将图片和图标的文件夹放在靠近PSD的地方，而不是放在桌面上某个名为Others的文件夹里面。”——PS礼仪书
你在Header中编辑好了LOGO的智能对象，它还可以在Footer中复用。在Footer的组中找到LOGO的图层，右键点击它，选择“替换内容”。
这个时候打开你保存那个.PSB 文件的文件夹，选择LOGO，那么底部需要用到LOGO的地方也搞定了。
其他地方的处理方式也是类似的。
使用图层效果
调整图层效果想必大家都已经非常熟悉了。在案例中，我们借助图层效果来为按钮上色，添加渐变。具体的 *** 作在这里就不赘述了。
重复这些步骤，这里就是需要你精心打磨的设计细节了。它们让你的网页的可读性更高，增加视觉表现力，等等等等。
使用调整图层
调整图层的存在，使得设计师可以以非破坏性的方式来定制图层的色调(亮度、对比度等)。在案例中，我们可以将模块中的图标变为黑白。在模块组中找到对应的图层，右键点击，选择“编辑内容”选项，随后，点击“新建调整图层”然后选择黑白效果就好了。
最终成品
最后，将预制的文本内容(标题、文本)替换成你需要的内容，然后这个原型就算是成品了!
结语
仔细看看Velositey，你会发现用好工具真的能事倍功半。不论你是用PS、AI还是热衷Sketch，这些系统化的设计平台都有着许多使用技巧和拓展工具，闲暇的时候稍加研究，绝对会获益匪浅。你说呢?
这个也要看你的领域吧，一般室内的话比较喜欢的是pinterest,平面的话比较喜欢的是behance，当然也不仅限于这两个，像pin的素材种类比较多，在设计师心中是一个很强大的存在，后来上不去了，还是朋友给我推荐了一个网站，大师助手，可以免费上，二来网站种类也多，你也可以下载试试
设计师必备的40个国外设计素材网站：
1.Fribbble
来自Dribbble的免费素材会在这个网站汇集，有图标、PSD、各类视觉稿，不一而足。
2.Behanceprojecttemplate
在Behance上发布设计项目的时候，不知道如何展示才漂亮？看看这篇文章，下载结尾漂亮的模板，问题就迎刃而解了。
3.psddd.co
这也是一个寻找免费PSD文档、虚化背景图和漂亮UI元素的好网站。
4.colourlovers
如果你还在为寻找好的色彩搭配而纠结，那么千万不要错过这个网站，你要的一切都在这里，从灵感搜集到成型的方案，满足你的每一个愿望。
5.CGtextures
这个网站提供了大量的免费图片，这类图片大多是关于石头、天空、树木等富有纹理质感的对象，当你需要制作有质感的对象的时候，这个网站会成为你最好的帮手！
6.SubtlePatterns
纹理神站！它不仅提供了超过400款高品质纹理素材，还提供了在线纹理制作工具，你还在等什么呢？
7.Webydo
著名的无代码网站搭建平台Webydo在此，上手试试吧~
8.guideguide
如果你也苦于设计网页中的栅格和布局，那么GuideGuide会是你的好帮手。我们也曾发文讲述如何使用这一工具《PS参考线插件GUIDEGUIDE下载及使用说明》
9.Nomorebanding
有时候使用PS制作渐变效果的时候，渐变效果并不平滑，而是呈现出阶梯状的变化，这个动作可以消除这种阶梯状渐变，看起来更加顺畅平滑，非常不错哦。
10.Gridzzly
Gridzzly可以帮你制作自己的格纸，制作出非常不错的印刷图案，精确而实用。
11.MakeappIcon
这个工具可以帮你将你的图标转变为可为iOS和Android设备使用的APP图标尺寸。
12.PerfectEffects3
这是专门为摄影师所设计的工具，使用PerfectEffects3你可以更容易添加效果，想比起耗时庞大的Photoshop、Lightroom以及Aperture，它更加快速实用。
13.Cut&Slice
著名的Mac平台切图工具，它可以帮你在短短几分钟内搞定分组切图的工作，不过请务必记住要重命名各个图层。
14.LayrsControl2
这是一组包含7个不同脚本的图层管理插件合集，它可以让你繁琐的工作更加简单。
15.Hexy
选择图层，高亮文本，然后通过拾色器来取色，有的时候是太过复杂的过程，Hexy则非常方便，它可以使用滴管快速取色然后直接复制到剪切板当中，即取即用。
16.WhatTheFont!
看到一个漂亮的字体想知道它到底是什么字体？试试WhatTheFont吧，上传截图，它会为你在数据库中进行匹配。
17.Typewolf
Typewolf可以帮你显示正在浏览的网站所使用的字体，推荐类似的字体和背景信息。
18.SizeMarks
SizeMarks是一个非常实用的Photoshop脚本，它可以测量不同元素之间的距离，对于设计师和前端颇为有用。
19.VelositeyVersion2
仅需要几秒钟，Velositey可以借助模板在Photoshop中快速构建网页布局。
20.FontAwesomePS
这个工具可以帮你快速搜索图标，一键点击将其新建为新的图层，并且可以轻松编辑。
21.LivesharePS
借助LivesharePS，你可以将PSD文档在Liveshare会议上在线分享展示，你的任何 *** 作都可以让大家看到，哪怕你没有点击保存按钮。
22.PhotoshopShareplugin
这个插件可以让你无需离开Photoshop就一键分享你的设计作品。
23.Prisma
想把你的AI中的配色方案同步到PS？Prisma可以让所有支持这一插件的软件中的配色方案都同步起来。
24.FreeLoremIpsumGenerator
这是最好的假文生成器，可以在Photoshop、AI、ID和Dreamweaver中使用。
25.FreeBehancePresentationBuilder
这个免费的Behance展示生成器可以借助一个免费PSD文档和PS动作帮你将作品制作成展示效果。
26.Kaku
一个简单的PS插件，可以帮你将图层中的文本而翻译成不同的语言。
27.InstagramFilters
这是一组13个滤镜，可以在PS中帮你将图片制作成类似Instagram的效果。
28.VSCOCamEffectinPhotoshopTutorial
来自GoMedia的SimonHartmann撰写了这篇实用而炫酷的教程，教你如何在Photoshop中实现VSCO处理图片的效果。
29.SocialKit
这款Photoshop插件包含了一系列可用于社交媒体的图片、广告Banner和资料信息等内容。
30.MobileUIBlueprintpsdfiles
这是一组免费的包含大量移动端UI元素的PSD文档。
31.FreeImages
这个网站之前一直以sxc.hu而闻名，其中包含了395000多个可免费下载的图片。
32.UICloud
这是世界上最大的UI设计数据库，现在它包含了超过46000个UI控件，并且可以免费下载。
33.MockUpZones
MockupZones为你提供了大量优秀的免费视觉稿下载，从iPhone、iPad的界面设计到商业名片和文化衫设计，覆盖广泛。
34.MacbookAirandThunderboltDisplay
这是一组用来展示设计作品的MacbookAir和Thunderbolt显示的视觉稿PSD文档。
35.Greyscalegorilla3DTutorials
设计师GreyscaleGorilla的个人站点，这个才华横溢的设计师在自己的网站中发布了许多制作3D设计作品的教程。
36.VrayMaterials
如果你是经常使用C4D的设计师的话，这个网站不要错过，其中有许多优质的贴图材质素材。
37.Blendme
这个可用于PS和AI的插件可以让你直接在软件中搜索并获取各类素材。
38.AdobeKnowHow
这个是Adobe最新推出的教程网站，提供了几款著名软件的免费的初级课程。
39.Tuts
这是最知名的PS教程网站，不论你是初学者还是专业的设计师，都能从中获益良多。
40.Pixeden
这是一个堪称伟大的免费资源包，从视觉稿到模板、图标，非常全面，不要错过
有个软件第三方平台挺不错:
大作
他简单快速速，平台内部收集了很多全球免费的设置资料库。如果你申请成为会员，可以快速的实现。全国各地多种资料库以及设计网站的翻墙工作。我平时找包装。产品外观设计以及室内设计等都在这个平台上面。你可以去感受一下。但不建议你一刚开始就去缴费。如果觉得自己有用，在后期去，缴费也可以。
在国内，也有很多优秀的设计平台。想花瓣。站酷。以及很多收费的素材网站等。都可以去了解和尝试。希望可以帮到你。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）