AI網頁紋理背景制作系列（一）：點狀紋飾

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

 

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

一、單個像素圖

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

 

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

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

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

 

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

 

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

 

二、創(chuàng)建圖案

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

 

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

 

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

 

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

 

三、再現圖案

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

 

四、使用

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

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

 

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

后記

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