完美無(wú)縫拼接圖案制作教程

所謂無(wú)縫拼接背景圖，即是整幅圖像可以看做是由若干個(gè)矩形小圖像拼接而成，并且各個(gè)矩形小圖像之間沒(méi)有接縫的痕跡，各個(gè)小圖像之間也完全吻合。這種無(wú)縫拼接圖像在日常生活中也很常見(jiàn)，如地面上鋪的地板革、墻紙、花紋布料、禮品包裝紙等，無(wú)縫拼接圖像在電腦圖像處理上應(yīng)用廣泛，特別是在一些平面設(shè)計(jì)和網(wǎng)頁(yè)背景方面，對(duì)主題內(nèi)容進(jìn)行烘托，不僅美觀別致，而且簡(jiǎn)便易行，又不至于浪費(fèi)大量的時(shí)間和空間。下面以制作花布紋理圖案和人力拼圖為例來(lái)說(shuō)明。

花布紋理圖案

　　制作花布紋理風(fēng)格圖案的具體步驟如下（制作軟件以Photoshop 6中文版為例）：

　　1、新建一個(gè)80×60、72像素/英寸、背景色為白色的RGB文件。

　　2、將前景色設(shè)置為天藍(lán)色。從工具箱中選擇噴槍工具，選擇如圖1所示的筆刷(可以從混合畫(huà)筆中調(diào)入)，在圖像中間區(qū)域單擊鼠標(biāo)生成如圖2所示圖案。

圖1

　　3、從下拉菜單中選擇“濾鏡→其他→位移”命令，在位移對(duì)話框中設(shè)置水平為40像素，垂直為30像素，未定義區(qū)域?yàn)檎刍?，確定退出。

圖2

　　4、再次從工具箱中選擇噴槍工具，在圖像中間區(qū)域單擊鼠標(biāo)噴灑相同的圖案（如圖3）。

圖3

　　5、按“Ctrl+A”鍵選定全部圖像內(nèi)容，然后從編輯菜單中選擇定義圖案命令，給它起個(gè)名字為“花布紋理”，將所選區(qū)域定義為圖案。

圖4

　　6、新建一個(gè)適當(dāng)大小的RGB文件，從編輯菜單中選擇填充命令，在填充對(duì)話框中選取內(nèi)容使用為“圖案”，從自定義圖案下拉條中選擇剛才定義的“花布紋理”，確定退出，完成花布圖案的制作，填充結(jié)果如圖4所示。

人物拼圖

　　在日常應(yīng)用中，我們可能還需要將某一圖像中選取的人物或景物作為小圖像拼接成一幅背景圖，在這種情況下，可以使用Photoshop外掛濾鏡組KPT3中的Seamless Welder（無(wú)縫焊接）濾鏡來(lái)達(dá)到目的，Seamless Welder無(wú)縫焊接濾鏡的作用原理是：讀取圖像選取框邊緣的信息，并將其反轉(zhuǎn)到對(duì)立邊，然后與選取部分進(jìn)行融合來(lái)消除接縫。另外需要注意：由于無(wú)縫焊接濾鏡要讀取選取框邊緣信息，所以您在拉出一個(gè)選定時(shí)，選定的外框與圖像邊緣的空間至少要在選取框尺寸的10%以上。具體步驟如下：

　　1、 打開(kāi)一幅人物圖像的RGB圖像文件，用矩形框選取工具框框住人物的頭部（如圖5），我們下面將利用此頭像作一個(gè)無(wú)縫拼接的背景圖案。

圖5

　　2、 從濾鏡下拉菜單中選擇KPT3中的Seamless Welder濾鏡，在出現(xiàn)的對(duì)話框中設(shè)置Mode為Seamless Welder，Glue為Normal，Opacity為100%，在預(yù)覽窗口中拖動(dòng)鼠標(biāo)，看左下角的提示欄，使Intensity（強(qiáng)度）為50%左右，我們可以通過(guò)濾鏡右上角三角形下拉菜單中的Preview Edge Matching來(lái)預(yù)覽邊緣融合情況，然后按右下角的綠色按鈕執(zhí)行該濾鏡功能（如圖6所示）。

圖6

　　3、從編輯下拉菜單中選擇定義圖案命令，給它起個(gè)名字為“人物圖像”，將所選區(qū)域定義為圖案。

　　新建一個(gè)適當(dāng)大小的RGB文件，從編輯菜單中選擇填充命令，在填充對(duì)話框中選取內(nèi)容使用為圖案，從自定圖案下拉條中選擇剛才定義的“人物圖像”，填充后的結(jié)果如標(biāo)題圖所示，可以看到邊緣很好地融合了，沒(méi)有接縫。

我們已經(jīng)知道，用來(lái)填充的圖案具有連續(xù)平鋪的特性，當(dāng)在一個(gè)較大的范圍(大于圖案)內(nèi)填充圖案的時(shí)候，會(huì)產(chǎn)生上下左右彼此銜接的效果?，F(xiàn)在我們?cè)赑hotoshop中建立一個(gè)圖案填充層(點(diǎn)擊圖層調(diào)板下方按鈕)，將會(huì)出現(xiàn)如下圖的設(shè)置框。

　　在其中選擇我們前面所定義的圖案，圖像中的平鋪效果如下圖。

　　設(shè)置框中的“與圖層鏈接”選項(xiàng)如果關(guān)閉，那么填充的圖案就不能像普通圖層那樣進(jìn)行移動(dòng)。貼緊原點(diǎn)可以讓圖案與標(biāo)尺〖CTRL
R〗中的0點(diǎn)對(duì)齊?！?br style="max-width: 100%; word-wrap: break-word !important; box-sizing: border-box !important;" /> 　　

感受無(wú)縫平鋪圖案
　　上面這個(gè)圖案平鋪后產(chǎn)生的是一種“砌墻”效果，即看得出一塊一塊圖案的拼接，圖案間有明顯的分界線，就好像用磚頭砌墻一樣。現(xiàn)在我們選擇Photoshop默認(rèn)圖案中的“分子”，效果如下右圖。不同于之前，在這個(gè)平鋪中看不到圖案間的邊界線，整個(gè)圖案渾然一體。

　　這是為什么呢？是不是因?yàn)檫@個(gè)圖案本身很大，以至于比目前圖像的畫(huà)布還大，所以看不到平鋪的圖案邊界呢？不是的，無(wú)論你建立多大的圖像，都不會(huì)看到圖案邊界。那究竟是為什么？
　　現(xiàn)在我們新建一個(gè)120×120的白底圖像，然后建立一個(gè)菱形漸變填充層(黑色至透明)，設(shè)定如下左圖，產(chǎn)生的效果如下中圖。然后將該層?xùn)鸥窕緢D層>柵格化>填充內(nèi)容/圖層】，把菱形移動(dòng)到最左端并只保留一半，復(fù)制菱形圖層再水平(按住SHIFT)移動(dòng)到右端且也只保留一半。如下右圖。將其定義為圖案。

　　Now，在腦中想象一下，把這個(gè)圖案進(jìn)行平鋪的效果將是怎樣？
　　接著動(dòng)手制作，平鋪的效果如下左圖，我們發(fā)現(xiàn)原先被拆散的菱形又被合并在一起了。和你們想象中的是否一致？
　　正因?yàn)閳D案的連續(xù)平鋪特性，前一個(gè)圖案與后一個(gè)圖案首尾相接，如下右圖。才能夠形成這樣的效果。從嚴(yán)格意義上來(lái)說(shuō)，圖案的邊界是存在的。但從視覺(jué)效果上看卻沒(méi)有邊界。正因?yàn)閳D案內(nèi)容前后銜接。這樣的圖案就適合用以連續(xù)平鋪(也稱無(wú)縫平鋪、連續(xù)圖案)，可以“星火燎原”，用較小的圖案來(lái)制作較大的區(qū)域，且無(wú)論區(qū)域大或者小，都不會(huì)影響平鋪的整齊性。

　　這種圖案在網(wǎng)頁(yè)設(shè)計(jì)中是經(jīng)常用到的，因?yàn)榫W(wǎng)頁(yè)的大小并不是固定的，隨著內(nèi)容的增減可能隨時(shí)發(fā)生變化。比如原先網(wǎng)頁(yè)中只有20行文字，我們根據(jù)這20行的大小制作了背景，但以后如果文字增加為30行，那空余出來(lái)的部分怎么辦？因此網(wǎng)頁(yè)背景都是采用一個(gè)較小的圖案，然后指定為平鋪。這樣無(wú)論網(wǎng)頁(yè)內(nèi)容增加或者減少都不會(huì)影響背景的效果。
　　即使網(wǎng)頁(yè)內(nèi)容不發(fā)生增減，瀏覽器窗口寬度減少，也會(huì)引起高度的增加，因?yàn)檫@樣才能夠保證總面積不變以顯示原先的內(nèi)容。
　　那不改變?yōu)g覽器大小不就沒(méi)問(wèn)題了嗎？不是的，首先你不可能強(qiáng)制瀏覽者不去改變?yōu)g覽器窗口的大小。其次不同的人的顯示器分辨率設(shè)定也可能不一樣。我們?cè)?024×768屏幕分辨率下制作的充滿畫(huà)面的網(wǎng)頁(yè)，如果在800×600的顯示器上顯示，即使瀏覽器窗口最大化，寬度也不可避免地減少。