作者:by wantfee　  出處:收集分享互聯(lián)網(wǎng)

如果你仔細(xì)觀察飛魚的聲納的黑色背景的話，你會(huì)發(fā)現(xiàn)其實(shí)它并不是純色的背景。而是一張有著細(xì)微質(zhì)感的無縫拼接圖案平鋪以后的效果，這張圖片是我從網(wǎng) 上找的現(xiàn)成的圖片，直接在CSS中使用就可以了，很簡(jiǎn)單。但是有些無縫拼接的圖案卻更復(fù)雜一些，圖案不像這張圖片那樣規(guī)則，比如下面這張平鋪以后的效果：

或者下面這張看上去更沒有規(guī)則的：

是不是看起來很酷？尤其下面綠草地這張，你完全可以做一個(gè)南非世界杯的網(wǎng)頁(yè)設(shè)計(jì)，把它當(dāng)成是頁(yè)面背景，絕對(duì)夠味！

那么今天我們就以綠草地這張為例，手把手的教給你如何在Photoshop中創(chuàng)建類似于這樣的不規(guī)則無縫拼接圖片。首先要搞清楚的問題是：

為什么不能直接將圖片平鋪？

你可以試一下，不使用無縫拼接技術(shù)，直接將圖片或者照片平鋪于頁(yè)面的效果，就比如用這張F(tuán)lickr上100kr相冊(cè)中的草地圖片。效果大概如下圖：

你覺得上面的頁(yè)面背景效果如何？我想，草地上多出的這幾個(gè)坑足矣讓你在踢球的時(shí)候崴腳脖子了！所以我們還是要稍微對(duì)它加工一下的，花費(fèi)這點(diǎn)時(shí)間也是非常值得的。讓我們開始：

第一步

下載上面提供的草地圖片，在Photoshop中打開它。

第二步

選擇裁切工具（Crop Tool），在窗口頂部的屬性欄上的寬度（Width）填上200px，高度（Height）也填上200px。代表我們要在這張圖片上裁切出寬和高都為 200像素大小的一個(gè)正方形。拖動(dòng)已經(jīng)選擇好的裁切區(qū)域放置于圖片中草地色彩比較均勻的地方，看上去圖片中間的位置比較好。要避免放置于圖片上顏色較暗的 四個(gè)拐角，這樣做的目的是讓我們的無縫拼接圖案色彩更加均勻，效果更好。

第三步

點(diǎn)擊屬性欄后面的對(duì)勾，確認(rèn)裁切。接下來，選擇濾鏡（Filter）>其它（Other）>偏移（Offset）命令，在彈出的對(duì)話框中的水平和垂直欄中各填入100，并且勾選未定義區(qū)域中的最后一項(xiàng)Warp Around。你將會(huì)得到類似于下圖的效果。

第四步

這時(shí)你可以看到圖片中水平和垂直的不太明顯的分隔線，在這一步我們就要消除這兩個(gè)分隔線。放大圖片，選擇修復(fù)畫筆工具（Healing Brush Tool），使用合適的畫筆大小，大概20個(gè)像素左右，修復(fù)圖片中的分隔線，直到看上去不那么明顯。

第五步

這個(gè)無縫拼接圖案就已經(jīng)完成了。選擇文件（File）>存儲(chǔ)為Web和設(shè)備所用格式（Save for Web&Devices），選擇JPEG格式，80%的質(zhì)量保存。為了測(cè)試圖片的效果，我們將圖片平鋪于頁(yè)面測(cè)試一下，如下圖：

總結(jié)

Photoshop濾鏡中的偏移（Offset）命令是制作無縫拼接圖案的關(guān)鍵。利用這項(xiàng)技術(shù)不僅可以拼出足球場(chǎng)，還可以拼出很多其它的頁(yè)面背景。而且熟悉了之后，你會(huì)發(fā)現(xiàn)這種技術(shù)既簡(jiǎn)單又功能強(qiáng)大。絕對(duì)是網(wǎng)頁(yè)設(shè)計(jì)中最常用的技術(shù)之一。

擴(kuò)展閱讀：

1. Create Seamless Web Background Textures in Minutes
2. How to Turn a Texture into a Seamlessly Tiled Background