AI網(wǎng)頁(yè)紋理背景制作系列（一）：點(diǎn)狀紋飾

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

 

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

一、單個(gè)像素圖

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

 

在繪制像素圖之前，或許你對(duì)這種微妙的背景紋理沒(méi)有太大的印象，在subtlepatterns這個(gè)網(wǎng)站里，你會(huì)看到大量的這類紋理圖?？梢钥吹剑?dāng)一個(gè)紋理平鋪開(kāi)來(lái)投入使用時(shí)的效果和單個(gè)像素圖的制作過(guò)程的視覺(jué)效果會(huì)有略微的差別。

掌握像素對(duì)紋理背景的影響是需要長(zhǎng)期積累的，那么，就從現(xiàn)在開(kāi)始，我們先來(lái)畫(huà)一個(gè)簡(jiǎn)單的像素圖案吧。

畫(huà)一個(gè)4*4px的正方形，填充色為淺灰色。

 

再畫(huà)上兩個(gè)2*1px的長(zhǎng)方形，填充為稍深的灰色，置放于下圖所示的方位。

 

畫(huà)上兩個(gè)2*1px的長(zhǎng)方形，填充為白色，置放于下圖所示的方位。

 

二、創(chuàng)建圖案

完成后，選中剛剛做好的這個(gè)圖案，然后點(diǎn)擊對(duì)象>圖案>建立。

 

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

 

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

 

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

 

三、再現(xiàn)圖案

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

 

四、使用

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

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

 

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

后記

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