像素风格纹理背景图案制作技巧
* r8 C, U2 c1 S |* Z1 w/ w8 f' E& X1 s% ~
% v7 | J) j- z7 ]& W
/ q' y1 R% o7 p
有些网页背景是用像素风格纹理图案填充成的，其实使用Photoshop可以很快地制作出这样的图案，然后只需在网页编辑软件中将背景定义为该图案即可。本文用实例向大家介绍如何制作这样的纹理图案，让你的网页背景更加赏心悦目。
. W( ^! ]1 P4 ~4 R+ ~" `" m
本文以Photoshop CS2中文版为例，其它版本的Photoshop在操作步骤上可能会略有差异。具体操作步骤如下。
( Y! s2 d# @+ \8 u
% w2 G$ ~" L4 Z6 w) s; p 1.在Photoshop中按Ctrl N打开“新建文档”对话框，输入“名称”为“图案”，设置“宽度”和“高度”均为18像素，其它选项采用默认设置，如图1所示。设置完毕单击“确定”按钮。
* B) T& X6 B* E2 ~/ ]/ }
5 a, z' K8 K* _ w2 j( \
' H8 q' I; ~' d. V6 m( V2 R& C7 r
% r) X' [+ v4 U. C: \2 R5 g7 U! T
7 A2 x7 J0 u' h, _3 n/ V7 p% T
: n: k' D3 J, W8 Y+ R# U' \& c# Y w2 t0 ~0 F
2.使用工具箱中的“缩放工具”在文档窗口中拖动出一个矩形框，放大视图，可以重复操作直到放大到1600%的比例，如图2所示。
' Z+ g' R0 ~" f' b! Z" p! p) ]1 D1 ~
+ P2 @0 u: V( T) d
* p8 ?; |) {, m3 e
. I& Y8 _. X+ s' L4 ?2 c8 x
B5 \4 ] ~$ i+ d/ C7 v1 g9 {4 m* d3 l+ ]
3.单击工具箱中的“设置前景色”图标，打开“拾色器”对话框，输入十六进制的颜色值“d0d0d0”，如图3所示，然后单击“确定”按钮完成前景色的设置。
- v3 g4 G) ^0 h2 W" v& M6 J7 y" K: J( o; e, ~3 U) N" }. y7 h6 F
2 U: q+ N* e: R; }( Q( f$ l0 E* c ^7 H* J0 f
8 [5 |* g$ g+ y6 v) H# n) M , ^# g( W# t! v* T! d
/ ]; C4 P2 X& p2 o; A' N* Z/ r- ^3 |4.按快捷键Alt Del将背景填充为刚才所选的浅灰色。
8 p2 K o$ P: d4 s; N
: t+ u+ k4 G5 T3 s5 R- j0 R) H 5.选择工具箱中的“铅笔工具”，在选项栏中将画笔直径大小设置1px，用第3步的方法将前景色设置为“4a4a4a”，在图层面板中单击“创建新图层”按钮新建一个图层，然后在上面绘制出如图4所示的图案。
9 K' p h! L5 I& S) _, [: h/ S& C7 N2 ~9 T
; c; |; M$ Z5 Z+ \/ s8 Y! t/ v' {
% Z1 P; k1 l! O* x; s# z5 `
1 G% ~4 J6 a0 u- _8 T
; ?; [% f1 ^* r2 U7 M& `4 ~" q, l3 R: `
6.然后再将前景色设置为“7b7b7b”，用铅笔工具在中间位置绘制如图5所示的图案
% f0 j4 e7 `% p1 k: x* H# R" I' J% [3 D e) f; n+ q( ]1 l7 d, a
( e: {% X. ]* {! J
/ u' o+ M8 f( J3 J2 q$ T6 Z, D
6 s% R. X# S* n1 b4 ?: [- {% m' E
: b/ t) j; n9 Y; H" a3 B( V; b d. s! ?+ K C; D- f
还可以在图案的中间加一个字母，例如加上一个D，如图6所示。完成后按Ctrl E合并图层。
& ~# a, ~" `. d7 c/ ^" B
2 V1 c2 j; G0 B0 q
/ {3 m+ l( N, j3 s
# r/ D q& {3 K# w( m/ g2 ?& S. V& o$ `! _( e! P/ g2 k
7 W) u- j% z* C2 H B
7 X7 y. O' C1 q& }, E
* E5 ]% a& Q# |! b' c4 \9 c 7.选择菜单命令“编辑|定义图案”，在“图案名称”对话框中输入一个名称，然后单击“确定”按钮。至此，可以直接将该图案输出为Web页所用格式图像，然后在网页编辑器中定义背景图像为该图像即可。如果是在Photoshop中使用该图案填充背景，则使用下面的方法。
! i! m; A7 O, I# I; X* S0 c4 _. ~
$ U* o8 J/ O3 m1 u, |6 R6 R- a 8.按Ctrl N新建一个较大的文档，如大小设置为600*600像素。选择菜单命令“编辑|填充”，然后在“填充”对话框中选择使用图案进行填充，并从“自定图案”中找到刚才自定义的图案，如图7所示。设置完毕单击“确定”完成填充即可。
. P" x6 O% N& V2 M) X
2 {5 O; ]2 B* N A' \! A& D; J
5 Z8 J7 s- ?1 p6 a, }; [9 L: C, Q q' v; y1 }
8 r. e( _8 f; J z
4 B$ ~: v- W1 L& g7 f) y
: e$ n+ X H- E- Z- I
填充图案的示例。
9 I! b5 S$ `5 p6 o/ ^3 G3 V6 D! A+ F5 X9 D
- ~( n# i9 d! ~/ Z
w" G( W2 C1 m, l" J! J2 ]
- I9 ~- {" K; P. ~
: {: s6 A ~+ M+ k! F! F- j4 D- S- ~0 Q+ @8 M5 k0 ^
; T! F# G& q+ X0 K# o1 w" S
0 l4 b' N" z$ ^8 l4 g/ K
4 Y+ @8 t; a8 T9 j1 ?8 @7 G! c) D
% L# v0 l( B9 V; } e, W2 [( z1 F K/ G4 e* [, U0 e& ^
使用上面介绍的方法可以制作出无穷多种风格不同的图案，我们所要做的是充分发挥自己的想像力，不断地进行尝试。下面图所示就是在网页设计中用得非常广泛的线性图案，要仔细看哦。
; a6 U' \% c2 }7 |- Z# R* I
7 x7 o' }4 A( {0 n1 l6 F6 b" m3 F. ~2 ]& X6 n; `
& M! d' \" m$ w4 H
, Z t& V7 g/ v$ H1 x# c1 o + ~8 v6 ]% g3 b5 j" P
3 X+ Y, }/ x# s还可以有更多的例子，
/ B9 G7 O* ~$ y6 z
! ?% z: K0 b$ u. l: G2 W g' A( `% Q* `4 I5 r$ E* a; B
1 I+ T( r5 y4 [0 C6 O8 ~3 Q2 ^
4 h3 W3 A% Y" X" Q2 W
/ t6 _3 v2 A. r* t& B, `
) H( g: @2 O( ]2 S) r+ O! C1 d$ j# U! @ X- L" p
: V8 Z' G, n% t! I8 L* E
, c; T9 @5 P2 q: [; N6 T
* l! f" E8 {/ ?$ i( m& x
/ S) x+ R- Z% ]6 Z/ Z6 Z) W8 ?, P3 P4 i* I* K
: n; Q! z, ^. y, v9 `2 o$ t7 z
6 Q- K- h0 K- z3 [; ?( I$ k* i+ A & C+ L: u: L2 g8 U( d
2 A4 ? H: x2 C
; Z$ R, Z! z J0 _+ _1 z: x: F$ n
) _$ ~( \$ S5 z
$ ^+ s4 l: x- B+ F1 v7 R ! e4 _$ w: R% ^( J( b. R
$ N( @8 t! j( `6 }
这些图案除了可以应用于网页背景之外，还可以用于平面广告设计、包装设计等领域。
9 z5 Y2 B8 M1 U" g% ~/ g' G# }. o( r4 D/ b; i4 E
**** 更多内容跟帖回复才可浏览 *****
