详细解析如何使用手上的网站UI资源

2016-02-16 23:10 12 1 收藏

今天图老师小编要跟大家分享详细解析如何使用手上的网站UI资源,精心挑选的过程简单易学,喜欢的朋友一起来学习吧!

【 tulaoshi.com - 平面设计 】

如果您关注了优设哥的微博,肯定已经在上面下载了很多漂亮上档次的UI工具了,大家都知道,UI工具包里有很多好看的资源:比如按钮、滑块、面包屑、播放器、表单,甚至是一个赞!的小图标。但是这个UI工具包具体该怎么使用呢?总不能拿来藏着一直不用吧。

首先给小伙伴们简单介绍一下这个UI工具包。UI kit,即User Interface Kit,意为用户界面工具包。这是一个由用户界面元素所组成的PSD文件。内含花样繁多的颜色、图案和各种被用在设计中的asl文件。我们可以根据自己的需要使用其中的一些元素。通常情况下,高端的UI工具包内含的元素比免费的UI工具包内含的元素要多得多。

使用UI工具包不仅可以改善工作流程,更能大大节省时间省去思考如何设计的烦恼。这将更便于我们集中精力于我们的网站设计的功能实现以及可用性测试。

关于这个UI工具包如何使用,咱们现在就来大干一场吧!

一、选择一个UI工具包

网上有大量的UI工具包,不过此次例子我们使用Flat UI,这款UI kit拥有众多好用的设计元素。

点击此处下载:MissYuan_UI设计.rar

下面是一点点工具包的推荐。

Flat UI Pro(专业的设计框架)

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

Flat AP UI Kit

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

Featherweight UI(一款免基于矢量和视网膜的免费UI工具包)

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

Flat Design UI Kit Vol. 1

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

FREE flat UI kit.

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

UI Kit

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

好了,开始吧~

打开UI工具包PSD

双击打开flat-ui-free.psd,出现以下面板。

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

解释一下图层面板的三个编组内容(点编组左边的眼镜可查看具体编组内容):

Basic Elements –一系列零碎的UI元素集成

Samples –实际应用程序设计UI元素

Background背景

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

二、使用UI工具包设计元素

使用移动工具点击自动选择-组,然后打开文件夹Basic Elements。

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

接下来选中我们需要的元素。比如我们选择menu, share, radio buttons和checkboxes,把它们移到新的ps文件里面。

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

三、调整UI工具包元素

选择直接选择工具(Direct Selection Tool )

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

直接选取我们要调整的元素就可以开始调整啦!

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

四、改变UI元素的颜色

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

选中需要改变颜色的元素,双击该图层的形状图层直接就可以换颜色啦!比如这里的菜单背景我们可以双击body图层改变颜色为#00acc0。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

五、矢量图标

使用一些图标会给网站带来生气。比如做一些小指引。我们现在看到Vector icons一栏,新建一个ps文件,使用圆角矩形工具( Rounded Rectangle Tool )绘制一个372*372px的方框。将UI工具包里面的Vector icons一栏下的打钩图标拖过来放在中央偏上,然后继续使用圆角矩形工具绘制一个绿色的指示按钮。这样子我们就使用了矢量图标。

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

六、导出UI元素

做完修改接下来就是导出了。选中需要导出的元素本身(记住不是编组而是元素本身的图层),拖到新的ps文件里,让文件的背景为透明,然后执行图像裁切,按照下图打钩,裁切以后ctrl+shift+alt+s存储为web所用格式,右上角勾选png-24(质量比较高),就可以导出了。下面是以paginator为例。

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

详细解析如何使用手上的网站UI资源,PS教程,图老师教程网

结语

UI工具包对设计师和开发人员极其有用,如果你是一个自由职业者,使用UI工具包将节省你很多时间,因为你不需要花更多的时间来思考设计。可以来寻找更多的UI工具包。尝试着用它们来丰富你的设计,然后用编码实现吧~

来源:http://www.tulaoshi.com/n/20160216/1576283.html

延伸阅读
最近一阵子我们分享了许多日本和韩国游戏网站案例,这次我们再来聊聊欧美游戏网站。电子游戏作为第九艺术,历史不到百年,但是人才辈出,创新不断:各种明星般的程序员,想想Doom的卡马克、RPG游戏史诗般的剧情(BLZ的剧情和黑岛的剧情设定),以及对细节的追求。 作为第九艺术的游戏,同样有自己的艺术特质。在玩一款游戏之前,你会怎么做呢,...
对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。 然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组...
标签: PS PS基础
如果你是设计移动UI界面又是Photoshop新手,那么今天分享的技巧教程很适合你,虽然说是移动界面设计,但同样适用于其它设计工作,比如网页设计、平面设计等等,让我们开始吧。 Photoshop新建文档设置 操作:菜单 → 文件 → 新建 宽度:640像素 高度:1136像素(4英寸iPhone设备) 分辨率:72像素/英寸(ppi) 颜色模式:RGB颜色 背...
如今,Grid-based(基于栅格的)网页设计已相当普遍,这意味着网页布局混乱的日子就要终结。尽管还无法用肉眼分辨,但我们的确是步入了有序和结构化的时代。栅格布局整体趋于匀称,通常会使网页更加整洁美观。同时,栅格框架已经成为现代所有网站功能实现的基础,这都要归功于它为终端用户提供了完美不失真的设计体验。 一般来说,栅格仅仅是...
本文作者妖哥有着多年的平台项目的设计经验,对于交互设计有着深入的理解。交互是如何驱动设计的?不妨看看妖哥的总结: 先扯句闲篇,离开QQ会员加入TGideas的大家庭也有一年的时间了。当初抱着对游戏的向往,对TG游戏设计大神们的敬仰,暂时放下从事2年多的平台项目经验,毅然投身于伟大的游戏视觉包装中来,从零学起。在这一年的工作过程中,...

经验教程

73

收藏

60
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部