如果您喜歡『PS學習網』,請推薦給您身邊的朋友!本站永久域名:风暴魔域野外首领地图 www.efaby.icu

风暴魔域隐雾沼泽野外首领位置:AI繪制立體積木搭建的城市交通插畫圖片

當前位置 : 风暴魔域野外首领地图 > 矢量繪圖 > 正文來源:網絡作者:網絡時間:2019-05-13人氣:

风暴魔域野外首领地图 www.efaby.icu 各位愛學習的同學,這次分享一個2.5D插畫的教程,希望在看了這篇文章之后,各位無論工作中還是學習中都可以去嘗試些新的東西。

這次分享一個2.5D插畫的教程,主題是關于咱們學UI的。希望在看了這篇文章之后,各位無論工作中還是學習中都可以去嘗試些新的東西。不被吐糟設計沒有新意巴拉巴拉,還有希望各位同學在臨摹的基礎之上可以有更多的創意,因為一旦有了創意并被認可,你會記憶猶新。甚至邁入一個新的階段。

完成這幅插畫需要掌握的工具有PS和AI即可,工具就是那些,PS中的基本的一些工具操作AI中的3D工具?;故且磕宰酉牖嬡緩笥霉ぞ呷ケ硐?。

AI繪制立體積木搭建的城市交通插畫圖片

1.這種插畫就像堆積木一樣,我們最先搭建最大的主體部分。因為插畫顏色特性在搭建之前,先新建一個畫板,尺寸1920像素寬,高度800像素左右即可,分辨率72。數值與效果如下圖:

AI繪制立體積木搭建的城市交通插畫圖片

AI繪制立體積木搭建的城市交通插畫圖片

加上主體之后,如下圖

 

AI繪制立體積木搭建的城市交通插畫圖片

1.1 下面將詳細講解主體部分的實現手段,(因繪制過程中AI中的3D文件丟失,故接下來的講解具體數值不準確,僅演示,數值可自定義)除主體外其它個例實現手段基本一致。

打開AI-新建空白畫板,使用圓角矩形工具繪制圓角矩形。

 

AI繪制立體積木搭建的城市交通插畫圖片

 

1.2 在AI中使用直接選擇工具(快捷鍵A)選中錨點,分批轉換為直角,點擊左上角轉換,如圖:

AI繪制立體積木搭建的城市交通插畫圖片

1.3 選擇工具選中對象,執行效果-3D-凸出和斜角,如圖:

AI繪制立體積木搭建的城市交通插畫圖片

 

1.4 選擇工具選中對象,執行對象-擴展外觀,并完全取消編組(可能需要執行多次)。接下來Ctrl+C復制至PS中Ctrl+V粘貼為形狀圖層,可編輯,不必在意顏色。如下圖:

AI繪制立體積木搭建的城市交通插畫圖片

1.5 使用快捷鍵A,路徑選擇工具可選中單個面的所有錨點,選中之后使用快捷鍵Ctrl+Shift+J可提取單個面至單獨圖層(多出來的背面看不到的面也可刪掉),這樣就實現了可單個面上色。顏色還需要自己把握,自己發揮吧~

如下圖使用漸變填充后的基座,關于如何將圖層另一邊進行漸漸隱溶于背景相信有同學會有疑問。我習慣使用蒙版來進行操作,將圖層或者組加上圖層蒙版,選中蒙版,按快捷鍵G漸變工具調節至黑白線性漸變,然后在畫面中主體圖層拖動即可實現一端透明。后面部件大量使用,如圖:

AI繪制立體積木搭建的城市交通插畫圖片

1.6 繼續細化主體基座,復制一層主體頂蓋并置于圖層面板頂層,適當往上移動,這時會有兩個頂蓋。直接使用鋼筆工具勾畫形狀,剪切蒙版于下層頂蓋,下層頂蓋不需要賦予漸變,繪制三個形狀分別賦予不同顏色,使用顏色區分開各個角度不同的受光,豐富色彩,高光部分為底層頂蓋本身顏色。

AI繪制立體積木搭建的城市交通插畫圖片

1.7 繼續往下走嘍~看到紫色的形狀了么~這個形狀完全可以使用頂蓋復制改下顏色就可以啦~無難點,稍微講究點的是顏色要盡量調到位。

AI繪制立體積木搭建的城市交通插畫圖片

1.8 這一步需要完成的是為紫色盒子加上幾個爪子~并在主體上挖幾個孔~無難點,下面放大圖來參考??梢災苯郵褂酶直駛嬤?,不必麻煩。使用輔助線輔助畫,每個夾角60°如圖:

AI繪制立體積木搭建的城市交通插畫圖片

AI繪制立體積木搭建的城市交通插畫圖片

1.9 這一步需要完成的是為主體通上道路以及主體周圍的城市裝飾。城市的基本形態繪制,有把握可以直接使用鋼筆工具繪制各個面加上漸變即可,也可以重復使用AI中的3D工具進行準確繪制。

道路的繪制也是很簡單,略有難度的是顏色的把握,方法在上面講主體的時候也講過了,這一步最需要進行多次的嘗試,達到更好的效果。

AI繪制立體積木搭建的城市交通插畫圖片

AI繪制立體積木搭建的城市交通插畫圖片

 

這一步繪制完成之后大體塊的繪制完成了,已經完成了一大半了。加油~歇歇眼~接下來豐富場景細節。

AI繪制立體積木搭建的城市交通插畫圖片

2.1 這一步任務是細化場景,讓場景看起來更加豐富。在這一步也可以發揮自己的腦洞,加什么都可以嘍~我在這里加入了,學UI網的logo、五周年紀念、對話氣泡、流星、梯子。

①其中學UI網的logo需要用鋼筆工具摳出來在AI中執行3D,在PS中調整顏色即可

②對話氣泡需要將形狀繪制出來AI中執行3D(轉化為3D時如果不是一個圖層記得打組),如果覺得不好看或者角度不對嘗試水平翻轉一下,說不行會有意想不到的結果呢、

③五周年的數字可以找一個好看的字體同樣在AI中擴展外觀后進行3D轉換、梯子直接就在PS中繪制即可,這個過程可能有些繁瑣,同樣也是最需要細心的地方。如下圖示意:

AI繪制立體積木搭建的城市交通插畫圖片

2.2 仍然是細化、豐富加入你喜歡用的軟件吧~這一步需要注意的是近的亮些遠的暗些,實現方法老一套,如果不會自己再仔細揣摩揣摩~實在不會可以在加小編的V:Cy-mufeng(安然無恙)~

AI繪制立體積木搭建的城市交通插畫圖片

2.3 加入各種各樣的小人,讓整個場景動起來~出來排隊樓~

AI繪制立體積木搭建的城市交通插畫圖片

2.4 最后一步!主角出場,UI作業網。像是瀏覽器頁面一樣承載著UI作業網頁面,體塊按照統一的透視角度來,就像堆積木一樣~字體同樣執行對象-擴展外觀-效果-3D即可,注意這里加的光芒。在大背景細節上加上星星,左右的兩個紫色的圓圈下面放出細節圖。如圖:

AI繪制立體積木搭建的城市交通插畫圖片

AI繪制立體積木搭建的城市交通插畫圖片

到這一步就完成了,可能有的同學覺得后面太快了,每一步都應該像講主體那樣細致,我覺得那樣就沒有什么意義了,何況所有的知識點基本在主體的步驟時都已經涉及到了。總有些東西需要自己想,這樣才有意義,必須去動腦動手實踐的才更有價值。

回頂部