使用PS插件VELOSITEY疾速搞定网页原型设计_Photoshop教程_动态网站制作指南
使用PS插件VELOSITEY疾速搞定网页原型设计
来源：人气：285
　　注意：教程所使用的Velositey为早期版本，目前最新版为1.1，与教程中所示界面稍有差别，但是基本一致，不过更为强大。　　常见的布局样式　　在真正开始研究Velositey之前，让我们先来简单温故一下常见的布局样式。以ThemeForest最受欢迎的三个ess主题(Avada、Enfold和Salient)为例，你会发现它们有着许多共同点。　　首先，在大屏幕上你会发现，它们都将网站LOGO置于导航栏最左侧，导航栏下都有大幅Banner，并且多个Banner会滚动播放。整个网页的布局会呈现出明显的遵循栅格系统来设计的痕迹。　　这种布局方式是如此的普及，你会发现你经常在做类似的事情，很明显这是重复工作!　　在这篇教程中，我们会了解Velositey的功能，并了解如何让Velositey快速地自动执行任务，加快原型设计的速度。此外，我们还会借助PS的原生功能为原型进行适当的调整。　　闲话少叙，让我们开始吧!　　设置和准备工作　　作为一款PS插件，Velositey对于早期版本的PS支持并不好，目前单独推出了针对CS6和CC两个版本，安装的前提是安装好Adobe的扩展管理器。安装的时候，可以将压缩包中的Velositey文件夹放到的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格式的新文档，原来中的这个矩形的智能对象会变为一个透明图层，我们将准备好的LOGO置于这个PSB文档中，左对齐，这个时候如果你保存了这个PSB文档，原来的PSD文档中会同步改变。　　此时，我们可以将这个LOGO智能对象图层轻松改变、调整。为了更为有效地使用，我们可以在这个图层上点击右键，选择&转换为链接&&选项。　　随后，PS将会提醒你保存PSB格式的智能对象文件。作为网站图片体系的重要组成部分，这个LOGO你会用上的。通常，我们会将其保存到一个名为&image&的文件夹中。　　&尽量将图片和图标的文件夹放在靠近PSD的地方，而不是放在桌面上某个名为Others的文件夹里面。&&&PS礼仪书　　你在Header中编辑好了LOGO的智能对象，它还可以在Footer中复用。在Footer的组中找到LOGO的图层，右键点击它，选择&替换内容&。　　这个时候打开你保存那个.PSB 文件的文件夹，选择LOGO，那么底部需要用到LOGO的地方也搞定了。　　其他地方的处理方式也是类似的。　　使用图层效果　　调整图层效果想必大家都已经非常熟悉了。在案例中，我们借助图层效果来为按钮上色，添加渐变。具体的操作在这里就不赘述了。　　重复这些步骤，这里就是需要你精心打磨的设计细节了。它们让你的网页的可读性更高，增加视觉表现力，等等等等。　　使用调整图层　　调整图层的存在，使得设计师可以以非破坏性的方式来定制图层的色调(亮度、对比度等)。在案例中，我们可以将模块中的图标变为黑白。在模块组中找到对应的图层，右键点击，选择&编辑内容&选项，随后，点击&新建调整图层&然后选择黑白效果就好了。　　最终成品　　最后，将预制的文本内容(标题、文本)替换成你需要的内容，然后这个原型就算是成品了!　　结语　　仔细看看Velositey，你会发现用好工具真的能事倍功半。不论你是用PS、AI还是热衷Sketch，这些系统化的设计平台都有着许多使用技巧和拓展工具，闲暇的时候稍加研究，绝对会获益匪浅。你说呢?
优质网站模板页面载入中...
当前位置： >
> 使用PS插件Velositey疾速搞定网页原型设计
使用PS插件Velositey疾速搞定网页原型设计
&&&&&&& 我们推荐Velositey这个PS插件已经不是一次两次了。这款著名的PS网页布局设计工具为何会有“神器”之称？因为它真的能让你在短短几分钟内完成网页原型设计。正如同Velositey的口号所说：“让设计师专注打磨细节完善设计，而不用在无聊枯燥的事情上耗费时间。”先下后看，年薪百万：注意：教程所使用的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会帮你替换掉。增加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，这些系统化的设计平台都有着许多使用技巧和拓展工具，闲暇的时候稍加研究，绝对会获益匪浅。你说呢？&&原文地址：优设网译者：优设网
(window.slotbydup=window.slotbydup || []).push({
id: '2523099',
container: s,
size: '250,250',
display: 'inlay-fix'
设计原的发展离不开您的支持与帮助，如果您觉得设计原对您有所帮助 可以用微信扫描
相应二维码打赏设计原，赏金将全部用于网站建设PS神器Velositey助您快速的搭建网页布局
下面，图老师小编带您去了解一下PS神器Velositey助您快速的搭建网页布局，生活就是不断的发现新事物，get新技能~
一个网页，最基本就是从画布局开始，然而这个也是比较耗时间的，不过没关系，今天设计达人为大家分享一个网页布局Photoshop扩展插件Velositey，这个扩展可以快速在PS上实现多种布局，布局包含头部、、内容布局、页脚排版等等。还有个我喜欢Velositey的原因就是这个布局兼容Bootstrap前端框架，它生成的栅格线、Layout都能用Bootstrap来编写，十分方便。下面我们来简单介绍下这个扩展：软件使用是免费的，所以放心使用，请选择对应的Photoshop版本下载，官网测试了PS CC版，图小编测试的是PS CS6版，所以都没问题哦。Velositey CS6 V1.1 微盘下载Velositey CC V1.1 微盘下载一分钟搭建网页布局快速新建栅格线,栅格总宽度为1170PX，刚好和Bootstrap框架一样。通过扩展的布局功能，我们只用1分钟时间就能实现下图这个网页排版，图层也帮你编组好，真的好人性化。&安装VelositeyStep 1： 下载扩展先从官网下载对应版本的Velositey Photoshop 扩展（下载链接在文章底部），如下图，点击网页页脚的下载按钮，需要提供Twitter和Facebook帐号才能下载，不过我们也很贴心的上传到微盘上了。Step 2：安装路径这里图老师小编下载的是CS6版本，解压后把Velositey整个到CS6安装目录的：Plug-ins&Panels目录下。Step 3：: 打开扩展打开PS软件，然后点击菜单窗口-扩展功能Velositey即可打开。好吧，安装都是很简单的，如果有问题或使用心得，可在文章底部评论处留言交流。如果你有好的扩展，请别忘了分享哦！& 搜索“图老师”或者“tulaoshi_com”加关注，每天最新的美食、、、美妆、、手工DIY等教程让你一手全掌握。推荐关注！【扫描下图可直接关注】
来源:/n/6084.html
点击查看更多与《》相关的文章>>
清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注图老师为大家准备的精彩内容。下面为大家推荐如何快速的制作网页活动专题页界面，无聊中的都看过来。
每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情，闲暇的时间怎么打发，关注图老师可以让你学习更多的好东西，下面为大家推荐20个独特的基于网络布局的网页设计欣赏，赶紧看过来吧！
今天给大家分享的是由图老师小编精心为您推荐的3大速成法快速的搞定极简主义网页，喜欢的朋友可以分享一下，也算是给小编一份支持，大家都不容易啊!
今天图老师小编给大家展示的是6种企业网站首页设计常见的布局方式，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！
只要你有一台电脑或者手机，都能关注图老师为大家精心推荐的精选国外以垂直分割布局的网页设计欣赏，手机电脑控们准备好了吗？一起看过来吧！
下面图老师小编要跟大家分享20款布局大气的欧美网页设计模板PSD素材，简单的过程中其实暗藏玄机，还是要细心学习，喜欢还请记得收藏哦！
热门搜索：
照片墙设计 制作特别的磁铁照片墙
Photoshop参数设置调整图片背景颜色
雅各布森经典设计作品：蛋椅(EggChair)
2017美国地区设计年鉴入选平面设计作品一
杠铃由杠铃杆、杠铃片和卡箍组成，简笔画亦不能忽视此三类部分，以侧面简笔画绘画方式 更能体验杠铃特色。接下来就让我们通过杠铃儿童简笔画图解步骤来一起学习如何画好看的杠铃简笔画吧！
双节棍又名二节棍双截棍，是一种经典的武器。短小精悍，简笔画中双截棍铁链为重点，为了更能体验双截棍的特性，小朋友在画双截棍环链的时候可用双线方式来绘画。接下来我们就来学习双截棍儿童简笔画图解步骤。
西洋剑是击剑运动的武器，箭身由粗到细，剑柄的绘画也要注意。儿童简笔画绘画学知识，今天我们通过西洋剑儿童简笔画步骤图解教程来学习花剑的简笔画，同时也能了解西洋剑的基本结构。
击剑头盔类似于西方古代骑士头盔，不同的是需要在面罩花纹上画功夫，相较于骑士头盔来说击剑头盔花纹较为简单。接下来就让我们来通过击剑头盔儿童简笔画教学步骤图解来学习怎么画击剑头盔吧！
家居装修是我们都会经历的，每个人对家居装修都有不同的要求，好的居家布置给我们带来的不仅仅是温馨的居家情调，更是轻松舒适的心情。想要除去往日的乏味，让家居变的有品位起来，不妨来看看这些家装布置的小技巧吧。
马上就要迎来夏季了，很多人在春季买了房子后都考虑要不要在夏季装修。装修对于很多人来说都是一件非常重要的事情。那么，到底夏季装修好吗？夏季装修有什么优劣势呢？又有什么需要注意的事项呢？下面就一起来看看吧。
Photoshop是一门非常专业的ps修图课程，很多网页设计的以及美工们修图都是需要用到的，功能非常强大，掌握一定的Photoshop技巧是非常有必要的，今天就给教大家怎么利用Photoshop制作万花筒GIF动画。
很多朋友都信风水一说，对于自己家里房屋客厅的装修也是有一定要求的，因为客厅的风水关系着整个家居的运势，更关系着主人的财运与健康，因而客厅里的风水禁忌是需要我们谨慎注意的，那么风水学中客厅风水禁忌有哪些呢？
春天已经来临了，夏天也不远了，新的一才刚刚开始，时尚爱美的美眉们最关注的就是春夏服装设计的流行趋势了，早早的把握住时尚趋势走在流行的最尖端，今天就给大家整理分享2017春夏女装设计流行趋势 ，你绝对不能错过的亮点。
2017年最新个性家装风格流行趋势！！如今的装修风格已不仅仅局限于中式、欧式、韩式等这些常见的装修类型了，它正变得越来越多元化。那么都有哪些家装新风尚逐渐走进我们的生活呢？下面就提前让大家了解家装风格的风向。
春天来临了，很多买了房子的朋友都开始展开自己的装修计划了，在这个个性张扬的年代，你要是不去改变自己，麻木而千篇一律的装修，也许自己住着也会觉得无趣吧。今天就给大家介绍2017年装修设计五大流行趋势。
男女交往一直都是人们比较关注的一个问题，都说相爱容易，相处不易，交往过的朋友应该都能深刻的体会到，女生常常抱怨着让男生理解自己，但男生也希望多体谅一下他们。尤其不要老是问一些无法回答的问题来考验他们。
2017年最受欢迎的生活服务APP！！生活服务类App的出现为日常生活带来极大便利，我们可以通过手机客户端预约各种家政服务，足不出户就能够享受实惠、便捷的生活服务，那么接下来我为大家推荐一些生活中必备生活app。
由于现在抢红包大热起来，很多app都开始支持发红包抢红包了，因此也出现了微信抢红包神器，可以自动抢微信红包,肯定比认为手动操作快,有消息就会自动打开,然后打开红包。今天就给大家分享2017微信自动抢红包神器大全。使用PS插件VELOSITEY疾速搞定网页原型设计
稿源：优设网
使用图层效果
调整图层效果想必大家都已经非常熟悉了。在案例中，我们借助图层效果来为按钮上色，添加渐变。具体的操作在这里就不赘述了。
重复这些步骤，这里就是需要你精心打磨的设计细节了。它们让你的网页的可读性更高，增加视觉表现力，等等等等。
使用调整图层
调整图层的存在，使得设计师可以以非破坏性的方式来定制图层的色调（亮度、对比度等）。在案例中，我们可以将模块中的图标变为黑白。在模块组中找到对应的图层，右键点击，选择&编辑内容&选项，随后，点击&新建调整图层&然后选择黑白效果就好了。
最后，将预制的文本内容（标题、文本）替换成你需要的内容，然后这个原型就算是成品了！
仔细看看Velositey，你会发现用好工具真的能事倍功半。不论你是用PS、AI还是热衷Sketch，这些系统化的设计平台都有着许多使用技巧和拓展工具，闲暇的时候稍加研究，绝对会获益匪浅。你说呢？
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页新窗口打开搜索结果
↑ 设计书籍频道已开放，感谢分享的小伙伴们 ↑
(ノ???)ノ*:???
小盆友和大神都值得拥有的设计师网址导航
*:???ヽ(???ヽ)
显示最近 15 个访问记录