打印

[效果制作] Fireworks制作Vista毛玻璃效果

dowhatyouwant [楼主]

高级会员

帖子: 277
体力: 741
威望: 28
当前: 浙江杭州
离线: 4 天

1^# 大中小发表于 2007-4-9 11:22

在完成Chinay-MSN校园大赛页面的时候，朋友问我如何制作这种类似vista毛玻璃的效果。于是乎，就有了这个教程！
看整体效果来这里：http://www.5key.net/demo/msn/

局部效果图：

1、建立画布，导入背景素材

2、绘制圆角矩形，垂直线性渐变填充

3、绘制矩形高光部分，复制矩形，原位粘贴，并删除下半部分，进行垂直线性渐变，调整透明度

4、开始制作毛玻璃效果，线性渐变绘制一个圆形，羽化10px

5、添加杂点8px

6、选择先前绘制矩形，在刚才画的圆形上点击反键-编辑-粘贴为蒙版

7、得到如下效果

8、同上步骤再绘制一个矩形、放射性填充、羽化及添加杂点步骤

9、在msn小人这块区域绘制一个椭圆行，使用绸缎填充，按如上步骤得到下图效果。

10、得到效果。

11、最后在标题栏上面加一条白色直线，透明度30%。

[ 本帖最后由 feng4ever 于 2007-4-12 20:33 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

本帖最近评分记录

feng4ever 威望 +1 原创内容 2007-4-12 20:49

5key.net

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

froglt

网页顽主

版主

帖子: 1940
体力: 3608
威望: 154
当前: 北京海淀区

专长 网页设计,平面,主编

2^# 大中小发表于 2007-4-9 12:43

不错的效果,支持一下

(\/)︵ 
(·_ _ )~GO2HERE.NET/GO2HERE.NET.CN MORE THAN MEETS THE EYE ⺌囨囚囨図〆

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

clf1985

新手上路

帖子: 5
体力: 15
威望: 0
离线: 364 天

3^# 大中小发表于 2007-4-9 13:07

太好了一直想学这招的~~很喜欢那种玻璃的感觉

TOP

请大家尊重和保护奥运知识产权。

niufengyong

新手上路

帖子: 91
体力: 38
威望: 0
离线: 24 天

4^# 大中小发表于 2007-4-9 13:19

不是很明白！

QQ:441223191

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

sunj

初级会员

帖子: 151
体力: 179
威望: 0
离线: 29 天

5^# 大中小发表于 2007-4-9 13:35

学习，谢谢分享。。

www.tuanlilife.com

TOP

feng4ever

小可爱

版主

帖子: 3572
体力: 5880
威望: 173
当前: 上海闵行

专长媒介

6^# 大中小发表于 2007-4-12 20:44

楼主做的确实非常不错..不过我还是得补充一句.
模仿一个效果或者实现一个效果得从它的原理入手.

vista是不能像设计师一样做艺术创作的, 所以计算titlebar的背景是取该窗口背后的图像进行高斯模糊处理而得到的,而且也显得更简单..

附上源文件.

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

新学照相,我照的相片 by Lumix LX2 上海提供UI设计实习机会

TOP

colinivy

柯零艾薇

管理员

帖子: 1357
体力: 3685
威望: 6
当前: 亚洲日本

专长 前端制作,JS,网站运营

7^# 大中小发表于 2007-4-12 20:59

呵呵
feng4ever 分析得非常透彻啊

宽己之心宽人，责人之心责己-----天地宽矣！

TOP

dowhatyouwant [楼主]

高级会员

帖子: 277
体力: 741
威望: 28
当前: 浙江杭州
离线: 4 天

8^# 大中小发表于 2007-4-12 21:57

feng4ever 有道理！

5key.net

TOP

linxiya1

林夕雅

中级会员

帖子: 434
体力: 364
威望: 0
离线: 3 天

9^# 大中小发表于 2007-4-13 01:10

有新帖了，庆祝一下

TOP

leifeng1

银牌会员

帖子: 561
体力: 1250
威望: 0
离线: 3 天

10^# 大中小发表于 2007-4-13 08:42

刚看楼主的贴子，还真是有点不明白，看了小可爱的回复才确定了自己的看法，嗯，结合小版主的方法效果会更好。

TOP

jasu

雪兔

中级会员

帖子: 383
体力: 478
威望: 0
当前: 浙江杭州
离线: 24 天

专长 网页设计,UI,前端制作

11^# 大中小发表于 2007-4-13 14:38

两个教程都非常不错

TOP

mouse8

新手上路

帖子: 12
体力: 21
威望: 0
离线: 115 天

12^# 大中小发表于 2007-6-28 14:30

学习了一下,很受教.. 谢谢

偶叫倚云..

TOP

liuxinghonglei

蛋蛋

超级版主

帖子: 2742
体力: 2728
威望: 10
当前: 北京海淀区

13^# 大中小发表于 2007-6-28 14:35

mouse8
有灌水嫌疑

能动手的 ,就别吵吵

TOP

kkk9999kkk

银牌会员

帖子: 581
体力: 1219
威望: 1
当前: 浙江金华
离线: 5 天

专长 前端制作

14^# 大中小发表于 2007-6-28 20:05

找出经典教程。

I like Eminem
he say:
So you can suck my dick.

TOP

strand

新手上路

帖子: 11
体力: 32
威望: 0
离线: 435 天

15^# 大中小发表于 2007-6-28 23:30

我还没用过Fireworks

http://www.17gb.com

TOP

joymv

貌似没几年青春

中级会员

帖子: 270
体力: 427
威望: 0
当前: 江西南昌
离线: 3 天

专长 网页设计,PHP

16^# 大中小发表于 2007-6-29 16:14

就这样啊..

iT堂

TOP

kinbox

金博客

中级会员

帖子: 146
体力: 335
威望: 0
当前: 湖北武汉
离线: 22 天

17^# 大中小发表于 2007-7-1 18:29

F4E说的很对！
量化考核的时候小可爱的办法的准确度更高。。。。

TOP

ocean57

新手上路

帖子: 14
体力: 30
威望: 0
离线: 41 天

18^# 大中小发表于 2007-7-2 05:19

谢谢，学习下～

TOP

bbsonline

初级会员

帖子: 67
体力: 124
威望: 0
离线: 9 天

19^# 大中小发表于 2007-7-3 16:17

厉害啊支持下啊

TOP

xtra2000

初级会员

帖子: 28
体力: 62
威望: 0
离线: 184 天

20^# 大中小发表于 2007-7-3 22:38

这个效果好。准备学习一下用在自己的模板上。

TOP

tvtv

出炉小鸟

中级会员

帖子: 150
体力: 294
威望: 2
当前: 河北唐山
离线: 3 天

21^# 大中小发表于 2007-7-6 11:01

6、选择先前绘制矩形，在刚才画的圆形上点击反键-编辑-粘贴为蒙版
我这里怎么出不来第7步的效果啊，晕死了，拜托各位大大们帮帮忙啊，我用的是Fw8

[ 本帖最后由 tvtv 于 2007-7-6 11:02 编辑 ]

TOP

tvtv

出炉小鸟

中级会员

帖子: 150
体力: 294
威望: 2
当前: 河北唐山
离线: 3 天

22^# 大中小发表于 2007-7-6 11:17

呵呵，解决了，得反过来弄才行，晕...

TOP

Jerryrss

初级会员

帖子: 89
体力: 187
威望: 0
当前: 北京东城区
离线: 7 天

23^# 大中小发表于 2007-7-6 14:21

楼上的怎么解决的？

TOP

tvtv

出炉小鸟

中级会员

帖子: 150
体力: 294
威望: 2
当前: 河北唐山
离线: 3 天

24^# 大中小发表于 2007-7-7 08:52

先复制一个以前的矩形，然后选中圆形，在刚才复制的矩形上点击反键-编辑-粘贴为蒙版就OK了，我不知道这样做对不对，反正我这里是可以的

TOP

tvtv

出炉小鸟

中级会员

帖子: 150
体力: 294
威望: 2
当前: 河北唐山
离线: 3 天

25^# 大中小发表于 2007-7-7 15:00

昨天做好忘交作业了~~

今天补上...
我还不能上传附件，只能传到sohu里了

TOP

Jerryrss

初级会员

帖子: 89
体力: 187
威望: 0
当前: 北京东城区
离线: 7 天

26^# 大中小发表于 2007-7-8 15:28

非常感谢，问题已经解决了。。

TOP

zhangxi4188

新手上路

帖子: 10
体力: 20
威望: 0
离线: 171 天

27^# 大中小发表于 2007-7-23 13:47

很好。。不错

TOP

xiatao405315216

初级会员

帖子: 31
体力: 67
威望: 0
当前: 湖北武汉
离线: 97 天

28^# 大中小发表于 2008-4-20 17:59

学习下～

TOP

yeziying

圣诞节

中级会员

帖子: 97
体力: 201
威望: 0
当前: 湖北武汉
离线: 1 天

29^# 大中小发表于 2008-4-26 15:39

不错的帖子，顶一下

TOP

yeziying

圣诞节

中级会员

帖子: 97
体力: 201
威望: 0
当前: 湖北武汉
离线: 1 天

30^# 大中小发表于 2008-4-26 16:19

按你的方法做的蒙版粘贴不能显示出来，这是怎么回事啊？？？

TOP