萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Adobe Illustrator教程 >> AI教你創建細膩的網頁紋理背景

AI教你創建細膩的網頁紋理背景

 AI教你創建細膩的網頁紋理背景 三聯

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

  一、單個像素圖

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

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

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

  二、創建圖案

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

  三、再現圖案

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

  四、使用

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

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

AI新手教程!手把手教你創建細膩的網頁紋理背景

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

  後記

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

copyright © 萬盛學電腦網 all rights reserved