用Fireworks计划打造专属的UI套件实例教程

操作简朴有用的步伐，用Fireworks打造属于本身的UI套件，同时还可以或许很利便的应用到其他计划中。

无论网站照旧应用，都必要优越的界面计划。倘若界面计划不足优越，那么用户会毫无愉悦感，会影响到用户与产物、网站、应用的交互，许多商机也因此损失。

若想保持整体计划的同等性，可以计一律套气魄威风凛凛指南可能UI套件作为参考，这种要领很是的有用。同时计划师也能为开拓者提供参考，进步协同事变服从。并且在最后举办案例展示时也可以或许用获得。

本教程通过步调解析，向各人先容怎样行使Fireworks打造专属UI套件——同时也能相识一些Fireworks行使技法，一些根基成果和面板。

倘若界面纷歧致、不清新，很有也许导致用户流失——本教程将教你用Fireworks打造UI套件，以便日后行使。并教会你怎样将计划元素整合，以便举办案例展示。

用Fw打造的UI套件可以输出为矢量名目，外形巨细任调——还支持Retina，这就是Fw牛逼的处所！

请下载本教程所需文件： support files

01.新建文档

打开Fw,文件>新建，高度280px，宽度600px，判别率72dpi。

按住U以选择外形器材：花一个600px的正方形，预设面板中颜色#EDEDED

02.默认按钮

按钮是要害，我们来开始界说样式。

按U画一个150x45px的矩形。

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

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

03.添加细节

点击下面板的加号

滤镜>杂点>新增杂点>数目：2（可自行调理）

滤镜>PS动态结果，勾选内侧阴影：不透明度43,间隔3，角度-90度 巨细5，其他均为0

04.再来点细节

复制画完的矩形并粘贴，让新矩形位于最上方，巨细改为148x43px，向左移动1px，向下移动1px。去除全部添补颜色和结果，边框1px，颜色#2B93E3.

05. 添加文本

此刻必要添加一些文本，行使支持文件中提供的Arvo字体。

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

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

06.组织图层

选择按钮全部的图层，按 Ctrl+G:会将图层编组，定名为默认按钮。

07.悬停按钮

我们必要打造按钮的悬停状态。

复制并粘贴前一编组，定名为悬停按钮，放在原按钮的下方。

按A以选择部门选定器材；选择矩形，举办渐变配置，最右面的颜色改为#1A6196.

08.激活按钮

此刻我们必要按钮的激活状态。

复制并粘贴前一编组（悬停按钮），定名为激活按钮，放在原按钮的下方。

按A以选择部门选定器材；选择矩形，举办渐变配置，选择翻转渐变。

09.标签

此刻我们完成按钮部门，此刻开始建造标签。

画一个55x28px的矩形。按P行使钢笔器材，在矩形左边画一个三角形。

然后按Shift选择两个外形，在预设面板点击 添加/连系 按钮来完成外形团结

10.标签细节

选择外形，颜色配置为#FFFFFF 边框1px #BFBFBF.

按U两次，选择椭圆器材，按Shift在标签左部画一个8x8px的圆。

选择两个外形，点击去除/打孔按钮。

文本颜色#666666 巨细16 字体Arvo

11.打开开关

规划计一律个开关的打开状态。

画一个72x23px的矩形，圆度100%。选择纯色添补#FFFFFF 边框颜色#C8C8C8 （以便和标签同等）

文本16px，位于开关左部，颜色 #666666.

12.打开开关细节1

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!