我們已經知道，用來填充的圖案具有連續平鋪的特性，當在一個較大的範圍(大于圖案)内填充圖案的時候，會産生上下左右彼此銜接的效果。現在我們建立一個圖案填充層(點擊圖層調闆下方

按鈕)，将會出現如下左圖的設置框，在其中選擇我們前面所定義的圖案，圖像中的平鋪效果如下中圖。

設置框中的“與圖層鍊接”選項如果關閉，那麼填充的圖案就不能像普通圖層那樣進行移動。貼緊原點可以讓圖案與标尺〖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的位移濾鏡。讓我們先制作出早先的那個大菱形并栅格化，确保選擇該層，然後【濾鏡>其他>位移】，設置如下左圖，注意要選擇“折回”，就會在圖像中看到我們之前手動複制圖層并移動到邊界的效果。那這個位移濾鏡是什麼原理呢？

位移濾鏡在“折回”方式下就是假定圖像已經作為圖案并進行了平鋪，如下右圖，以平鋪中心的原圖案(下右圖紅框内)為基準點，向四周移動一定的距離後，用該處的圖像替換原先的圖像。

我們這個圖像的尺寸是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：分層制作可産生多重圖案，位移濾鏡隻對目前所選圖層有效。但如果有選區存在，則位移濾鏡隻會改變選區内的圖象。

0952下面我們來學習一些常用圖案的制作方法，首先是掃描線(也稱電視掃描線或TV掃描線)。如下左圖是原圖，下中圖是添加了掃描線後的效果。掃描線實際上就是由若幹條橫線組成的，那麼我們所定義的圖案就要能夠産生如下右圖這樣的直線平鋪效果。

這樣的圖案該如何去定義呢？如下左圖，新建一個1×2的透明圖像，将其放大到最大，然後通過選區将其下方(或上方)填為黑色。這個圖案就制作完成了。注意在定義為圖案的時候要取消選區〖CTRL D〗。是不是覺得很簡單？大家在腦中模拟一下這個圖案的平鋪效果就會明白這樣做是正确的。

那麼，如果我們将圖案繪制成如下右圖那樣，會有什麼區别呢？沒有區别，在使用定義圖案功能的時候，Photoshop會自動檢測圖案中的重複區域并将其删除，我們最終将得到與下左圖一樣的圖案。

利用這個圖案建立一個圖案填充層，将不透明度設為20%左右，混合模式改為“疊加”就可以得到前面的掃描線效果了。如果增大調整圖案填充層中的縮放比例，就可以得到較粗的掃描線。但記住，由于圖案屬于點陣圖像，因此這樣放大後會産生模糊。

如果要得到清晰的較粗線條，可以按照如下左圖那樣定義圖案，建立1×3的透明圖像，并将其中的2/3填為黑色，這樣就得到2倍粗的線條了。如果想增加線條的間隔，就将1×3透明圖像的1/3填為黑色，如下中圖。更粗或間隔更大的掃描線都可參照這個方法制作。

也可以嘗試使用其他灰度色或彩色來制作掃描線，如下右圖。看看會有怎樣的效果。在應用具有灰度色或彩色圖案的時候，可以嘗試其他的圖層混合模式。

如果要制作豎直線條，定義的方法和上面是基本相同的，這裡就不再介紹。

如果是定義斜線，可參照如下左圖和右圖(均放大為1600%，實際每一個方塊為1像素)。左邊的斜線平鋪後較密集而右方的相對疏松。為什麼不使用2×2的圖像來定義斜線呢？因為2×2的尺寸太小，制作出來的斜線實際上成了網點效果，大家可以想象并自己動手做做看。

下左是将最初的定義的掃描線放大為400%的效果。下中圖是使用了彩色線條圖案并更改混合模式為“顔色”的效果。下右圖是斜線圖案的效果。

0953除了線條以外，網格與網點也是經常需要使用到的，對于網格掌握一個訣竅：十字形：十字越小網格越密集，十字越大網格越疏松；而十字的粗細影響網格邊緣的粗細。掌握了這些就很容易定義均勻的網格圖案。如下左圖和中圖(1600%)。下右圖的網格不透明度為20%，使用了“變亮”混合模式。

如果要定義不均勻的網格，那就是一種幹字形(或土字形)。可以參照下左圖(1600%)。按照這種思路擴展出去，可以将任意的水平和垂直線段作為圖案，如下右圖(1600%)。

定義網點圖案實際上和網格差不多。區别在于網格的線條是連續的，而網點是不連續的。如下左圖和中圖(1600%)是最典型的網格圖案。制作這類網點的訣竅就在于：定義奇數寬度的正方形圖案，在中間區域填充黑色。如果定義非正方形的圖案，則可以在水平和垂直方向形成不均勻的平鋪。

如果有時候需要圖案的第一個網點精确對應圖像的左上角，可将位于正方形的左上角的那個像素填上黑色，如下右圖(1600%)。它的平鋪效果與第2圖是相同的。

網點與網格僅一步之遙，如下左圖和中圖(500%)，它就綜合了網格與網點的特征。當然我們也可以定義如下右圖(500%)的斜線網格。

0954大家會看到我們所定義的掃描線、網點和網格大都是黑色的，那如果有時候需要改變它們的顔色該如何做呢？難道都要用新顔色重新定義圖案？在這裡考察一下大家對色彩調整部分的掌握程度：如何将灰度色變為彩色？把書翻到目錄去，答案在課程《#07：将灰度變為彩色》。

雖然我們知道了方法，但在這裡操作起來會發現問題：無法對圖案填充層進行色相調整。這是由于這類特殊圖層是無法應用色彩調整的。解決的方法有兩個：

一是将圖案填充層栅格化，即點陣化。方法是【圖層>栅格化>圖層】或在圖層調闆中右鍵單擊填充圖層選擇“栅格化”。栅格化後的圖層就可以直接應用各種色彩調整了。這種方法雖然簡單，但弊端也是顯而易見的，那就是失去了特殊圖層靈活的可編輯性。

再就是使用“專屬色彩調整圖層”來改變顔色。如下圖，原先黑色的線條被色相/飽和度調整為了綠色。如果不指定為專屬調整層的話，色相調整就會對之下的背景層也造成影響。“專屬色彩調整層”實際上就是建立剪貼蒙版，它的建立方法參見操作速查0715。

此外，也可以使用純色填充層來改變線條的顔色。相比使用色相調整層來，使用純色填充層在選色上更直觀。将其與圖案層組成将貼蒙版後填充效果就隻對圖案層有效。如下圖。

注意使用這種顔色填充方式有一個前提，那就是所使用的圖案必須是背景透明的，這樣顔色填充就隻會針對圖案中有像素存在的部分有效。否則顔色填充将充滿整個畫面。

圖案層也可以配合蒙版來使用，如下圖使用了兩個圖案填充層，并用畫筆塗抹蒙版以控制圖案在畫面上的分布。此外，在圖層樣式中使用圖案也是很經常的。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!