★ February 13th, 2009 製作無接縫的重複背景
在網頁製作時常要用到重複背景圖，如果只是單純的用 CSS 重複一個圖形，畫面會比較單調，如果能把圖形製作成無接縫的形態，放在背景時會比較活潑。
無接縫不只可用在簡單的圖形，同樣的技巧可以做出這種看似複雜的圖形。（下圖是未公開的海海人生桌布，但是我這樣一講等於公開了。）
以下步驟是我在「只要 $4500，溫柔大哥哥帶你看透 UI design！」的第二堂課提到的技巧，想報名可以找 Ericsk。
設計好你的圖形
我用 Illustrator 畫圖，再放到 Fireworks 裡處理，你可以用自己喜歡的繪圖軟體，基本上 1997 年的繪圖軟體就可以做到同樣的事了。
圖形只要大致上維持正方形的輪廓就好了。在中間可以隨便亂畫沒關係。
為了達到最好的效果，圖案間可以有凸起和凹下的部份，但要讓他們對稱。例如圖案上方如果是凸出來的，那麼圖案下方就要凹下去，左右也一樣。
複製圖形並擺成大的方形
接下來將你的圖案複製成四個，然後擺成四方形。如果你的圖有凹凸部分，這時候他們就會結合在一起，看起來像一張大圖。
圖形間可以有稍微重疊，排的緊密一點才不會有空隙。擺成一個方形後，我們就可以在中央區塊切出一塊無接縫的圖形。
下圖是擺好的圖形，他們是有部分重疊的，重疊部分也要對稱。
切出無接縫區塊
接著，我們要找出這一大塊圖形重複的規律，請開啟繪圖軟體的尺規（Ruler）工具，你可以從用滑鼠從尺規中拉出水平與垂直的導引線。
準備好尺規之後，我們要找出圖形重複的交點。這個交點大約在原來圖形的正中央，請先隨意拉個垂直與水平線固定在你認為是焦點的地方，接下來，找到第二張圖的同樣位置，再拉個水平或垂直線對齊到同樣的地方。
例如我選的大約是圖中央的「u」字左下角。等你拉完導引線後，四個圖形中的每個「u」都會有兩條導引線相交，而且相交的位置看起來必須一模一樣的，這樣圖形重複時才會接的起來。
切割圖片
把四條導引線中間的區塊切下來，就是你要的背景圖了。這個步驟裡你可以做最後的加工，例如移動圖形中央部分，調整顏色等等，只要不更動到邊緣裁切部分就好了。
這個技巧好像是設計師的第一堂課會上到的，但其實我最近才學會，感覺次序都亂掉了啊…。