完美无缝拼接图案制作教程

所谓无缝拼接背景图,即是整幅图像可以看做是由若干个矩形小图像拼接而成,并且各个矩形小图像之间没有接缝的痕迹,各个小图像之间也完全吻合。这种无缝拼接图像在日常生活中也很常见,如地面上铺的地板革、墙纸、花纹布料、礼品包装纸等,无缝拼接图像在电脑图像处理上应用广泛,特别是在一些平面设计和网页背景方面,对主题内容进行烘托,不仅美观别致,而且简便易行,又不至于浪费大量的时间和空间。下面以制作花布纹理图案和人力拼图为例来说明。

 

花布纹理图案

  制作花布纹理风格图案的具体步骤如下(制作软件以Photoshop 6中文版为例):

  1、新建一个80×60、72像素/英寸、背景色为白色的RGB文件。

  2、将前景色设置为天蓝色。从工具箱中选择喷枪工具,选择如图1所示的笔刷(可以从混合画笔中调入),在图像中间区域单击鼠标生成如图2所示图案。


图1

  3、从下拉菜单中选择“滤镜→其他→位移”命令,在位移对话框中设置水平为40像素,垂直为30像素,未定义区域为折回,确定退出。


图2

  4、再次从工具箱中选择喷枪工具,在图像中间区域单击鼠标喷洒相同的图案(如图3)。


图3

  5、按“Ctrl+A”键选定全部图像内容,然后从编辑菜单中选择定义图案命令,给它起个名字为“花布纹理”,将所选区域定义为图案。


图4

  6、新建一个适当大小的RGB文件,从编辑菜单中选择填充命令,在填充对话框中选取内容使用为“图案”,从自定义图案下拉条中选择刚才定义的“花布纹理”,确定退出,完成花布图案的制作,填充结果如图4所示。

  

人物拼图

  在日常应用中,我们可能还需要将某一图像中选取的人物或景物作为小图像拼接成一幅背景图,在这种情况下,可以使用Photoshop外挂滤镜组KPT3中的Seamless Welder(无缝焊接)滤镜来达到目的,Seamless Welder无缝焊接滤镜的作用原理是:读取图像选取框边缘的信息,并将其反转到对立边,然后与选取部分进行融合来消除接缝。另外需要注意:由于无缝焊接滤镜要读取选取框边缘信息,所以您在拉出一个选定时,选定的外框与图像边缘的空间至少要在选取框尺寸的10%以上。具体步骤如下:

  1、 打开一幅人物图像的RGB图像文件,用矩形框选取工具框框住人物的头部(如图5),我们下面将利用此头像作一个无缝拼接的背景图案。


图5

  2、 从滤镜下拉菜单中选择KPT3中的Seamless Welder滤镜,在出现的对话框中设置Mode为Seamless Welder,Glue为Normal,Opacity为100%,在预览窗口中拖动鼠标,看左下角的提示栏,使Intensity(强度)为50%左右,我们可以通过滤镜右上角三角形下拉菜单中的Preview Edge Matching来预览边缘融合情况,然后按右下角的绿色按钮执行该滤镜功能(如图6所示)。


图6

  3、从编辑下拉菜单中选择定义图案命令,给它起个名字为“人物图像”,将所选区域定义为图案。

  新建一个适当大小的RGB文件,从编辑菜单中选择填充命令,在填充对话框中选取内容使用为图案,从自定图案下拉条中选择刚才定义的“人物图像”,填充后的结果如标题图所示,可以看到边缘很好地融合了,没有接缝。

 

我们已经知道,用来填充的图案具有连续平铺的特性,当在一个较大的范围(大于图案)内填充图案的时候,会产生上下左右彼此衔接的效果。现在我们在Photoshop中建立一个图案填充层(点击图层调板下方按钮),将会出现如下图的设置框。

  在其中选择我们前面所定义的图案,图像中的平铺效果如下图。

  设置框中的“与图层链接”选项如果关闭,那么填充的图案就不能像普通图层那样进行移动。贴紧原点可以让图案与标尺〖CTRL
R〗中的0点对齐。 
  

感受无缝平铺图案
  上面这个图案平铺后产生的是一种“砌墙”效果,即看得出一块一块图案的拼接,图案间有明显的分界线,就好像用砖头砌墙一样。现在我们选择Photoshop默认图案中的“分子”,效果如下右图。不同于之前,在这个平铺中看不到图案间的边界线,整个图案浑然一体。

  这是为什么呢?是不是因为这个图案本身很大,以至于比目前图像的画布还大,所以看不到平铺的图案边界呢?不是的,无论你建立多大的图像,都不会看到图案边界。那究竟是为什么?
  现在我们新建一个120×120的白底图像,然后建立一个菱形渐变填充层(黑色至透明),设定如下左图,产生的效果如下中图。然后将该层栅格化【图层>栅格化>填充内容/图层】,把菱形移动到最左端并只保留一半,复制菱形图层再水平(按住SHIFT)移动到右端且也只保留一半。如下右图。将其定义为图案。

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

  这种图案在网页设计中是经常用到的,因为网页的大小并不是固定的,随着内容的增减可能随时发生变化。比如原先网页中只有20行文字,我们根据这20行的大小制作了背景,但以后如果文字增加为30行,那空余出来的部分怎么办?因此网页背景都是采用一个较小的图案,然后指定为平铺。这样无论网页内容增加或者减少都不会影响背景的效果。
  即使网页内容不发生增减,浏览器窗口宽度减少,也会引起高度的增加,因为这样才能够保证总面积不变以显示原先的内容。
  那不改变浏览器大小不就没问题了吗?不是的,首先你不可能强制浏览者不去改变浏览器窗口的大小。其次不同的人的显示器分辨率设定也可能不一样。我们在1024×768屏幕分辨率下制作的充满画面的网页,如果在800×600的显示器上显示,即使浏览器窗口最大化,宽度也不可避免地减少。

无缝平铺图案深度分析
  现在我们来仔细分析一下刚才定义的菱形图案,为什么它能够无缝平铺呢?因为在图案最左端的1像素部分,与图案最右端的1像素部分有良好的像素承接关系。这种承接关系体现在位置和颜色上。我们可以据此来推断,用一条线段来作为图案的话:
  1:线段的两个端点分别位于图案的左右边界,且处在同一水平线上,那么这条线段的平铺效果最好,首尾相连,可以形成无缝平铺。
  2:线段的两个端点都没有或只有一个到达边界,那么平铺效果其次,首尾虽不能相连,却也不会产生断接感。
  3:线段的两个端点分别位于图案的左右边界,但不在同一水平线上,那么平铺效果最差,因为首尾既不能相连,又产生了断接感。
  分别对应下图中3种效果范例。

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

  除了位置,边界像素的颜色对于平铺效果也是有影响的。这常见于使用渐变色作为平铺的时候。为了使效果明显,我们使用了模拟渐变的色块,并打上颜色数字来说明问题,如下图。
  如果头尾颜色相同,颜色相接会产生一个重复的区域,使得颜色1在平铺中的比例两倍于其他颜色,造成不协调。当减去其中一个后,颜色的过渡就协调了。这可以从数字的变化上看出来。
  不过如果渐变图案中的颜色数量较多或所占区域较小(如颜色只有1像素宽),这种重复的效果就不容易被觉察,也就不必过于苛求。

  头尾重复的情况也会出现在动画制作中,如下图是一个顺时针旋转箭头的动画过程,每帧的停留时间为1秒。注意第1帧与第9帧的箭头角度相同,这样在播放的时候,箭头在这个角度就会停留2秒,看起来就好像顿了一下似的,造成动画的不连贯。

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

  在制作这个图案的时候,大家最感到没有把握的就是让菱形在边界正好保留一半大小,这个过程中稍有误差就会造成平铺图案断接。所幸菱形具有很明显的棱边可提供视觉参考。但对于一些其他的形状就未必能够准确把握了。
  用Photoshop“位移滤镜”制作平铺图案
  为了准确和快捷地制作平铺图案,可以使用Photoshop的位移滤镜。让我们先制作出早先的那个大菱形并栅格化,确保选择该层,然后【滤镜>其他>位移】,设置如下左图,注意要选择“折回”,就会在图像中看到我们之前手动复制图层并移动到边界的效果。那这个位移滤镜是什么原理呢?
  位移滤镜在“折回”方式下就是假定图像已经作为图案并进行了平铺,如下右图,以平铺中心的原图案(下右图红框内)为基准点,向四周移动一定的距离后,用该处的图像替换原先的图像。
  我们这个图像的尺寸是120×120,那么按照左图的设置水平移动60(或-60)像素,就相当于横向移动一半,应该停留在下右图的蓝色区域内,正好是左右各端露出菱形的一半。可以预见,如果垂直也设为60(或-60)像素的话,所得到的应该是下右图绿色区域内的图像。
  在完成大菱形的水平位移后,再建立并栅格化一个小菱形渐变层,然后进行60(或-60)像素垂直位移,就可以得到与之前相同的效果。使用滤镜前注意正确选择图层。
  
  掌握了位移滤镜的使用后,我们就可以很容易地制作无缝平铺图案。新建一个60×60的图像,新建一个图层,使用自定义形状工具〖U/SHIFT
U〗在其中绘制“草2”形状(如找不到可复位形状),将其与背景层上下居中、左右居中对齐(要以背景层作为基准层,方法可参考操作速查0516),然后复制该层(选择图层后〖CTRL
J〗),对复制出来的图层(或原图层)使用位移滤镜,水平及垂直方向均设为图像大小的一半(30或-30像素)。得到如下左图的效果,可将图案的名字起为“紫色小草”之类的。填充效果如下右图。

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

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

  做到这里,特别是看到上左图的透明沙丘草层时,大家有没有想到一个问题:能不能定义半透明的图案呢?
  答案是肯定的,Photoshop支持带有Alpha通道的图案,如果大家在前面的制作中都是将图案绘制在新建图层上,那么隐藏背景层后定义图案就可以得到透明的效果。如下左图。还可以将沙丘草图案层作为选区,给现有的枫叶层再添加一个蒙版。方法是〖CTRL
单击图层缩览图〗将沙丘草层转为选区,然后选择枫叶层,【图层>添加图层蒙版>隐藏选区】则可做出如下右图的效果。大家可以自己找张图片来看看半透明图案的平铺效果。

  现在我们对使用位移滤镜制作连续平铺图案的注意事项作一个总结:
  1:初期的图案应大体绘制于图像的中央部分。这样使用位移滤镜时,取宽高一半的数值,即可令对边图案互相衔接。否则需要依靠视觉判断位移距离。
  2:初期绘制的图案不能超出画布,否则一定产生断接。特别是使用具有随机动态效果(直径、圆度、散布等)的笔刷时尤为注意。
  3:位移滤镜中需要移动的距离为图像尺寸的一半(以上第1点成立时)。不必过分精确,只要对边互有图案即可。如果图像非正方形,则要分别取其宽度和高度一半的数值。
  4:分层制作可产生多重图案,位移滤镜只对目前所选图层有效。但如果有选区存在,则位移滤镜只会改变选区内的图象。
  

常用无缝拼接图案的制作方法
  下面我们来学习一些常用图案的制作方法,首先是扫描线(也称电视扫描线或TV扫描线)。如下左图是原图,下中图是添加了扫描线后的效果。扫描线实际上就是由若干条横线组成的,那么我们所定义的图案就要能够产生如下右图这样的直线平铺效果。

  这样的图案该如何去定义呢?如下左图,新建一个1×2的透明图像,将其放大到最大,然后通过选区将其下方(或上方)填为黑色。这个图案就制作完成了。注意在定义为图案的时候要取消选区〖CTRL
D〗。是不是觉得很简单?大家在脑中模拟一下这个图案的平铺效果就会明白这样做是正确的。
  那么,如果我们将图案绘制成如下右图那样,会有什么区别呢?没有区别,在使用定义图案功能的时候,Photoshop会自动检测图案中的重复区域并将其删除,我们最终将得到与下左图一样的图案。

  利用这个图案建立一个图案填充层,将不透明度设为20%左右,混合模式改为“叠加”就可以得到前面的扫描线效果了。如果增大调整图案填充层中的缩放比例,就可以得到较粗的扫描线。但记住,由于图案属于点阵图像,因此这样放大后会产生模糊。
  如果要得到清晰的较粗线条,可以按照如下中图那样定义图案,建立1×3的透明图像,并将其中的2/3填为黑色,这样就得到2倍粗的线条了。如果想增加线条的间隔,就将1×3透明图像的1/3填为黑色,如下中图。更粗或间隔更大的扫描线都可参照这个方法制作。
  也可以尝试使用其他灰度色或彩色来制作扫描线,如下右图。看看会有怎样的效果。在应用具有灰度色或彩色图案的时候,可以尝试其他的图层混合模式。
  如果要制作竖直线条,定义的方法和上面是基本相同的,这里就不再介绍。

  如果是定义斜线,可参照如下左图和右图(均放大为1600%,实际每一个方块为1像素)。左边的斜线平铺后较密集而右方的相对疏松。为什么不使用2×2的图像来定义斜线呢?因为2×2的尺寸太小,制作出来的斜线实际上成了网点效果,大家可以想象并自己动手做做看。

  下左是将最初的定义的扫描线放大为400%的效果。下中图是使用了彩色线条图案并更改混合模式为“颜色”的效果。下右图是斜线图案的效果。

  除了线条以外,网格与网点也是经常需要使用到的,对于网格掌握一个诀窍:十字形:十字越小网格越密集,十字越大网格越疏松;而十字的粗细影响网格边缘的粗细。掌握了这些就很容易定义均匀的网格图案。如下左图和中图(1600%)。下右图的网格不透明度为20%,使用了“变亮”混合模式。

  如果要定义不均匀的网格,那就是一种干字形(或土字形)。可以参照下左图(1600%)。按照这种思路扩展出去,可以将任意的水平和垂直线段作为图案,如下右图(1600%)。

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

  网点与网格仅一步之遥,如下左图和中图(500%),它就综合了网格与网点的特征。当然我们也可以定义如下右图(500%)的斜线网格。

  大家会看到我们所定义的扫描线、网点和网格大都是黑色的,那如果有时候需要改变它们的颜色该如何做呢?难道都要用新颜色重新定义图案?在这里考察一下大家对色彩调整部分的掌握程度:如何将灰度色变为彩色?
  虽然我们知道了方法,但在这里操作起来会发现问题:无法对图案填充层进行色相调整。这是由于这类特殊图层是无法应用色彩调整的。解决的方法有两个:
  一是将图案填充层栅格化,即点阵化。方法是【图层>栅格化>图层】或在图层调板中右键单击填充图层选择“栅格化”。栅格化后的图层就可以直接应用各种色彩调整了。这种方法虽然简单,但弊端也是显而易见的,那就是失去了特殊图层灵活的可编辑性。
  再就是使用“专属色彩调整图层”来改变颜色。如下图,原先黑色的线条被色相/饱和度调整为了绿色。如果不指定为专属调整层的话,色相调整就会对之下的背景层也造成影响。“专属色彩调整层”实际上就是建立剪贴蒙版。
  
  此外,也可以使用纯色填充层来改变线条的颜色。相比使用色相调整层来,使用纯色填充层在选色上更直观。将其与图案层组成将贴蒙版后填充效果就只对图案层有效。如下图。
  注意使用这种颜色填充方式有一个前提,那就是所使用的图案必须是背景透明的,这样颜色填充就只会针对图案中有像素存在的部分有效。否则颜色填充将充满整个画面。

  图案层也可以配合蒙版来使用,如下图使用了两个图案填充层,并用画笔涂抹蒙版以控制图案在画面上的分布。此外,在图层样式中使用图案也是很经常的。

 

随手将知识分享给爱学习的小伙伴们吧!

全教程完,学完记得交作业。如果本教程对您有所帮助,请推荐给你的朋友。

【原创教程 投稿邮箱: ps@16xx8.com】

长按二维码关注我们

关注我们微博:@photoshop教程论坛

推荐教程