把一些漂亮的圖形做成圖案，使用時直接填充即可，但是前提是要把這些圖案做成無縫圖案，那么怎么制作成無縫的填充圖案呢？今天就來教大家怎么做出無縫拼接的填充圖案。

幾何紋理應(yīng)該算作是頗具現(xiàn)代感的裝飾風(fēng)格，但將幾何形狀經(jīng)過創(chuàng)造性的疊加，就會組合成新的紋理圖案。這種圖案略帶復(fù)古風(fēng)味，我們可以運用這些復(fù)古的紋樣打造無縫圖案，很多時候在傳統(tǒng)風(fēng)格的設(shè)計時，作為素材使用。今天@飛屋睿UIdesign 給同學(xué)們來個教程，收！

中國的傳統(tǒng)紋樣有很多值得借鑒的地方，于是我們從傳統(tǒng)紋樣的圖片中尋找創(chuàng)作靈感。

這些紋樣相對比較繁復(fù)，我們在創(chuàng)作時可以稍微將其簡化。你也可以在白紙上畫草圖，或者直接用手繪板畫出自己的構(gòu)想。

在開始動手繪制圖案前，我們要大致對成品進(jìn)行一個總體規(guī)劃，即逆向推理。這聽起來是偵探小說的環(huán)節(jié)，其實在設(shè)計中也必不可少。你可以首先在大腦中構(gòu)想出一個理想效果，然后對這個效果進(jìn)行反推。

通常我把整個設(shè)計過程簡化為“構(gòu)圖”“細(xì)節(jié)處理”和“最終效果”這三個大環(huán)節(jié)，其中“構(gòu)圖”部分包括了對整體版式風(fēng)格的表現(xiàn)方式的選擇，細(xì)節(jié)處理就包括了配色、字體設(shè)計、排版等，而最終效果包括最終的細(xì)部調(diào)整等。這三個環(huán)節(jié)是一環(huán)緊扣一環(huán)前后相繼的，然而你也可以采用先通過想象最終效果，再來進(jìn)行構(gòu)圖和細(xì)節(jié)處理的順序。

比如在本例中，我的最終效果紋理是這樣一個簡單構(gòu)想。紋理由分別由大中小三個圖案組成。它們在單個紋理的構(gòu)圖是這樣的。

有個大概的構(gòu)圖，我們就可以動手開始繪制圖案了。

先讓我們繪制最小的圖案。打開PS，新建一個250*250px的文檔。打開文檔的標(biāo)尺，并運用輔助線，將其定位到中心的位置。然后將前景色設(shè)置為紫色，填充紫色背景。如下圖所示。

以中心點的位置為圓心，用橢圓工具畫一個圓。這個圓保持填充為無，線條為1px，線條顏色為白色。

在這個圓的中心畫上許多小圓，這些小圓由一個作為花心，四周包圍，組合成一個簡單的花型。這也是最簡單的花型，取自蓮花花心的創(chuàng)意。

再畫上兩個長形的橢圓，讓它們擺成十字。放在剛剛的圖形上方，使之有交疊，這樣讓圖案更豐滿。

運用多邊形工具，設(shè)置邊數(shù)為3，放在正上方，然后復(fù)制這個三角形，垂直對稱放置于正下方。將這兩個三角形復(fù)制后，再旋轉(zhuǎn)30度，根據(jù)這樣復(fù)制旋轉(zhuǎn)的過程操作幾次就能得到一個由三角形圍繞而成的圖案了。

這時運用直接選擇工具，選擇其中一個三角形的錨點，將每個錨點對齊像素網(wǎng)格。這樣做的目的是為了讓圖形保持精細(xì)，利用像素網(wǎng)格是一個不錯的選擇。像素網(wǎng)格是在當(dāng)你放大圖形能看到像素的時候出現(xiàn)的，如果還沒有出現(xiàn)，請在【視圖>顯示>像素網(wǎng)格】中勾選打開。按照這一方式將所有的三角形的錨點都與像素網(wǎng)格對齊。

這是縮放到100%大小的外觀

我們的小圖案繪制完成后可以將上面的圖層編為一組，將其隱藏。

中型的圖案比小型圖案稍微復(fù)雜，因此我們用了PS自帶的一個矢量圖形作為中心。圖形依然是保持空白填充，白色描邊1px。

仍然是從自帶的矢量圖形中找到心形，然后將心形擺放在四角。同時用兩個矩形加以重疊，其中一個矩形旋轉(zhuǎn)45度。矩形為空心填充，描邊是白色描邊2px。

這時的圖形會顯得中間的位置有些空，因為是復(fù)古風(fēng)格，那么花紋盡量保持豐滿，因此我再添加上一圈橢圓，模擬花朵的形狀。然后再添加兩個重疊的小圓圈在每個矩形直角的頂部作為裝飾。外面的小圓圈的描邊線條為2px，內(nèi)部的為1px。

請記得檢查矩形的錨點是否和像素網(wǎng)格對齊。還是縮放到正常大小，將我們的中型的圖案編為一組，將其隱藏。

大型圖案的繪制

大型的圖案當(dāng)然是最為復(fù)雜的，但其實在演示了上面兩個圖案的繪制過程后，大家會發(fā)現(xiàn)其實這些圖案都是由非常簡單的圖形所構(gòu)成的。運用簡單的幾何圖形就能創(chuàng)造出某種復(fù)雜美。

還是來繪制中心。這個中心的位置采用兩個圓組成，再在圓心中用橢圓組合一朵花型，大家可以仔細(xì)觀察發(fā)現(xiàn)花瓣是梭型的，這需要你先畫好長條的橢圓，然后利用轉(zhuǎn)換點工具點擊兩端對齊的錨點，這時橢圓就變?yōu)榱怂笮汀?/p>

在圓的外部再用小圓組合圍繞，你可以先畫一個圓，再對稱放一個圓，然后把這個兩個圓旋轉(zhuǎn)30度，這樣重復(fù)這一步驟就能形成圍繞的圖形。然后用同樣的方式畫三角形。三角形的錨點對齊像素網(wǎng)格。

再畫上兩個大圓，描邊為2px，這時大圓外再在四角位置放置小圓，小圓內(nèi)用上自帶的矢量圖形，放置其中。

這時再增加外圍的更大的圓圈，這個圓圈的描邊為4px，由于這里我們不希望這個大圓遮擋四角的裝飾圓，因此我們可以用蒙版，將與裝飾重疊的部分抹去。這樣有一個層次感，讓畫面更為豐滿。

這里的幾何圖形的組合是非常隨機(jī)的，只要定好了總的基調(diào)，就能非常自由地組合各種圖案。讓我們看看原大小的成品。

定義無縫紋理

這時我們把小型的圖案打開，放置于四邊中點的位置。它的中心要剛好在畫布四邊的中點上。

中型圖案放置于畫布的四角，它的中心剛好和四角頂點對齊。

大型圖案放置于畫布中央。這時這個無縫圖案就組合好了。

關(guān)掉背景圖層，然后來到【編輯>定義圖案】，保存為“復(fù)古紋理”。

這時我們的復(fù)古無縫紋理就制作完成，大家可以在新建文檔中使用查看紋理效果。比如在任意的圖層上方填充圖案，選中這一圖案就會出現(xiàn)我們的作品。

復(fù)古紋理運用在與傳統(tǒng)文化相關(guān)的設(shè)計中非常適宜，這時需要注意其他出現(xiàn)的元素也需符合這一風(fēng)格，比如字體也盡量保持中式風(fēng)格，但同時也需要簡潔美觀。紋理的繁復(fù)和簡單全憑自己創(chuàng)造，這一過程本身也是一種享受。