经典论坛 » Fireworks 专栏 » 制作网格化图像效果

froglt 发表于 2008-6-14 00:47

制作网格化图像效果

欢迎转载，请注明出处，网页顽主论坛，[url]www.go2here.net[/url]，作者：froglt
这是即将出版的Fireworks CS3经典教程的部分章节，主要是介绍网格效果的制作，第一种制作方法是参考网友的帖子来制作的，第2种效果是原创，请多支持，谢谢！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝


网格化图像效果在设计中也很常见，效果如图4-127所示。这种效果适合作为网页或者通栏的背景图像。具体的制作方法如下：

[attach]91139[/attach]
图4-127 网格化图像效果

1、在Fireworks中打开素材图像，如图4-128所示。

[attach]91140[/attach]
图4-128 打开素材图像

2、按快捷键【Ctrl+6】，把图像的显示比例放大到原来的1600％，如图4-129所示。

[attach]91141[/attach]
图4-129 放大显示比例

3、按键盘上的【Print Screen】键截屏，然后在Fireworks中创建一个新的画布，按快捷键【Ctrl+V】，把截取的屏幕图像粘贴到画布中，如图4-130所示。

[attach]91142[/attach]
图4-130 复制截取的屏幕图像

4、使用【裁剪】工具裁剪需要的部分，然后在【属性】面板中添加2到3次【锐化】滤镜即可。

可以基于这个图像效果为背景来设计网页通栏，效果如图4-131所示。

[attach]91143[/attach]
图4-131 网页通栏效果

除了类似于像素风格的效果以外，还可以制作水平或垂直的颜色条效果，如图4-132所示。具体的制作方法如下：

[attach]91144[/attach]
图4-131 制作好的颜色条效果

1、启动Fireworks，新建一个画布，尺寸任意。

2、使用【矩形】工具，在画布中绘制一个和画布同意尺寸的矩形，并且填充线性渐变色，颜色为白色过度到任意色彩，效果如图4-132所示。

[attach]91145[/attach]
图4-132 给矩形添加线性渐变色

3、切换到【两幅】的预览窗口，打开Fireworks的【优化】面板，在【优化】面板中选择格式为“Gif”，【索引色调色板】为“最合适”，【颜色】可以选择“16”或“8”，这里选择的是“8”，效果如图4-133所示。

[attach]91146[/attach]
图4-134 对图像进行优化

4、和上面的做法一样，按键盘上的【Print Screen】键截屏，然后在Fireworks中创建一个新的画布，按快捷键【Ctrl+V】，把截取的屏幕图像粘贴到画布中，如图4-135所示。

[attach]91147[/attach]
图4-135 复制截取的屏幕图像

5、使用【裁剪】工具裁剪需要的部分，然后在【属性】面板中添加2到3次【锐化】滤镜即可。

6、如果需要不同颜色的效果，可以直接使用【色相/饱和度】滤镜来进行调整，不需要重新制作。

[[i] 本帖最后由 froglt 于 2008-6-14 01:13 编辑 [/i]]

szedw 发表于 2008-6-14 08:44

顶，简单实用！

412052210 发表于 2008-6-14 11:38

效果真好!!

makiyobaby 发表于 2008-6-14 12:03

很实用！:)

lm8520 发表于 2008-6-16 13:22

效果很好，想法很妙啊。学习了

tangulooma 发表于 2008-6-17 11:07

真的很有效果的
嘎嘎
学习了

zjhzcj 发表于 2008-6-25 17:17

呵,还不错了!简单

linghan1112 发表于 2008-6-27 08:01

:) 很好！很实用！谢谢

iamback 发表于 2008-6-27 11:26

敢情问一下书说什么时候出？:)

webH 发表于 2008-6-30 17:41

恩，这个或许可以叫做“所见即所得”吧。有时候不一定非要利用软件本身的什么什么功能，
放大+PrintScreen+粘贴，很快解决问题，呵呵

Fireworks8 发表于 2008-6-30 22:15

[quote]原帖由 [i]webH[/i] 于 2008-6-30 17:41 发表 [url=http://bbs.blueidea.com/redirect.php?goto=findpost&pid=4084297&ptid=2863823][img]http://bbs.blueidea.com/images/common/back.gif[/img][/url]
恩，这个或许可以叫做“所见即所得”吧。有时候不一定非要利用软件本身的什么什么功能，
放大+PrintScreen+粘贴，很快解决问题，呵呵 [/quote]

froglt说的这种网格化效果≠你说的马赛克效果

laobingbang 发表于 2008-7-19 16:09

还好吧;-)

longjianghu 发表于 2008-7-25 12:31

不错不错！值得学习。

kevinsolo 发表于 2008-7-27 19:00

我顶你，版主是有不少技巧的~~

Qamra 发表于 2008-8-16 09:45

方法真是妙级，谢谢了，先转了~
期待更多的作品

aluway 发表于 2008-8-16 16:06

高手！

maomaoriv 发表于 2008-9-17 11:01

好啊，学习了啊

maguadoublue 发表于 2008-9-19 14:00

[attach]100444[/attach]交个作业哈哈

yangsen18 发表于 2008-9-23 13:21

高手啊,学习了,书什么时候出版啊!:rolleyes:

5uer 发表于 2008-9-30 18:11

:rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes:

查看完整版本: 制作网格化图像效果