网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

Fireworks设计教程:学习制作属于自己的UI套件。(4)

时间:2020-01-08 11:06 来源:优设 作者:情非得已 阅读:

打算设计一个开关的打开状态。

画一个72x23px的矩形,圆度100%。选择纯色填充#FFFFFF 边框颜色#C8C8C8 (以便和标签一致)

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

12.打开开关细节1

Fireworks设计教程:学习制作属于自己的UI套件。

我们需要添加一点细节,这样开关看起来就不会太平。

选择滤镜>PS动态效果>内侧阴影:不透明度 31, 距离 3, 角度 90°, 大小5

13.打开开关细节2

Fireworks设计教程:学习制作属于自己的UI套件。

画一个23×23的圆形,放在开关的右部,添加1px 颜色#B6B6B6 的边框

渐变>圆锥形,渐变从#FFFFFF到#DDDDDD,设置总共六个间隔点,自行调整,最后要有金属质感。

14.打开开关细节3

Fireworks设计教程:学习制作属于自己的UI套件。

复制圆形,粘贴置底部。改变填充颜色为#000000 去除所有样式。

滤镜>模糊>高斯模糊,数值2.1

下移2px,左移2px,不透明度50%

15.关闭开关

Fireworks设计教程:学习制作属于自己的UI套件。

编组打开开关,放在按钮的右边。

复制打开开关,将On改成Off,文本移动到右端。将两个圆移动到左端,调整阴影向右移动4px。

16.个人资料

Fireworks设计教程:学习制作属于自己的UI套件。

画一个200x170px的矩形,一定要确保个人资料框个文档中其他组件对齐,最好之前先整理一下按钮、标签、开关。然后填充颜色#FFFFFF 边框 1px 颜色#999999.

现在,在个人资料框上方画一个200x82px的矩形,边框1px border颜色 #0F3756.

17.个人资料细节

Fireworks设计教程:学习制作属于自己的UI套件。

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程