萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Adobe Illustrator教程 >> Illustrator制作精致無縫的背景圖案

Illustrator制作精致無縫的背景圖案

   將某個場景的圖案,按照隨機的方式羅列整個畫布上,這就形成一種紋理式樣的圖案。而這類紋理圖案有兩種表現,第一種是細微的質感紋理,這類紋理大部分運用到網頁的背景上,它顯得比較低調,主要色調為黑白灰;第二種就是以圖案為獨立細節進行隨機散布的圖案紋理,如下圖。

Illustrator制作精致無縫的背景圖案 三聯

  此類圖案紋理能鋪開整個畫布,直接強調主題,雖然直接運用網頁布局的很少見,但也能在制作某個廣告圖或者某個特別修飾的場景裡使用。

  今天我們要學習的就是第二種以圖案為獨立細節的圖案紋理,早已有類似thepatternlibrary 這樣的網站給你提供了精美的圖案紋理下載,但是設計時與實際需要的細節還是差之毫厘,那麼,自己動手打造一張無縫的圖案紋理就顯得至關重要。

  一、制作准備

  1、AI軟件;

  2、已完成的手稿圖;

  3、配色方案;

  二、畫上細節圖

  1、梳理細節

  這裡細節圖是隨機圖案組成的“細胞”或“肌理”,那麼,肌理的美感度會很大程度上影響到最終效果。所以,我們在這裡會要求大家先完成手稿。

  手稿可以任意發揮,根據你要創作的主題來畫出你認為最適合“出場”的細節。手稿可以用鉛筆在紙上繪畫,也可以自己用wacom畫。這裡我用的方式是利用wacom直接繪畫。

  注:wacom是手繪數位板的別稱

  這裡要強調的是配色方案,因為細節圖是由多個物件所組成,因此,會涉及到多種顏色,而色彩的搭配就十分重要,因此充分的准備工作需要的是一份配色方案,在繪畫時就能輕松運用上適合的顏色,也不會因為色彩的凌亂而頭痛了。

  給大家先看看我准備的配色方案:

  這裡我要做的是日式古典的紋理,那麼無論是配色還是物件的選擇都會傾向日本古典的風格。

  2、繪制圖案

  從日本旅行的照片中,選擇了幾個作為典型的日本印象的物件構圖:櫻花、燈籠、矮竹、扇子、石頭。

  下面我將一一采用AI軟件進行繪制。關於物件的繪制,這裡相信大家會采用各自喜歡的畫法,我將省略實際繪制的過程,以保證每個讀者創作時更加開放自由。AI矢量軟件對於幾何圖形的構造有足夠的優勢,因此繪畫時可以盡量選擇運用幾何圖案進行巧妙的組合、裁切等方式。

  我對於AI軟件繪制圖形的使用感受是,這就像我們小時候做過的剪紙手工作業一樣,運用基本的幾何圖形,手腦並用,可以拼貼出任何具形的圖案。而軟件的精細程度和各種效果的運用就可以讓整個圖案達到出彩的效果。

  在繪制的過程中可以先暫時用隨機的顏色搭配,待所有物件都繪制完成組合在一起時,再重新根據配色方案調色。

  櫻花的繪制過程:

  日本扇子繪制過程:

  燈籠的繪制過程:

  矮竹的繪制過程:

  石頭的繪制過程:

  三、構圖與無縫處理

  將所有物件都繪制完成後,我們開始進行組合構圖,最好玩的時候到了!

  AI新建一個大小適宜的文檔,將剛剛畫好的物件都放置於畫布上。因為繪制時我們並沒有考慮色彩的整齊搭配,而現在需要做的就是根據我們的配色方案調整色彩。

  這是調色前:

  根據配色方案調色後:

  然後選中所有的物件,點擊對象>圖案>建立。這時會出現圖案創建選項面板,你可以在這個面板中進行選擇調試,做出你最想要的紋理圖案。比如復制新的櫻花,增加圓點裝飾,降低某些細節的透明度,重新上色等。

  這裡需要注意的要點是:

  1)你的圖案創建面板設置中,為了保持圖案為無縫,這裡的拼貼類型要選擇“網格”

  2)我在這裡設置的圖案大小是300px*300px,以確保每個物件都能完美地展示出來

  3)盡量不要留有空白,這樣能使整個圖案顯得飽滿豐富

  你將在這裡馬上看到整個圖案的最終效果。完成後點擊左上角的完成後。你將在色彩面板中看到你剛剛創作的無縫紋理圖案,雙擊它會彈出設置面板,你還可以繼續修改。

  這時,那麼這個無縫紋理圖案就做好了。

  四、運用

  你可以試著畫上一個300px*300px矩形,這個矩形的大小與剛剛設置的圖案大小一致。然後選擇圖案填充後,導出為一個png格式的圖片。

  保存PNG圖片有個好處是保留了透明背景,那麼這個圖案的運用將會更加靈活,因為底色可以根據不同的情況而做出改變。在PS軟件中定義好該圖案,實際運用時增加漸變背景或其他純色背景,如下圖。

  五、結語

  制作紋理圖案的過程中,你要訓練的是自己對整個畫面的美感平衡的能力,設計是對每個素材之間關系的平衡,包括它們的色彩、距離、結構……而這些都需要你步驟三中通過嘗試而獲得一個最佳點。教程裡我沒有再進一步美化這個圖案,但你要記得設計是沒有終點。

copyright © 萬盛學電腦網 all rights reserved