【 Illustrator教學】Illustrator設計細膩的網頁紋理背景教程 | PS筆刷工廠-

Illustrator設計細膩的網頁紋理背景教程

這一次的教學是屬於矢量教程領域中的Illustrator教程的相關教學。

文章出處是來自優設的矢量教程類文章，寫教學的作者是飛屋睿UIdesign，感謝飛屋睿UIdesign提供Illustrator教程的實作教學。

教學大綱:

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

Illustrator教程教學開始

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

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

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

一、單個像素圖

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

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

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

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

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

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

二、創建圖案

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

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

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

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

三、再現圖案

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

四、使用

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

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

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

後記

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

— —

文章永久連結為: Illustrator設計細膩的網頁紋理背景教程