Fireworks打造专属的UI套件教程

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:情非得已

关键词

利用简单有效的办法,用Fireworks打造属于自己的UI套件,同时还能够很方便的应用到其他设计中。无论网站还是应用,都需要优秀的界面设计。倘若界面设计不够优秀,那么用户会毫无愉悦感,会影响到用户与产品、网站、应用的交互,很多商机也因此丧失。

教程素材MissYuan_教程素材.rar

若想保持整体设计的一致性,可以设计一套风格指南或者UI套件作为参考,这种方法非常的有效。同时设计师也能为开发者提供参考,提高协同工作效率。而且在最后进行案例展示时也能够用得到。

本教程通过步骤分解,向大家介绍如何使用Fireworks打造专属UI套件——同时也能了解一些Fireworks使用技法,一些基本功能和面板。

Fireworks打造专属的UI套件教程

倘若界面不一致、不清爽,很有可能导致用户流失——本教程将教你用Fireworks打造UI套件,以便日后使用。并教会你如何将设计元素整合,以便进行案例展示。

用Fw打造的UI套件可以输出为矢量格式,形状大小任调——还支持Retina,这就是Fw牛逼的地方!

01.新建文档

Fireworks打造专属的UI套件教程

打开Fw,文件>新建,高度280px,宽度600px,分辨率72dpi。

按住U以选择形状工具:花一个600px的正方形,预设面板中颜色#EDEDED

02.默认按钮

Fireworks打造专属的UI套件教程

按钮是关键,我们来开始定义样式。

按U画一个150x45px的矩形。

在预设面板中,渐变>线性,三个颜色点:#2685C9, #268EDE F6EA7 (从左到右)

圆度35% 边框1px #14466B.

03.添加细节

Fireworks打造专属的UI套件教程

点击下面板的加号

滤镜>杂点>新增杂点>数量:2(可自行调节)

滤镜>PS动态效果,勾选内侧阴影:不透明度43,距离3,角度-90度 大小5,其他均为0

04.再来点细节

Fireworks打造专属的UI套件教程

复制画完的矩形并粘贴,让新矩形位于最上方,大小改为148x43px,向左移动1px,向下移动1px。去除所有填充颜色和效果,边框1px,颜色#2B93E3.

05. 添加文本

Fireworks打造专属的UI套件教程

现在需要添加一些文本,使用支持文件中提供的Arvo字体。

输入文本对齐到按钮中央。字体颜色#FFFFFF大小20px.

然后复制并粘贴文本,选择底部的文本,下移1px,颜色设置为#0D2C42.

06.组织图层

Fireworks打造专属的UI套件教程

选择按钮所有的图层,按 Ctrl+G:会将图层编组,命名为默认按钮。

 收藏