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

我們已經(jīng)知道，用來(lái)填充的圖案具有連續(xù)平鋪的特性，當(dāng)在一個(gè)較大的范圍(大于圖案)內(nèi)填充圖案的時(shí)候，會(huì)產(chǎn)生上下左右彼此銜接的效果?，F(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è)圖案本身很大，以至于比目前圖像的畫(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的顯示器上顯示，即使瀏覽器窗口最大化，寬度也不可避免地減少。
我們將在今后的課程中闡述如何解決這個(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)畫(huà)制作中，如下圖是一個(gè)順時(shí)針旋轉(zhuǎn)箭頭的動(dòng)畫(huà)過(guò)程，每幀的停留時(shí)間為1秒。注意第1幀與第9幀的箭頭角度相同，這樣在播放的時(shí)候，箭頭在這個(gè)角度就會(huì)停留2秒，看起來(lái)就好像頓了一下似的，造成動(dòng)畫(huà)的不連貫。

前面我們所制作的無(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ù)圖案了。平鋪效果如下右圖。