Fireworks设计教程:学习制作属于自己的UI套件。(4)
打算设计一个开关的打开状态。
画一个72x23px的矩形,圆度100%。选择纯色填充#FFFFFF 边框颜色#C8C8C8 (以便和标签一致)
文本16px,位于开关左部,颜色 #666666.
12.打开开关细节1
我们需要添加一点细节,这样开关看起来就不会太平。
选择滤镜>PS动态效果>内侧阴影:不透明度 31, 距离 3, 角度 90°, 大小5
13.打开开关细节2
画一个23×23的圆形,放在开关的右部,添加1px 颜色#B6B6B6 的边框
渐变>圆锥形,渐变从#FFFFFF到#DDDDDD,设置总共六个间隔点,自行调整,最后要有金属质感。
14.打开开关细节3
复制圆形,粘贴置底部。改变填充颜色为#000000 去除所有样式。
滤镜>模糊>高斯模糊,数值2.1
下移2px,左移2px,不透明度50%
15.关闭开关
编组打开开关,放在按钮的右边。
复制打开开关,将On改成Off,文本移动到右端。将两个圆移动到左端,调整阴影向右移动4px。
16.个人资料
画一个200x170px的矩形,一定要确保个人资料框个文档中其他组件对齐,最好之前先整理一下按钮、标签、开关。然后填充颜色#FFFFFF 边框 1px 颜色#999999.
现在,在个人资料框上方画一个200x82px的矩形,边框1px border颜色 #0F3756.
17.个人资料细节