资讯·论坛·笑话大全·QQ表情·设为首页
发新话题
打印

[Fireworks] Fireworks教程:网格化图像效果

Fireworks教程:网格化图像效果

 网格化图像效果在设计中也很常见,效果如图4-127所示。这种效果适合作为网页或者通栏的背景图像。具体的制作方法如下:
, b; y1 g' o) b' R3 A* g! {, I% E  x% nwww.520diannao.com
: A! ]; C" w0 f7 O我爱电脑技术社区--打造最好的电脑技术自学交流平台 www.520diannao.com1 K8 m& h/ L- s; Z* ?

" e/ N3 s, [7 }+ y4 [6 S我爱电脑技术论坛
+ m6 z( h/ P9 {  s, h  图4-127 网格化图像效果 我爱电脑技术社区--打造最好的电脑技术自学交流平台+ D' B- v4 d+ H" P# x" j

$ X$ w) R' q) I- U: ]我爱电脑技术论坛  1、在Fireworks中打开素材图像,如图4-128所示。 我爱电脑技术论坛, {! f' h! U8 z
www.520diannao.com2 C- M+ @$ `) x1 ?' D7 R
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站6 y, J0 F% r. Y3 Z! s9 \

3 z! O- m1 k5 L, I; N* C电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站我爱电脑技术社区--打造最好的电脑技术自学交流平台7 V3 ~5 d  ]" }* F# ?
  图4-128 打开素材图像 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站8 X, _0 ~& y: W

. g3 [% A& i+ v5 Y打造最好的电脑自学交流论坛  2、按快捷键【Ctrl+6】,把图像的显示比例放大到原来的1600%,如图4-129所示。
! I) `$ j3 B4 ^; ~我爱电脑技术论坛
  Z3 d8 H% l. h7 Q7 l7 S8 X7 `4 v电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站" C5 X( i7 |, T. d- P$ |: U
我爱电脑技术社区--打造最好的电脑技术自学交流平台( P' L9 d3 D4 E- M+ U! c5 H( j/ R
www.520diannao.com2 c  F% a' {/ ^  z) F- `) x
  图4-129 放大显示比例 打造最好的电脑自学交流论坛2 r6 O) C% G8 X! V2 A- d& A* n

" p, X% S9 m# V; O) H( ^www.520diannao.com  3、按键盘上的【Print Screen】键截屏,然后在Fireworks中创建一个新的画布,按快捷键【Ctrl+V】,把截取的屏幕图像粘贴到画布中,如图4-130所示。 / d  |. {' W8 }) c* Y

% y8 S7 i5 ~( d) fwww.520diannao.com
. W! R$ P0 {1 L+ n: _$ \4 O: v0 S7 j1 u6 J0 p
电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  D/ v2 d9 ~! O2 P8 @4 [4 N
  图4-130 复制截取的屏幕图像

TOP

4、使用【裁剪】工具裁剪需要的部分,然后在【属性】面板中添加2到3次【锐化】滤镜即可。
. [7 F$ C  u) v% o7 Y* L打造最好的电脑自学交流论坛
# P, P3 r  j& s, m) Y) l. u  可以基于这个图像效果为背景来设计网页通栏,效果如图4-131所示。
9 a1 P6 w+ k9 R  t1 j  t我爱电脑技术社区--打造最好的电脑技术自学交流平台我爱电脑技术论坛1 x' n9 d+ X7 k9 d, \+ y
# u+ K  A- s* d4 A
) Z7 f. v! M5 T; x$ C0 W1 |

3 m% x1 t3 X6 S& r我爱电脑技术社区--打造最好的电脑技术自学交流平台  图4-131 网页通栏效果
6 f  Y) T) B+ L' N电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  除了类似于像素风格的效果以外,还可以制作水平或垂直的颜色条效果,如图4-132所示。具体的制作方法如下:
- I/ Z; Q9 V! R  U电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站+ M/ f; `- m0 L  h  o

3 Q( i4 B) D& A/ dwww.520diannao.com
; r" X7 v% V* g/ c* {5 }( D& J我爱电脑技术论坛
% F. S% K6 q+ z+ L5 _- twww.520diannao.com  图4-131 制作好的颜色条效果
+ i0 O% \# n% L' S& c1 D  wwww.520diannao.com我爱电脑技术社区--打造最好的电脑技术自学交流平台( y% U" P) @3 d, a1 j* W9 w7 q
  1、启动Fireworks,新建一个画布,尺寸任意。 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站* @, K- L2 j. `4 w

/ q( C+ ~  H7 d3 m  u1 ^, x电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站  2、使用【矩形】工具,在画布中绘制一个和画布同意尺寸的矩形,并且填充线性渐变色,颜色为白色过度到任意色彩,效果如图4-132所示。 我爱电脑技术社区--打造最好的电脑技术自学交流平台+ r7 {( w/ W1 U( z  X
我爱电脑技术论坛1 |  t# q0 X5 c% {( P
我爱电脑技术社区--打造最好的电脑技术自学交流平台1 V3 C- G- i5 a& N. v* _

0 D5 Z; o: Y) ?我爱电脑技术论坛0 p6 N8 S+ g8 `9 `5 n
  图4-132 给矩形添加线性渐变色
$ c$ g: a% i& k. b, S- k- s
& j( |. C5 m8 a% Y) p/ twww.520diannao.com  3、切换到【两幅】的预览窗口,打开Fireworks的【优化】面板,在【优化】面板中选择格式为“Gif”,【索引色调色板】为“最合适”,【颜色】可以选择“16”或“8”,这里选择的是“8”,效果如图4-133所示。 我爱电脑技术社区--打造最好的电脑技术自学交流平台1 o- D+ T% T8 o) B% d8 j
www.520diannao.com0 ?$ f# h6 S# r+ L
我爱电脑技术社区--打造最好的电脑技术自学交流平台0 @6 s1 f% V$ p8 m& \
我爱电脑技术社区--打造最好的电脑技术自学交流平台$ W# N" f  p8 Z
我爱电脑技术论坛5 M: a( E! |+ I5 ^9 J  f5 ]
  图4-134 对图像进行优化 电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站; a! p1 t0 M6 {
www.520diannao.com. ^. o. L2 @* m; [2 r
  4、和上面的做法一样,按键盘上的【Print Screen】键截屏,然后在Fireworks中创建一个新的画布,按快捷键【Ctrl+V】,把截取的屏幕图像粘贴到画布中,如图4-135所示。
, B( b; g1 R3 B* L打造最好的电脑自学交流论坛电脑,技术,IT,学习,交流,网络安全,QQ,硬件,软件,编程,教程,建站- F" W8 S! j7 A& T% r0 c

2 t3 a9 i; |( F: n9 ^www.520diannao.com ( ~, {; L) ]# R. q5 B' G7 d6 A
www.520diannao.com, t" P. ]4 D+ @' l: j" }! p9 S
  图4-135 复制截取的屏幕图像
! z1 n2 m( I# t我爱电脑技术社区--打造最好的电脑技术自学交流平台我爱电脑技术社区--打造最好的电脑技术自学交流平台1 w, f$ H6 E* B5 ~
  5、使用【裁剪】工具裁剪需要的部分,然后在【属性】面板中添加2到3次【锐化】滤镜即可。 我爱电脑技术论坛9 g& b: c3 H9 v% s3 E

+ f* R$ a2 I( m$ b: r我爱电脑技术论坛  6、如果需要不同颜色的效果,可以直接使用【色相/饱和度】滤镜来进行调整,不需要重新制作。

TOP

这效果还是很不错的啊,支持一下也。

TOP

发新话题