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

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

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

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

一、單個像素圖

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

想學習更多小技巧？看120個實用技巧合集！

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

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

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

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

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

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

二、創建圖案

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

這時，會出現一個圖案選項的屬性面板，而畫布則被圖案所填滿，你可以一邊在屬性面板中調整相應數值，畫布上的圖案就會發生相應變動。在此我用的是面板中的默認屬性。

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

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

三、再現圖案

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

四、使用

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

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

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

后記

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

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

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

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

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

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