time 
设为首页】【收藏本站
当前位置: 主页 > PhotoShop > PS合成教程 > Photoshop插件VELOSITEY疾速搞定网页原型设计

Photoshop插件VELOSITEY疾速搞定网页原型设计

时间:2015-03-19 11:45 点击:1689次 字体:[ ]




   常见的布局样式

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

Photoshop插件VELOSITEY疾速搞定网页原型设计_www.fengfly.com

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

Photoshop插件VELOSITEY疾速搞定网页原型设计_www.fengfly.com

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

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

  闲话少叙,让我们开始吧!

  设置和准备工作

Photoshop插件VELOSITEY疾速搞定网页原型设计_www.fengfly.com

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

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

Photoshop插件VELOSITEY疾速搞定网页原型设计_www.fengfly.com

  基本布局

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

  新建文档

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

  添加Header

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

Photoshop插件VELOSITEY疾速搞定网页原型设计_www.fengfly.com


本文地址 : http://www.fengfly.com/plus/view-215905-1.html
标签: Photoshop 网页 插件 Velositey 原型设计
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: