50888,8686886,94007,10qq,446655-清风音乐论坛 » ★ 图片处理 ★ » Photoshop制作完美无缝拼接图案全攻略

打印

Photoshop制作完美无缝拼接图案全攻略

老婆我不怕

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-16 18:48 只看该作者

Photoshop制作完美无缝拼接图案全攻略

Photoshop制作完美无缝拼接图案全攻略6 |; X% F+ J: T4 O/ I
% N6 }" M. h- k: T6 z+ s* d

　　我们已经知道，用来填充的图案具有连续平铺的特性，当在一个较大的范围(大于图案)内填充图案的时候，会产生上下左右彼此衔接的效果。现在我们在Photoshop中建立一个图案填充层(点击图层调板下方9 N W+ g+ l7 u0 u" P W& V

0 f$ h Y+ N5 N5 c0 f* _7 J( d
按钮)，将会出现如下图的设置框。

( t. N- O& S1 [' p( z
" z5 W4 L& P& W s) P: |' D: k
　　在其中选择我们前面所定义的图案，图像中的平铺效果如下图。
2 ]. r, n7 G5 F1 L$ b! n

　　设置框中的“与图层链接”选项如果关闭，那么填充的图案就不能像普通图层那样进行移动。贴紧原点可以让图案与标尺〖CTRL 0 A* Y* ?' U4 [( s
R〗中的0点对齐。　
　　感受无缝平铺图案
: t5 ~. a# d7 H! B. o4 l
　　上面这个图案平铺后产生的是一种“砌墙”效果，即看得出一块一块图案的拼接，图案间有明显的分界线，就好像用砖头砌墙一样。现在我们选择Photoshop默认图案中的“分子”，效果如下右图。不同于之前，在这个平铺中看不到图案间的边界线，整个图案浑然一体。

6 S" D" b5 U1 J2 o

　　这是为什么呢？是不是因为这个图案本身很大，以至于比目前图像的画布还大，所以看不到平铺的图案边界呢？不是的，无论你建立多大的图像，都不会看到图案边界。那究竟是为什么？
　　现在我们新建一个120×120的白底图像，然后建立一个菱形渐变填充层(黑色至透明)，设定如下左图，产生的效果如下中图。然后将该层栅格化【图层>栅格化>填充内容/图层】，把菱形移动到最左端并只保留一半，复制菱形图层再水平(按住SHIFT)移动到右端且也只保留一半。如下右图。将其定义为图案。2 d! v; f) r! |/ i! E- r
9 I D6 \8 D: I- g
9 W2 u y- y; B# `' u) a6 L

; z9 m2 n+ y+ s, U6 I! u

0 _6 I$ o1 G0 C/ @

- [' N8 r! a% x- s4 ?  m/ g

　　Now，在脑中想象一下，把这个图案进行平铺的效果将是怎样？
　　接着动手制作，平铺的效果如下左图，我们发现原先被拆散的菱形又被合并在一起了。和你们想象中的是否一致？ : c* S# Q& X  Z4 c! }  O
　　正因为图案的连续平铺特性，前一个图案与后一个图案首尾相接，如下右图。才能够形成这样的效果。从严格意义上来说，图案的边界是存在的。但从视觉效果上看却没有边界。正因为图案内容前后衔接。这样的图案就适合用以连续平铺(也称无缝平铺、连续图案)，可以“星火燎原”，用较小的图案来制作较大的区域，且无论区域大或者小，都不会影响平铺的整齐性。, T* j( t  f( ^3 X, E

5 ^5 x1 f$ J& W0 Z! ?. z3 y

) A5 H1 L; w4 K- I7 k( c
) P8 y  E/ s7 C6 U  w
　　这种图案在网页设计中是经常用到的，因为网页的大小并不是固定的，随着内容的增减可能随时发生变化。比如原先网页中只有20行文字，我们根据这20行的大小制作了背景，但以后如果文字增加为30行，那空余出来的部分怎么办？因此网页背景都是采用一个较小的图案，然后指定为平铺。这样无论网页内容增加或者减少都不会影响背景的效果。
　　即使网页内容不发生增减，浏览器窗口宽度减少，也会引起高度的增加，因为这样才能够保证总面积不变以显示原先的内容。
　　那不改变浏览器大小不就没问题了吗？不是的，首先你不可能强制浏览者不去改变浏览器窗口的大小。其次不同的人的显示器分辨率设定也可能不一样。我们在1024×768屏幕分辨率下制作的充满画面的网页，如果在800×600的显示器上显示，即使浏览器窗口最大化，宽度也不可避免地减少。
　　无缝平铺图案深度分析 . C/ p5 _/ v( y* u2 K
　　现在我们来仔细分析一下刚才定义的菱形图案，为什么它能够无缝平铺呢？因为在图案最左端的1像素部分，与图案最右端的1像素部分有良好的像素承接关系。这种承接关系体现在位置和颜色上。我们可以据此来推断，用一条线段来作为图案的话：+ Y) W# e0 c& B! Z! d
　　1：线段的两个端点分别位于图案的左右边界，且处在同一水平线上，那么这条线段的平铺效果最好，首尾相连，可以形成无缝平铺。
　　2：线段的两个端点都没有或只有一个到达边界，那么平铺效果其次，首尾虽不能相连，却也不会产生断接感。
　　3：线段的两个端点分别位于图案的左右边界，但不在同一水平线上，那么平铺效果最差，因为首尾既不能相连，又产生了断接感。
　　分别对应下图中3种效果范例。5 q' E, M) M  o; U4 _: o
2 l0 L" O3 T. ^' S
  V$ A" n6 I! e2 R1 U

　　上面所说的第一种平铺，其实还要一种例外的可能性：如果线段穿越边界时候呈现一定的角度(常见于曲线)，那么位于分界点的两个像素(下图中的A与B)即使不在同一水平线上，却同样能够形成无缝平铺。因为它们之间的落差符合线段的走势。这样的差异通常也就是1像素到2像素的距离，再大就会产生断接感了。

$ N5 ~+ S) c0 a# a; n
9 h$ h- m0 a. X. H3 t8 r2 h# P
　　除了位置，边界像素的颜色对于平铺效果也是有影响的。这常见于使用渐变色作为平铺的时候。为了使效果明显，我们使用了模拟渐变的色块，并打上颜色数字来说明问题，如下图。 + ^ p( r" O( }5 R% x
　　如果头尾颜色相同，颜色相接会产生一个重复的区域，使得颜色1在平铺中的比例两倍于其他颜色，造成不协调。当减去其中一个后，颜色的过渡就协调了。这可以从数字的变化上看出来。
　　不过如果渐变图案中的颜色数量较多或所占区域较小(如颜色只有1像素宽)，这种重复的效果就不容易被觉察，也就不必过于苛求。" `; H; f0 {& L8 ^( `" e, q

]1 t, V# [. C4 h7 x

1 Q5 ~& o4 }" P2 S7 y# ]3 [$ ]
( v$ X& N3 z' t9 ^. d: G: u& n
　　头尾重复的情况也会出现在动画制作中，如下图是一个顺时针旋转箭头的动画过程，每帧的停留时间为1秒。注意第1帧与第9帧的箭头角度相同，这样在播放的时候，箭头在这个角度就会停留2秒，看起来就好像顿了一下似的，造成动画的不连贯。

/ V* ~. w. V- r' b( A
3 ^/ x! X6 w7 s7 J
　　前面我们所制作的无缝平铺图案又称为2方连续图案，因为只考虑到了横向或竖向(所有例子旋转90度即是)平铺的需要。这样的图案在填充大面积的区域时会显得很单调。下面我们就来看看如何制作4方连续图案，这并不困难，就是把两个方向结合起来考虑而已。
　　在第一个菱形的基础上，我们再创建一个30%左右的小菱形渐变，按照前面相同的手法处理成如下左图的样子。尽管很简陋，但这就是一个真正的4方连续图案了。平铺效果如下右图。

. O/ g' S2 k$ \4 W W

0 K1 p7 O+ q. W- \# D" V: O. ?

　　在制作这个图案的时候，大家最感到没有把握的就是让菱形在边界正好保留一半大小，这个过程中稍有误差就会造成平铺图案断接。所幸菱形具有很明显的棱边可提供视觉参考。但对于一些其他的形状就未必能够准确把握了。( v- S. o% `) y# x& v
　　用Photoshop“位移滤镜”制作平铺图案 3 `5 o, I! y6 Q" a! g$ E
　　为了准确和快捷地制作平铺图案，可以使用Photoshop的位移滤镜。让我们先制作出早先的那个大菱形并栅格化，确保选择该层，然后【滤镜>其他>位移】，设置如下左图，注意要选择“折回”，就会在图像中看到我们之前手动复制图层并移动到边界的效果。那这个位移滤镜是什么原理呢？ 0 g7 P" A" o# C* [: ], y
　　位移滤镜在“折回”方式下就是假定图像已经作为图案并进行了平铺，如下右图，以平铺中心的原图案(下右图红框内)为基准点，向四周移动一定的距离后，用该处的图像替换原先的图像。
　　我们这个图像的尺寸是120×120，那么按照左图的设置水平移动60(或-60)像素，就相当于横向移动一半，应该停留在下右图的蓝色区域内，正好是左右各端露出菱形的一半。可以预见，如果垂直也设为60(或-60)像素的话，所得到的应该是下右图绿色区域内的图像。 2 Y$ C7 X5 }& a* c( {: u+ ^
　　在完成大菱形的水平位移后，再建立并栅格化一个小菱形渐变层，然后进行60(或-60)像素垂直位移，就可以得到与之前相同的效果。使用滤镜前注意正确选择图层。- y; A- d% S" O! o# J$ ^% O( d
　　
# y0 g1 @! z l; x K

9 i9 C- `% _# A9 s. y7 y! `

# h+ I7 L' V: f
2 e' N7 X% d8 r+ z3 P J
　　掌握了位移滤镜的使用后，我们就可以很容易地制作无缝平铺图案。新建一个60×60的图像，新建一个图层，使用自定义形状工具〖U/SHIFT 0 M8 n; s% v% a+ y$ H* A
U〗在其中绘制“草2”形状(如找不到可复位形状)，将其与背景层上下居中、左右居中对齐(要以背景层作为基准层，方法可参考操作速查0516)，然后复制该层(选择图层后〖CTRL # D: t" C/ Z* ~2 }+ Z
J〗)，对复制出来的图层(或原图层)使用位移滤镜，水平及垂直方向均设为图像大小的一半(30或-30像素)。得到如下左图的效果，可将图案的名字起为“紫色小草”之类的。填充效果如下右图。$ v# C, e* m5 R0 J/ }& G1 C

4 ]% W7 s, O' }7 C3 k0 V

* ]+ D% S5 ^, U

　　我们知道平铺的效果关键取决于图案边界，因此首先要保证图案边界的连续性。现在我们来制作较为杂乱的可平铺背景，设定如下笔刷：散布枫叶形状、直径30像素、间距80%、大小抖动100%、角度抖动100%、色相抖动100%。
　　选一个彩色前景色(不能选择黑、白或灰度，否则没有色相抖动效果)，在一个150×150的图像中绘制一个十字形，注意枫叶不能超出边界，原则上是越贴紧边界越好，但这里先不用强求，后面有办法来弥补。 - H+ A1 e3 C* ~4 d, A; X
　　然后将图案垂直位移一半(也就是75像素)，这样就会露出原先在上下边界留下的空白。用相同的笔刷填补空白处。 3 I. A! T1 o$ u3 a2 l }9 Z) J
　　接着水平位移、垂直位移一半，就会露出原先在左右边界留下的空白，同画笔填补。最后再垂直位移一半，即可得到可作为无缝平铺图案的边缘。 5 B" P% z t p, T9 l
　　以上步骤如下左图所示。其中的步骤2和步骤6可以替换，也就是说可以先填补水平方向再填补垂直方向。
　　在得到具有可无缝平铺边缘的图案后，最重要的步骤就完成了。接下来可在中间的空白区域随意添加一些图像，但必须保证添加的图像不能超出边界。如下右图。/ x3 x4 p; h: T" M8 e

4 \- U. m3 a8 N, r# N( ?( @7 a- e2 |; ?

　　滤镜是作用于单个图层的，可以利用这个特性来添加更多的平铺效果。如下左图，将前景色设为黑，将笔尖形状改为“沙丘草”，取消色相抖动(由于前景色为纯黑，属于灰度色，而改变色相对灰度色是无效的，因此即使不取消这一项目也不会造成色彩的偏离)，适当增大直径，其余笔刷设定不变。
　　新建图层，在中间画一些草(不要超出边界)，然后进行水平与垂直位移(各50%)。再在中间空余出来的地方随手画几下(不要超出边界)，完成后效果如下左图(隐藏了其他图层)。 % Q7 A! J1 c# ^/ w
　　为什么这里不采用之前“紫色小草”那样，将复制出来的图层进行位移呢？这是因为“紫色小草”需要图案的一致性。而我们这里要避免一致性。 j- J) O* h* O! d3 _9 J
　　将新的沙丘草图案层反相〖CTRL I〗以得到白色，然后置于原先图案的上层，就可以形成如下中图的效果。平铺效果如下右图。 # k7 D8 d: o& f1 [$ l. A
　　可能有的人会问，那为什么一开始不使用白色去画沙丘草呢？这是因为对这个图像的背景而言，用白色绘制沙丘草不容易辨别边界是否超出，因此先使用黑色。0 t( x+ O: U, k" q

+ }$ r$ f- ~& j5 m5 _- v( Y
: p; I& j, P4 e5 i+ |5 R) G
2 _5 Y$ X9 Z; a/ K3 V: l

- _; c8 p; t; m; V
' k3 G+ J8 d% y

$ a( h; m q' t

　　做到这里，特别是看到上左图的透明沙丘草层时，大家有没有想到一个问题：能不能定义半透明的图案呢？ - f5 f. W* w& ~
　　答案是肯定的，Photoshop支持带有Alpha通道的图案，如果大家在前面的制作中都是将图案绘制在新建图层上，那么隐藏背景层后定义图案就可以得到透明的效果。如下左图。还可以将沙丘草图案层作为选区，给现有的枫叶层再添加一个蒙版。方法是〖CTRL 9 h6 Q5 P- @* ^- O# l
单击图层缩览图〗将沙丘草层转为选区，然后选择枫叶层，【图层>添加图层蒙版>隐藏选区】则可做出如下右图的效果。大家可以自己找张图片来看看半透明图案的平铺效果。
" _. O, k2 I2 b* c7 _( M

& j/ O6 e6 s( K [$ p5 v; T) r

　　现在我们对使用位移滤镜制作连续平铺图案的注意事项作一个总结：
　　1：初期的图案应大体绘制于图像的中央部分。这样使用位移滤镜时，取宽高一半的数值，即可令对边图案互相衔接。否则需要依靠视觉判断位移距离。
　　2：初期绘制的图案不能超出画布，否则一定产生断接。特别是使用具有随机动态效果(直径、圆度、散布等)的笔刷时尤为注意。 1 k, k5 r+ z7 ]7 D/ j6 b0 m
　　3：位移滤镜中需要移动的距离为图像尺寸的一半(以上第1点成立时)。不必过分精确，只要对边互有图案即可。如果图像非正方形，则要分别取其宽度和高度一半的数值。 0 V" i% w& Z+ j1 g3 m
　　4：分层制作可产生多重图案，位移滤镜只对目前所选图层有效。但如果有选区存在，则位移滤镜只会改变选区内的图象。
　　常用无缝拼接图案的制作方法
　　下面我们来学习一些常用图案的制作方法，首先是扫描线(也称电视扫描线或TV扫描线)。如下左图是原图，下中图是添加了扫描线后的效果。扫描线实际上就是由若干条横线组成的，那么我们所定义的图案就要能够产生如下右图这样的直线平铺效果。6 N0 I+ q9 |0 U& `

, g2 P. E& r$ H/ ^( A. r

6 `& D ?7 ~8 E: a* C

9 D3 [3 z1 W4 D+ ^4 e

& ~# ]: s# M. V6 t* V; P

　　这样的图案该如何去定义呢？如下左图，新建一个1×2的透明图像，将其放大到最大，然后通过选区将其下方(或上方)填为黑色。这个图案就制作完成了。注意在定义为图案的时候要取消选区〖CTRL - C/ I Q9 L% E1 C6 G1 c: o$ _; D b
D〗。是不是觉得很简单？大家在脑中模拟一下这个图案的平铺效果就会明白这样做是正确的。
　　那么，如果我们将图案绘制成如下右图那样，会有什么区别呢？没有区别，在使用定义图案功能的时候，Photoshop会自动检测图案中的重复区域并将其删除，我们最终将得到与下左图一样的图案。& k1 Z8 k; L6 m$ M
9 d/ F4 d. E! v& r
: m2 c0 Q: d2 {! d1 H0 m, u

9 Q1 M2 r! \: B' \  h6 U
; J0 h& r* ]/ ~% |8 f  _; R0 O/ t
　　利用这个图案建立一个图案填充层，将不透明度设为20%左右，混合模式改为“叠加”就可以得到前面的扫描线效果了。如果增大调整图案填充层中的缩放比例，就可以得到较粗的扫描线。但记住，由于图案属于点阵图像，因此这样放大后会产生模糊。 4 V3 X0 L7 `, o; z& g' a3 R
　　如果要得到清晰的较粗线条，可以按照如下中图那样定义图案，建立1×3的透明图像，并将其中的2/3填为黑色，这样就得到2倍粗的线条了。如果想增加线条的间隔，就将1×3透明图像的1/3填为黑色，如下中图。更粗或间隔更大的扫描线都可参照这个方法制作。 0 s8 T* F+ _: L! ^, F2 x4 A! d
　　也可以尝试使用其他灰度色或彩色来制作扫描线，如下右图。看看会有怎样的效果。在应用具有灰度色或彩色图案的时候，可以尝试其他的图层混合模式。
　　如果要制作竖直线条，定义的方法和上面是基本相同的，这里就不再介绍。
% S( n/ Q6 I  S1 m8 l
  v+ R% ~9 P0 ^7 r# a

% @# Q7 I+ [9 _% u

- s6 }( T4 Q, M3 D0 j5 ^% q6 D7 S8 e
8 V( @8 {" X6 \' x. j% H: D

) H. a1 I9 Z+ l* c: K5 e3 P
4 I4 Q- a9 a( g) p( ]
　　如果是定义斜线，可参照如下左图和右图(均放大为1600%，实际每一个方块为1像素)。左边的斜线平铺后较密集而右方的相对疏松。为什么不使用2×2的图像来定义斜线呢？因为2×2的尺寸太小，制作出来的斜线实际上成了网点效果，大家可以想象并自己动手做做看。
* G/ e. j- f: r
W% Q) p+ u/ O) h- R

( r; f* g. {2 N/ E% \" E

) ~9 \$ Q8 @) ]

8 x1 [% k% u/ r, K
$ P6 x) r+ l, J' t
　　下左是将最初的定义的扫描线放大为400%的效果。下中图是使用了彩色线条图案并更改混合模式为“颜色”的效果。下右图是斜线图案的效果。
0 N Y) }" K/ l3 V
! [' G& W& _6 O% d

0 e- y) v, x) \3 v5 t. i. ~
4 K! ^& h4 h3 Y7 w' @; V5 Q+ V

5 H" [" z) ~0 E! d, h
" J1 `! M0 T, c6 P5 b, W2 F

- b1 x4 f) J" O" A# J D# Z$ x5 Y% g
　　除了线条以外，网格与网点也是经常需要使用到的，对于网格掌握一个诀窍：十字形：十字越小网格越密集，十字越大网格越疏松；而十字的粗细影响网格边缘的粗细。掌握了这些就很容易定义均匀的网格图案。如下左图和中图(1600%)。下右图的网格不透明度为20%，使用了“变亮”混合模式。 3 D5 N! \7 `1 R
( q9 `8 u( ?; z8 G: i

, `# k% D, t$ z1 S+ a0 Z/ _' {6 ?
" k8 D: I& Y" |
3 H! q" b4 g* H' m% R- [

9 b' ~7 G7 _; |
6 Q+ V6 {, J* H9 g1 {
3 U; E6 U- p, e* z9 M

　　如果要定义不均匀的网格，那就是一种干字形(或土字形)。可以参照下左图(1600%)。按照这种思路扩展出去，可以将任意的水平和垂直线段作为图案，如下右图(1600%)。7 `8 N: O6 z/ K* |# |2 x
4 y+ s" W5 {; x( d( |1 g& X1 K7 L. B2 @

4 U* P, F) Q" }. g) \
4 U6 `) Z1 M' O7 D3 v) L- W3 P
$ n( D& C! w0 X$ N

Y9 @5 J% f1 J/ a+ G( W

　　定义网点图案实际上和网格差不多。区别在于网格的线条是连续的，而网点是不连续的。如下左图和中图(1600%)是最典型的网格图案。制作这类网点的诀窍就在于：定义奇数宽度的正方形图案，在中间区域填充黑色。如果定义非正方形的图案，则可以在水平和垂直方向形成不均匀的平铺。
　　如果有时候需要图案的第一个网点精确对应图像的左上角，可将位于正方形的左上角的那个像素填上黑色，如下右图(1600%)。它的平铺效果与第2图是相同的。

( }- Q- X2 u( l
9 g3 d5 z4 s/ t9 w2 E. i; y
0 H2 \2 N" z+ E$ t" Y5 a

: V0 w; Z$ @% {# H9 ? N8 k( J' a

! ^+ C/ Y0 j. l/ ?$ X" h
　　网点与网格仅一步之遥，如下左图和中图(500%)，它就综合了网格与网点的特征。当然我们也可以定义如下右图(500%)的斜线网格。$ U; E6 X6 _; W9 I# l' S1 ]
- i% y: [* N& ^+ w5 B3 R
* G+ k7 `$ z: ~, n/ ~+ m

% c3 B) g' U3 b9 |

7 I0 M/ I6 U2 l7 I
, t0 S' \1 j; I. l+ }0 [. C& x

1 N# q4 P" t8 z; q# `
( C: U7 Z2 r+ c+ b# c' H
　　大家会看到我们所定义的扫描线、网点和网格大都是黑色的，那如果有时候需要改变它们的颜色该如何做呢？难道都要用新颜色重新定义图案？在这里考察一下大家对色彩调整部分的掌握程度：如何将灰度色变为彩色？
　　虽然我们知道了方法，但在这里操作起来会发现问题：无法对图案填充层进行色相调整。这是由于这类特殊图层是无法应用色彩调整的。解决的方法有两个： ' G6 S/ {$ q8 Q3 S/ ?
　　一是将图案填充层栅格化，即点阵化。方法是【图层>栅格化>图层】或在图层调板中右键单击填充图层选择“栅格化”。栅格化后的图层就可以直接应用各种色彩调整了。这种方法虽然简单，但弊端也是显而易见的，那就是失去了特殊图层灵活的可编辑性。 ; z+ p; k3 u& Q4 w% z) }5 x
　　再就是使用“专属色彩调整图层”来改变颜色。如下图，原先黑色的线条被色相/饱和度调整为了绿色。如果不指定为专属调整层的话，色相调整就会对之下的背景层也造成影响。“专属色彩调整层”实际上就是建立剪贴蒙版。
　　

0 n f- P% N- t; B5 }
　　此外，也可以使用纯色填充层来改变线条的颜色。相比使用色相调整层来，使用纯色填充层在选色上更直观。将其与图案层组成将贴蒙版后填充效果就只对图案层有效。如下图。
　　注意使用这种颜色填充方式有一个前提，那就是所使用的图案必须是背景透明的，这样颜色填充就只会针对图案中有像素存在的部分有效。否则颜色填充将充满整个画面。) T+ Z( _- M# P, M
2 |5 P; M2 b6 F, H' `" ~% w
\8 y4 U, g. l2 C: A& U6 l

: f5 h% y' r! C+ ^0 H% W \3 D' B
3 b: @" j1 s% C* Z$ Z' Z: t+ w$ E6 l+ f

( B' _# s3 l! h, {: t
　　图案层也可以配合蒙版来使用，如下图使用了两个图案填充层，并用画笔涂抹蒙版以控制图案在画面上的分布。此外，在图层样式中使用图案也是很经常的。7 E8 ^" Y1 I. ?" P1 T4 u
- \2 p7 r; w9 t/ E
4 e3 y4 E9 Q; @/ c! K* |: o; @

6 [ \: U9 j+ ~, H1 q4 U% o

# _, m( Y5 t0 b( I

点击图标进入精品网摘收藏欢迎大家加入网络收藏夹

TOP

‹‹ 上一主题 | 下一主题 ››