+ -
当前位置:首页 → 问答吧 → 这个网站上那很强悍点白色有一点透明的效果是怎么做的?

这个网站上那很强悍点白色有一点透明的效果是怎么做的?

时间:2009-12-24

来源:互联网

http://www.robinzhu.com/work/work.php
望高手出个教程,给点思路也好哇...

作者: happymm   发布时间: 2009-12-24

指的是那个microsoft那页的图吗?应该是图案设定一下,然后平铺的吧,就和网格差不多,细一点,分一层铺,底图做好,铺到上面就好了,那个是白色网格不是点.,不知道说的是不是这个,总体上网页上细节处理得很好,很细腻,不愧是设计公司的作品.

作者: iky916   发布时间: 2009-12-24

嗯嗯。我是问这个,看起来很难做的样子,那个圆的效果做得实在是好哦...

作者: happymm   发布时间: 2009-12-25

当中的图片切换效果不错,跪求。。。。

作者: ywq13795473727   发布时间: 2009-12-25

切换效果网上倒是有很多相关的资料,可是图的设计就是独一无二了...不会做,总之好喜欢这种风格的

作者: happymm   发布时间: 2009-12-25

这个图没什么太难的吧,填充,叠加就是了。
那个玻璃片的效果倒是不大会做,呵呵。上个效果图。
t.png (87.53 KB)
2009-12-25 12:22


简单的说一下制作步骤吧
1.首先是选颜色,这种质感的表现需要通过暗色调来体现。我提供三组,红色:#330000-#b60000蓝色:#150539-#0784bd绿色:#133300-#61aa03。
2.新建一个背景图层,填充,然后加上径向渐变。
1.png (26.62 KB)
2010-1-4 11:26

3.新建一个2×2像素的文档,在最左上角用铅笔画一个一个像素的白点,并定义图案。
4.回到我们刚才的第一个文档,新建一个图层,全选,填充选择我们刚才做好的图案。
2.png (42.14 KB)
2010-1-4 11:26

5.画一个圆型,填充透明度为0,添加渐变叠加和内发光。
3.png (40.21 KB)
2010-1-4 11:26
4.png (36.35 KB)
2010-1-4 11:26

5.png (64.97 KB)
2010-1-4 11:26

6.用画笔和形状工具给做好的圆添加一些高光和折射光以及阴影等。
6.png (86.51 KB)
2010-1-4 11:26

7.好了,简单的效果实现了。

[ 本帖最后由 xiaobaov2 于 2010-1-4 11:26 编辑 ]

作者: xiaobaov2   发布时间: 2009-12-25

破璃片好像是画个圆,然后复制拖动一下,用白色渐变填充白色弧线,去掉多余部分,对原来的圆进行自定义,内发光发外光,阴影调一下,那个小窗户用钢笔画一下,然后填白色渐变,透明度调小,然后和底图背景叠加.局部的光线好像再要渲染一下,画笔喷点白色,蒙板搞一下,图层混合,可以做出个大概吧.
作者应该是对玻璃质感的图标很有研究的人,感觉整个网页充满了玻璃的元素.

作者: iky916   发布时间: 2009-12-25

很漂亮,学习了

作者: waiting7086   发布时间: 2009-12-26

晕,发现自己很菜

作者: toplan2003   发布时间: 2009-12-29

留个记号,等待高人出现。

作者: eastmonkey   发布时间: 2009-12-30

等待中

作者: fei1015   发布时间: 2009-12-30

这个页面的设计风格非常值得学习。

作者: gp02agundam   发布时间: 2009-12-30

真要花一点功夫来研究这个光影,

附件

未标题-1.jpg (29.63 KB)

2009-12-31 12:48

作者: c2j3y4   发布时间: 2009-12-31

那么强悍、、、学习先~

作者: ajialaila   发布时间: 2009-12-31

高手出个教程呀,我也不要做到与原站一模一样的效果,我只要有那么点味道就行了,可是完全不明白思路,楼上几位出图的MS都是高人类哦..加油,加油,出个教程哇...

作者: happymm   发布时间: 2010-01-02

拥抱6楼的...up~

作者: happymm   发布时间: 2010-01-05

画一个圆型,填充透明度为0,添加渐变叠加和内发光?这一步为什么做不了?


画一个圆型,当填充透明度为0,做任何东西都是看不见的。

作者: zuowj528   发布时间: 2010-03-07

自己做个渐变颜色的背景图,在新建一个3*3px的文件 新建一层 画一个1*1px的选框填充白色 隐蔽背景层,然后定义图案,再在你刚刚画好渐变背景的文件上用刚才定义的图案填充就好  再按照你的需要调整"白点"层的透明度  OK了

[ 本帖最后由 sunny1987 于 2010-3-7 13:19 编辑 ]

附件

未标题-1.jpg (84.77 KB)

2010-3-7 13:19

作者: sunny1987   发布时间: 2010-03-07

:p 模仿了一个,发出来大家提意见哈
玻璃 练手.jpg (94.44 KB)
2010-3-8 11:02

作者: guang1g1   发布时间: 2010-03-08

6L已经有教程了,说实话,这个圆我也做不好,不过这个网站最突出的亮点不是这些,而是颜色和比例光(高光/阴影)的配置。话说回来,想看效果的话,用一个笨方法,画个圆,然后用“加深/减淡”工具慢慢擦

作者: ozoz56241   发布时间: 2010-03-08

谁能重新讲一下这个圆是如何画的。
我用6楼的方法,画出来的画都不是透明的,内发光不起作用啊。

作者: zuowj528   发布时间: 2010-03-09

交作业了

附件

未标题-2.jpg (71.91 KB)

2010-3-9 13:40

作者: luoxihua   发布时间: 2010-03-09

我就不模仿了,貌似看会了

作者: lqshmily   发布时间: 2010-03-09

下半部分反射那部分高光不会弄

附件

22.jpg (39.62 KB)

2010-3-9 15:57

作者: djp7213   发布时间: 2010-03-09

引用:
原帖由 ywq13795473727 于 2009-12-25 10:17 发表
当中的图片切换效果不错,跪求。。。。
用jQuery就可以做出来.我正在学

作者: samzero   发布时间: 2010-03-09

很好的效果~~我也模仿一个~

附件

玻璃片效果副本.jpg (73.14 KB)

2010-3-9 17:44

作者: nanaspark   发布时间: 2010-03-09

以前做的 穿个

附件

xiaoguo.jpg (68.51 KB)

2010-3-10 09:07

作者: cainiao9527   发布时间: 2010-03-10

附件

2010-3-13.jpg (19.8 KB)

2010-3-13 02:00

作者: dmlf   发布时间: 2010-03-13

好强大 留个记号

作者: xiaolin0625   发布时间: 2010-04-07

什么啊,     玻璃圆圈不会画诶...效果 出不来....是先用椭圆工具 还是椭圆选框工具画圆啊?....

作者: shiney1988   发布时间: 2010-04-07

3.新建一个2×2像素的文档,在最左上角用铅笔画一个一个像素的白点,并定义图案。
4.回到我们刚才的第一个文档,新建一个图层,全选,填充选择我们刚才做好的图案。
这两个步骤做错了哦。出来的填充非常显眼。怎么回事。

作者: zhaibobo   发布时间: 2010-04-08

你们都是人才啊,祖国的花朵

作者: hou8656   发布时间: 2010-04-08

圆的特殊效果做不出来

作者: zhaibobo   发布时间: 2010-04-08

这个确实有点累。

附件

未标题-1.jpg (67.64 KB)

2010-4-8 17:40

作者: gadeco   发布时间: 2010-04-08

这个圆的效果能说具体点吗,偶很菜做不出来

作者: tgmygmy   发布时间: 2010-04-09

顶楼主,学习了。

作者: xiannannan   发布时间: 2010-04-09

收藏学习了~~

作者: ningge84   发布时间: 2010-04-12

见到高手了。。。还得努力学习呀

作者: joliy3   发布时间: 2010-04-12

好像还行

附件

玻璃片效果.jpg (164.21 KB)

2010-4-12 16:57

作者: juice9958   发布时间: 2010-04-12

顶。。6楼。。已经学会了

作者: soul714   发布时间: 2010-04-12

同问

作者: xinggechen   发布时间: 2010-04-23

偶也做不来,那个圆显不了555555

作者: huazhi51023   发布时间: 2010-04-23

26# 做的好通透

作者: 124492237   发布时间: 2010-04-23

4方框你们是自己画的吗?

作者: sevenu   发布时间: 2010-04-28

学习

作者: jenniferxiu   发布时间: 2010-04-29

那个圆是怎么画出来的呀,期待高手出个小教程哦。

作者: xiannannan   发布时间: 2010-04-29

(⊙o⊙)… 弄的不好看

作者: beizizizi   发布时间: 2010-04-29

同问,那个圆本菜鸟也弄不出来
请高手出个具体步骤。谢谢~!

作者: maomidog   发布时间: 2010-04-30

我做的好烂

附件

未命名.jpg (35.05 KB)

2010-5-16 18:28

作者: ajialaila   发布时间: 2010-05-16

看来打击都是高手 我这个出手就不送出手了。

作者: yiciyan   发布时间: 2010-05-17

出来个高手,说说那个圆怎么弄出来滴

作者: maomidog   发布时间: 2010-05-26

哎呀,我做不出,那个光圈的效果

作者: lzhh   发布时间: 2010-05-27

有点意思,模仿做一下
sy.jpg (71.12 KB)
2010-7-22 16:39

作者: miqio   发布时间: 2010-07-22

为什么做的没有发光的效果,怪了

作者: zuoxinwu   发布时间: 2010-07-23

我也发个我做的,方法很多,主要看哪个最简单、、、、、、、

附件

玻璃效果.jpg (37.15 KB)

2010-7-30 16:46

作者: rubyz   发布时间: 2010-07-30

网站做得太漂亮了,都不知道怎么下手了~!
求高手出个教程~~

作者: ilzljpap   发布时间: 2010-07-31

http://www.robinzhu.com/work/design.php?id=31
就这里面是效果,求高手出招~~~!!

作者: ilzljpap   发布时间: 2010-07-31

搞不出那种感觉

附件

无标题-1111.jpg (89.87 KB)

2010-7-31 15:43

作者: ayazero1100   发布时间: 2010-07-31

1.jpg (79.5 KB)
2010-7-31 17:50

试着做一个

作者: praiseto   发布时间: 2010-07-31

那网站好大气啊!挺欧美风格的

作者: 12danae   发布时间: 2010-09-01