前言:毛線編織紋理中的一針一線,最能傳達溫暖、體貼和一種溫馨的親和力。織物的質感如果運用在這類設計中將會非常出彩。今天我們就來學習在AI中如何掌握這一技法,這個技法的精髓的就在於對於細節和整體的把控,以小見大。而為其增加魅力的是織物上的圖案。
作者簡介:飛屋睿,飛屋設計工作室(www.ifeiwu.com )設計師、創始人。自由UI設計師。出版作品《輕設計——網頁設計中的輕奢主義與禪意思維》。
你將會學到:
1、運用變形工具對基礎型的變換;
2、利用變換工具來排布紋理;
3、通過改變色彩的方式進行圖案的安排;
最終效果圖
靈感來源
此教程靈感來自於TUT+教程文章,在原文之上有改動和增刪
從基礎形開始
通過觀察紋理,我們都會發現,紋理圖案是由一大片相同的小圖案所鋪排構成。我們索性就把這個小圖案稱為“基礎形”。下麵我們就來先繪製一個這樣的基礎形。
STEP 01
讓我們打開AI,新建一個400*400的文檔,在這個文檔中繪製一個橢圓。關閉描邊,將其填充為藍色。
STEP 02
選中這個橢圓,進入【效果>變形>旗形】,在打開的變形選項中,在選中水平方向的基礎上,將彎曲強度設置為20%。這時對形狀進行變形處理,然後進入【對象>擴展外觀】,將其擴展為路徑。
STEP 03
將這個形狀進行複製,複製後的形狀再略微縮小,選中縮小後的形狀,將其透明度設置為75%,圖層混合模式改為“濾色”。這個過程主要是為了體現織物紋理中的高光部分。
STEP 04
再給織物增加“線”的痕跡,以便讓整個造型看上去更為擬真。線條的畫法如下:
1、先用橢圓工具畫一個非常扁的橢圓;
2、運用錨點工具點擊左右兩邊的錨點,使這個橢圓變為梭形;
3、再複製出4個梭形,將其縱向排列並且將上下兩個梭形變得略短;
4、將它們編為一組;
STEP 05
選中上一步所繪製的線條組,進入【效果>變形>旗形】,在打開的變形選項設置中,將彎曲參數設置為25%。變形後的形狀進行擴展,擴展後將其混合模式設置為正片疊底,透明度降至52%,將其置於圖層上方。
STEP 06
將所繪製對象編組進行複製並對稱變換,變換後將其兩者再次合並為一組,這樣一個基礎形就完成了。
基礎形的變換:生成紋理
就像我們的物質世界,無一不是細胞所構成。基礎形這個“細胞”一旦製作完成,那麼就要開始構建我們的紋理了。
STEP 07
先將這個基礎形縮小,縮小的幅度和整個畫板相比——大家可以參考下圖。基礎形在畫麵的最左下角。
STEP 08
保持選中這個基礎形時,進入【效果>扭曲和變換>變換】,在變換效果參數麵板中,“移動”這一欄中對垂直的參數進行設置,我在這裏設置為-6px,副本設置為65。
參數並不是我事前就了然於胸的,隻要你勾選預覽,然後對這兩個參數進行逐一的調整,看著最終效果進行調試即可。目的是為了讓基礎形次序排列。
STEP 09
接下來是橫向的變換,運用的是同樣的工具。隻是這一次是在水平方向的參數上做調整。由於這是對整個垂直下來的幾十個副本一起做橫向變換,因此任務會比較大一些。你的電腦也許會出現遲滯。這個你可以慢慢來,參數調整時可以一個數字一個數字慢慢地加,多一點耐心。
STEP 10
這時再為整個畫布添加一塊背景,這塊背景為藍色,色彩可以稍微比目前所使用的藍色更深一些。然後將其置於圖層的最下方。這時你還可以將上一步所做的紋理也都進行擴展。特別仿真的織物紋理就製作完成啦~
色彩積累圖案
想要讓這片美麗的織物上出現圖案,有很多種方法。今天我們隻分享其中一種,叫做色彩積累。這個方法的原理就是完全模仿真實的在編織毛線的時候製作圖案的方法,在圖案的部分運用不同色彩的線,在此,每一線就是一個基礎形,所以也就是通過改變基礎形的色彩,反複積累成為圖案。
STEP 11
將【STEP 09】中所擴展以後的對象取消編組(選中後連續進行兩次取消編組),直至它能分別獨立出一個個基礎形。這樣以便為下一步改變色彩做準備。
STEP 12
這時就可以開始進行圖案積累了,其過程和織毛衣沒什麼差別,就是改變其中某一針的色彩。你目前需要確定的是你的圖案是什麼,這裏我將用一個鹿的圖案,當然這部分你可以任意發揮你的想象。
改變色彩很簡單,選中其中一個基礎形,然後選擇另外的色板就可以了。這裏的色彩選擇,亮度最好不要過高,否則本身基礎形中的高光將會看得不那麼明顯,看上去會顯得扁平化了。
先完成鹿頭的部分。
STEP 13
再接下采用同樣的方式完成鹿的身體部分。
圖案繪製成功~
最終效果
做成圖標隻需要在其全部對象的上方繪製一個圓角矩形,然後選中全部,建立剪切蒙版。
最終效果圖:
討論一下平麵設計的基礎是什麼
前幾天,有人留言問我說“你常常強調基礎,那麼到底什麼是基礎呢?”。他的問題突然讓我有點茫然。為什麼茫然?因為要總結起來,設計的基礎這個主題的體量太大太大了。一時無法貢獻一個標準答案,而且它的組成部分,有的甚至看似和設計不大相關,比如文學作品、電影欣賞……你能說它們對你的設計完全沒有幫助嗎?
然而,如果僅僅從學校老師教給你的才算是基礎的話,那麼你學到的最多也隻能是比較有限的“知識和技巧”而已。而我的感受是,當你不斷往前行走,你會發現你會遇到很多“力不從心”的時刻,這時,也許聰明的設計師會察覺,不是你不夠努力,而是你的“基礎”支持不了你走這麼遠。
也許下一篇文章,我會把一個設計師應該擁有的“基礎”這個話題做出一個擴充和完善,但是,我一個人的力量很有限。我希望你能把你認識到的設計師所應該有的“基礎”通過下麵這些方式告訴給我,不要僅僅局限在學校裏的課程安排上麵。我將會發布一篇集合大家共同之力所寫的文章喲~
聯係方式:
新浪微博:@飛屋睿UIdesign
微信公眾號:飛屋設計微雜誌
郵箱:raysimon@126.com
QQ:2730656380