編者按：今天分享一個紋理背景教程，通常這類紋理圖案的特點是陰影和高光的過渡非常細膩，它的色彩游離于黑白灰之間。用這種只有黑白灰的氣質(zhì)格調(diào)打造的網(wǎng)站，會顯得別具一格，十幾分鐘的小教程，趁國慶練練手吧！

在我以前的文章《新手教程！教你利用AI打造精致無縫紋理圖案》中，聊到過關(guān)于兩種不同的紋理圖案。今天我們要學(xué)習(xí)使用AI制作其中一種紋理，而這種紋理不同于上一次教程里所教的紋理，它主要出現(xiàn)在網(wǎng)頁設(shè)計中，作為網(wǎng)頁背景而使用。通常這類紋理圖案的特點是陰影和高光的過渡非常細膩，它的色彩游離于黑白灰之間。用這種只有黑白灰的氣質(zhì)格調(diào)打造的網(wǎng)站，會顯得別具一格哦。

高手打造過的紋理資源打包：《10個設(shè)計師必備的頂尖用戶界面紋理》。

也許你不認為一個小小像素會發(fā)生巨大的作用，但接下來我們要做的將會改變你的看法。

一、單個像素圖

首先打開AI軟件，新建一個文檔，文檔大小任意。在視圖欄目下勾選“像素預(yù)覽”，勾選這一選項后，當(dāng)你將自己的圖片縮放到足夠大時，會出現(xiàn)像素格子，然后再勾選“對齊像素”，這樣圖案就會自動對齊像素，無需你再自己手動控制對齊了。

想學(xué)習(xí)更多小技巧？看120個實用技巧合集！

• 《極速上手！120個PHOTOSHOP技巧幫你加速設(shè)計（上）》
• 《極速上手！120個PHOTOSHOP技巧幫你加速設(shè)計（下）》

在繪制像素圖之前，或許你對這種微妙的背景紋理沒有太大的印象，在?subtlepatterns?這個網(wǎng)站里，你會看到大量的這類紋理圖。可以看到，當(dāng)一個紋理平鋪開來投入使用時的效果和單個像素圖的制作過程的視覺效果會有略微的差別。

掌握像素對紋理背景的影響是需要長期積累的，那么，就從現(xiàn)在開始，我們先來畫一個簡單的像素圖案吧。

畫一個4*4 px的正方形，填充色為淺灰色。

再畫上兩個2*1 px的長方形，填充為稍深的灰色，置放于下圖所示的方位。

畫上兩個2*1 px的長方形，填充為白色，置放于下圖所示的方位。

二、創(chuàng)建圖案

完成后，選中剛剛做好的這個圖案，然后點擊對象>圖案>建立。

這時，會出現(xiàn)一個圖案選項的屬性面板，而畫布則被圖案所填滿，你可以一邊在屬性面板中調(diào)整相應(yīng)數(shù)值，畫布上的圖案就會發(fā)生相應(yīng)變動。在此我用的是面板中的默認屬性。

而與此同時，在色板面板中就會出現(xiàn)新建的圖案。

完成后，點擊左上角的【完成】按鈕退出編輯。這時，左邊還有個【保存副本】的按鈕，如果你點擊了保存副本按鈕的話，這個新建圖案將作為副本再次被放入到圖案色板中，當(dāng)你編輯原圖案時，不會對這個副本造成影響，它類似于一種備份。

三、再現(xiàn)圖案

這時，圖案已經(jīng)做好了，在你的圖案色板中你會找到它。那么，這時你可以畫上一個較大的矩形，或任意的形狀，點擊圖案填充。

四、使用

現(xiàn)在，做好的圖案現(xiàn)在只能在這個文檔里使用，但如果你新建一個文檔后，圖案面板中不會有該圖案的出現(xiàn)，因此，你需要做的是保存該圖案。類似我剛剛畫好一個填充為圖案的矩形后，點擊導(dǎo)出為PNG圖片。再將該PNG圖片在PS中定義為圖案。

定義好圖案后，你用PS制作任何背景時都可以直接選擇填充圖案即可。

定義好的圖案也可以繼續(xù)返回AI進行修改，如果你想要紋理顯得更粗糙，可以通過增強色彩對比效果，以及拉大像素格子間的距離來實現(xiàn)。

后記

通過大量這類紋理的練習(xí)，你會慢慢掌握關(guān)于像素的真理。沒錯，是真理。像素是組成圖片的基本單位，而每個像素的性狀的改變都會影響到整個圖片的效果。細節(jié)決定成敗，也是說的這個道理。

一鼓作氣，再來三個教程！

用畫筆雕出一朵花來！
《AI教程！如何在ILLUSTRATOR中繪制典雅的復(fù)古花藝作品》

屬于年輕人的大膽海報教程！
《AI教程！教你用Illustrator設(shè)計俏皮大膽的瘋狂復(fù)古海報》

胖胖的可愛萌頭像超贊教程！
《AI教程！教你在Illustrator中創(chuàng)建胖胖的可愛卡通頭像》

原文地址：jianshu
作者：@飛屋睿UIdesign
uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量80萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：