9-11 制作適用于連續(xù)平鋪的圖案(4)

我們已經(jīng)知道，用來(lái)填充的圖案具有連續(xù)平鋪的特性，當(dāng)在一個(gè)較大的范圍(大于圖案)內(nèi)填充圖案的時(shí)候，會(huì)產(chǎn)生上下左右彼此銜接的效果。現(xiàn)在我們建立一個(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ì)齊。
我們這個(gè)圖案平鋪后產(chǎn)生的是一種“砌墻”效果，即看得出一塊一塊圖案的拼接，圖案間有明顯的分界線，就好像用磚頭砌墻一樣�，F(xiàn)在我們選擇Photoshop默認(rèn)圖案中的“分子”，效果如下右圖。不同于之前，在這個(gè)平鋪中看不到圖案間的邊界線，整個(gè)圖案渾然一體。

這是為什么呢？是不是因?yàn)檫@個(gè)圖案本身很大，以至于比目前圖像的畫布還大，所以看不到平鋪的圖案邊界呢？不是的，無(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屏幕分辨率下制作的充滿畫面的網(wǎng)頁(yè)，如果在800×600的顯示器上顯示，即使瀏覽器窗口最大化，寬度也不可避免地減少。
我們將在今后的課程中闡述如何解決這個(gè)問(wèn)題。

現(xiàn)在我們來(lái)仔細(xì)分析一下剛才定義的菱形圖案，為什么它能夠無(wú)縫平鋪呢？因?yàn)樵趫D案最左端的1像素部分，與圖案最右端的1像素部分有良好的像素承接關(guān)系。這種承接關(guān)系體現(xiàn)在位置和顏色上。我們可以據(jù)此來(lái)推斷，用一條線段來(lái)作為圖案的話：
1：線段的兩個(gè)端點(diǎn)分別位于圖案的左右邊界，且處在同一水平線上，那么這條線段的平鋪效果最好，首尾相連，可以形成無(wú)縫平鋪。
2：線段的兩個(gè)端點(diǎn)都沒(méi)有或只有一個(gè)到達(dá)邊界，那么平鋪效果其次，首尾雖不能相連，卻也不會(huì)產(chǎn)生斷接感。
3：線段的兩個(gè)端點(diǎn)分別位于圖案的左右邊界，但不在同一水平線上，那么平鋪效果最差，因?yàn)槭孜布炔荒芟噙B，又產(chǎn)生了斷接感。
分別對(duì)應(yīng)下圖中3種效果范例。

上面所說(shuō)的第一種平鋪，其實(shí)還要一種例外的可能性：如果線段穿越邊界時(shí)候呈現(xiàn)一定的角度(常見(jiàn)于曲線)，那么位于分界點(diǎn)的兩個(gè)像素(下圖中的A與B)即使不在同一水平線上，卻同樣能夠形成無(wú)縫平鋪。因?yàn)樗鼈冎g的落差符合線段的走勢(shì)。這樣的差異通常也就是1像素到2像素的距離，再大就會(huì)產(chǎn)生斷接感了。

除了位置，邊界像素的顏色對(duì)于平鋪效果也是有影響的。這常見(jiàn)于使用漸變色作為平鋪的時(shí)候。為了使效果明顯，我們使用了模擬漸變的色塊，并打上顏色數(shù)字來(lái)說(shuō)明問(wèn)題，如下圖。
如果頭尾顏色相同，顏色相接會(huì)產(chǎn)生一個(gè)重復(fù)的區(qū)域，使得顏色1在平鋪中的比例兩倍于其他顏色，造成不協(xié)調(diào)。當(dāng)減去其中一個(gè)后，顏色的過(guò)渡就協(xié)調(diào)了。這可以從數(shù)字的變化上看出來(lái)。
不過(guò)如果漸變圖案中的顏色數(shù)量較多或所占區(qū)域較小(如顏色只有1像素寬)，這種重復(fù)的效果就不容易被覺(jué)察，也就不必過(guò)于苛求。

頭尾重復(fù)的情況也會(huì)出現(xiàn)在動(dòng)畫制作中，如下圖是一個(gè)順時(shí)針旋轉(zhuǎn)箭頭的動(dòng)畫過(guò)程，每幀的停留時(shí)間為1秒。注意第1幀與第9幀的箭頭角度相同，這樣在播放的時(shí)候，箭頭在這個(gè)角度就會(huì)停留2秒，看起來(lái)就好像頓了一下似的，造成動(dòng)畫的不連貫。

前面我們所制作的無(wú)縫平鋪圖案又稱為2方連續(xù)圖案，因?yàn)橹豢紤]到了橫向或豎向(所有例子旋轉(zhuǎn)90度即是)平鋪的需要。這樣的圖案在填充大面積的區(qū)域時(shí)會(huì)顯得很單調(diào)。下面我們就來(lái)看看如何制作4方連續(xù)圖案，這并不困難，就是把兩個(gè)方向結(jié)合起來(lái)考慮而已。
在第一個(gè)菱形的基礎(chǔ)上，我們?cè)賱?chuàng)建一個(gè)30%左右的小菱形漸變，按照前面相同的手法處理成如下左圖的樣子。盡管很簡(jiǎn)陋，但這就是一個(gè)真正的4方連續(xù)圖案了。平鋪效果如下右圖。

在制作這個(gè)圖案的時(shí)候，大家最感到?jīng)]有把握的就是讓菱形在邊界正好保留一半大小，這個(gè)過(guò)程中稍有誤差就會(huì)造成平鋪圖案斷接。所幸菱形具有很明顯的棱邊可提供視覺(jué)參考。但對(duì)于一些其他的形狀就未必能夠準(zhǔn)確把握了。
為了準(zhǔn)確和快捷地制作平鋪圖案，可以使用Photoshop的位移濾鏡。讓我們先制作出早先的那個(gè)大菱形并柵格化，確保選擇該層，然后【濾鏡>其他>位移】，設(shè)置如下左圖，注意要選擇“折回”，就會(huì)在圖像中看到我們之前手動(dòng)復(fù)制圖層并移動(dòng)到邊界的效果。那這個(gè)位移濾鏡是什么原理呢？
位移濾鏡在“折回”方式下就是假定圖像已經(jīng)作為圖案并進(jìn)行了平鋪，如下右圖，以平鋪中心的原圖案(下右圖紅框內(nèi))為基準(zhǔn)點(diǎn)，向四周移動(dòng)一定的距離后，用該處的圖像替換原先的圖像。
我們這個(gè)圖像的尺寸是120×120，那么按照左圖的設(shè)置水平移動(dòng)60(或-60)像素，就相當(dāng)于橫向移動(dòng)一半，應(yīng)該停留在下右圖的藍(lán)色區(qū)域內(nèi)，正好是左右各端露出菱形的一半。可以預(yù)見(jiàn)，如果垂直也設(shè)為60(或-60)像素的話，所得到的應(yīng)該是下右圖綠色區(qū)域內(nèi)的圖像。
在完成大菱形的水平位移后，再建立并柵格化一個(gè)小菱形漸變層，然后進(jìn)行60(或-60)像素垂直位移，就可以得到與之前相同的效果。使用濾鏡前注意正確選擇圖層。

掌握了位移濾鏡的使用后，我們就可以很容易地制作無(wú)縫平鋪圖案。新建一個(gè)60×60的圖像，新建一個(gè)圖層，使用自定義形狀工具〖U/SHIFT U〗在其中繪制“草2”形狀(如找不到可復(fù)位形狀)，將其與背景層上下居中、左右居中對(duì)齊(要以背景層作為基準(zhǔn)層，方法可參考操作速查0516)，然后復(fù)制該層(選擇圖層后〖CTRL J〗)，對(duì)復(fù)制出來(lái)的圖層(或原圖層)使用位移濾鏡，水平及垂直方向均設(shè)為圖像大小的一半(30或-30像素)。得到如下左圖的效果，可將圖案的名字起為“紫色小草”之類的。填充效果如下右圖。

我們知道平鋪的效果關(guān)鍵取決于圖案邊界，因此首先要保證圖案邊界的連續(xù)性。現(xiàn)在我們來(lái)制作較為雜亂的可平鋪背景，設(shè)定如下筆刷：散布楓葉形狀、直徑30像素、間距80%、大小抖動(dòng)100%、角度抖動(dòng)100%、色相抖動(dòng)100%。
選一個(gè)彩色前景色(不能選擇黑、白或灰度，否則沒(méi)有色相抖動(dòng)效果)，在一個(gè)150×150的圖像中繪制一個(gè)十字形，注意楓葉不能超出邊界，原則上是越貼緊邊界越好，但這里先不用強(qiáng)求，后面有辦法來(lái)彌補(bǔ)。
然后將圖案垂直位移一半(也就是75像素)，這樣就會(huì)露出原先在上下邊界留下的空白。用相同的筆刷填補(bǔ)空白處。
接著水平位移、垂直位移一半，就會(huì)露出原先在左右邊界留下的空白，同畫筆填補(bǔ)。最后再垂直位移一半，即可得到可作為無(wú)縫平鋪圖案的邊緣。
以上步驟如下左圖所示。其中的步驟2和步驟6可以替換，也就是說(shuō)可以先填補(bǔ)水平方向再填補(bǔ)垂直方向。
在得到具有可無(wú)縫平鋪邊緣的圖案后，最重要的步驟就完成了。接下來(lái)可在中間的空白區(qū)域隨意添加一些圖像，但必須保證添加的圖像不能超出邊界。如下右圖。

濾鏡是作用于單個(gè)圖層的，可以利用這個(gè)特性來(lái)添加更多的平鋪效果。如下左圖，將前景色設(shè)為黑，將筆尖形狀改為“沙丘草”，取消色相抖動(dòng)(由于前景色為純黑，屬于灰度色，而改變色相對(duì)灰度色是無(wú)效的，因此即使不取消這一項(xiàng)目也不會(huì)造成色彩的偏離)，適當(dāng)增大直徑，其余筆刷設(shè)定不變。
新建圖層，在中間畫一些草(不要超出邊界)，然后進(jìn)行水平與垂直位移(各50%)。再在中間空余出來(lái)的地方隨手畫幾下(不要超出邊界)，完成后效果如下左圖(隱藏了其他圖層)。
為什么這里不采用之前“紫色小草”那樣，將復(fù)制出來(lái)的圖層進(jìn)行位移呢？這是因?yàn)?ldquo;紫色小草”需要圖案的一致性。而我們這里要避免一致性。
將新的沙丘草圖案層反相〖CTRL I〗以得到白色，然后置于原先圖案的上層，就可以形成如下中圖的效果。平鋪效果如下右圖。
可能有的人會(huì)問(wèn)，那為什么一開(kāi)始不使用白色去畫沙丘草呢？這是因?yàn)閷?duì)這個(gè)圖像的背景而言，用白色繪制沙丘草不容易辨別邊界是否超出，因此先使用黑色。

做到這里，特別是看到上左圖的透明沙丘草層時(shí)，大家有沒(méi)有想到一個(gè)問(wèn)題：能不能定義半透明的圖案呢？
答案是肯定的，Photoshop支持帶有Alpha通道的圖案，如果大家在前面的制作中都是將圖案繪制在新建圖層上，那么隱藏背景層后定義圖案就可以得到透明的效果。如下左圖。還可以將沙丘草圖案層作為選區(qū)，給現(xiàn)有的楓葉層再添加一個(gè)蒙版。方法是〖CTRL 單擊圖層縮覽圖〗將沙丘草層轉(zhuǎn)為選區(qū)，然后選擇楓葉層，【圖層>添加圖層蒙版>隱藏選區(qū)】則可做出如下右圖的效果。大家可以自己找張圖片來(lái)看看半透明圖案的平鋪效果。

現(xiàn)在我們對(duì)使用位移濾鏡制作連續(xù)平鋪圖案的注意事項(xiàng)作一個(gè)總結(jié)：
1：初期的圖案應(yīng)大體繪制于圖像的中央部分。這樣使用位移濾鏡時(shí)，取寬高一半的數(shù)值，即可令對(duì)邊圖案互相銜接。否則需要依靠視覺(jué)判斷位移距離。
2：初期繪制的圖案不能超出畫布，否則一定產(chǎn)生斷接。特別是使用具有隨機(jī)動(dòng)態(tài)效果(直徑、圓度、散布等)的筆刷時(shí)尤為注意。
3：位移濾鏡中需要移動(dòng)的距離為圖像尺寸的一半(以上第1點(diǎn)成立時(shí))。不必過(guò)分精確，只要對(duì)邊互有圖案即可。如果圖像非正方形，則要分別取其寬度和高度一半的數(shù)值。
4：分層制作可產(chǎn)生多重圖案，位移濾鏡只對(duì)目前所選圖層有效。但如果有選區(qū)存在，則位移濾鏡只會(huì)改變選區(qū)內(nèi)的圖象。

0952下面我們來(lái)學(xué)習(xí)一些常用圖案的制作方法，首先是掃描線(也稱電視掃描線或TV掃描線)。如下左圖是原圖，下中圖是添加了掃描線后的效果。掃描線實(shí)際上就是由若干條橫線組成的，那么我們所定義的圖案就要能夠產(chǎn)生如下右圖這樣的直線平鋪效果。

這樣的圖案該如何去定義呢？如下左圖，新建一個(gè)1×2的透明圖像，將其放大到最大，然后通過(guò)選區(qū)將其下方(或上方)填為黑色。這個(gè)圖案就制作完成了。注意在定義為圖案的時(shí)候要取消選區(qū)〖CTRL D〗。是不是覺(jué)得很簡(jiǎn)單？大家在腦中模擬一下這個(gè)圖案的平鋪效果就會(huì)明白這樣做是正確的。
那么，如果我們將圖案繪制成如下右圖那樣，會(huì)有什么區(qū)別呢？沒(méi)有區(qū)別，在使用定義圖案功能的時(shí)候，Photoshop會(huì)自動(dòng)檢測(cè)圖案中的重復(fù)區(qū)域并將其刪除，我們最終將得到與下左圖一樣的圖案。

利用這個(gè)圖案建立一個(gè)圖案填充層，將不透明度設(shè)為20%左右，混合模式改為“疊加”就可以得到前面的掃描線效果了。如果增大調(diào)整圖案填充層中的縮放比例，就可以得到較粗的掃描線。但記住，由于圖案屬于點(diǎn)陣圖像，因此這樣放大后會(huì)產(chǎn)生模糊。
如果要得到清晰的較粗線條，可以按照如下左圖那樣定義圖案，建立1×3的透明圖像，并將其中的2/3填為黑色，這樣就得到2倍粗的線條了。如果想增加線條的間隔，就將1×3透明圖像的1/3填為黑色，如下中圖。更粗或間隔更大的掃描線都可參照這個(gè)方法制作。
也可以嘗試使用其他灰度色或彩色來(lái)制作掃描線，如下右圖�？纯磿�(huì)有怎樣的效果。在應(yīng)用具有灰度色或彩色圖案的時(shí)候，可以嘗試其他的圖層混合模式。
如果要制作豎直線條，定義的方法和上面是基本相同的，這里就不再介紹。

如果是定義斜線，可參照如下左圖和右圖(均放大為1600%，實(shí)際每一個(gè)方塊為1像素)。左邊的斜線平鋪后較密集而右方的相對(duì)疏松。為什么不使用2×2的圖像來(lái)定義斜線呢？因?yàn)?×2的尺寸太小，制作出來(lái)的斜線實(shí)際上成了網(wǎng)點(diǎn)效果，大家可以想象并自己動(dòng)手做做看。

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

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

如果要定義不均勻的網(wǎng)格，那就是一種干字形(或土字形)�？梢詤⒄障伦髨D(1600%)。按照這種思路擴(kuò)展出去，可以將任意的水平和垂直線段作為圖案，如下右圖(1600%)。

定義網(wǎng)點(diǎn)圖案實(shí)際上和網(wǎng)格差不多。區(qū)別在于網(wǎng)格的線條是連續(xù)的，而網(wǎng)點(diǎn)是不連續(xù)的。如下左圖和中圖(1600%)是最典型的網(wǎng)格圖案。制作這類網(wǎng)點(diǎn)的訣竅就在于：定義奇數(shù)寬度的正方形圖案，在中間區(qū)域填充黑色。如果定義非正方形的圖案，則可以在水平和垂直方向形成不均勻的平鋪。
如果有時(shí)候需要圖案的第一個(gè)網(wǎng)點(diǎn)精確對(duì)應(yīng)圖像的左上角，可將位于正方形的左上角的那個(gè)像素填上黑色，如下右圖(1600%)。它的平鋪效果與第2圖是相同的。

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

0954大家會(huì)看到我們所定義的掃描線、網(wǎng)點(diǎn)和網(wǎng)格大都是黑色的，那如果有時(shí)候需要改變它們的顏色該如何做呢？難道都要用新顏色重新定義圖案？在這里考察一下大家對(duì)色彩調(diào)整部分的掌握程度：如何將灰度色變?yōu)椴噬�？把�?shū)翻到目錄去，答案在課程《#07：將灰度變?yōu)椴噬贰?br /> 雖然我們知道了方法，但在這里操作起來(lái)會(huì)發(fā)現(xiàn)問(wèn)題：無(wú)法對(duì)圖案填充層進(jìn)行色相調(diào)整。這是由于這類特殊圖層是無(wú)法應(yīng)用色彩調(diào)整的。解決的方法有兩個(gè)：
一是將圖案填充層?xùn)鸥窕�，即點(diǎn)陣化。方法是【圖層>柵格化>圖層】或在圖層調(diào)板中右鍵單擊填充圖層選擇“柵格化”。柵格化后的圖層就可以直接應(yīng)用各種色彩調(diào)整了。這種方法雖然簡(jiǎn)單，但弊端也是顯而易見(jiàn)的，那就是失去了特殊圖層靈活的可編輯性。
再就是使用“專屬色彩調(diào)整圖層”來(lái)改變顏色。如下圖，原先黑色的線條被色相/飽和度調(diào)整為了綠色。如果不指定為專屬調(diào)整層的話，色相調(diào)整就會(huì)對(duì)之下的背景層也造成影響。“專屬色彩調(diào)整層”實(shí)際上就是建立剪貼蒙版，它的建立方法參見(jiàn)操作速查0715。

此外，也可以使用純色填充層來(lái)改變線條的顏色。相比使用色相調(diào)整層來(lái)，使用純色填充層在選色上更直觀。將其與圖案層組成將貼蒙版后填充效果就只對(duì)圖案層有效。如下圖。
注意使用這種顏色填充方式有一個(gè)前提，那就是所使用的圖案必須是背景透明的，這樣顏色填充就只會(huì)針對(duì)圖案中有像素存在的部分有效。否則顏色填充將充滿整個(gè)畫面。

圖案層也可以配合蒙版來(lái)使用，如下圖使用了兩個(gè)圖案填充層，并用畫筆涂抹蒙版以控制圖案在畫面上的分布。此外，在圖層樣式中使用圖案也是很經(jīng)常的。