2.5D插畫設計風格,已經越來越多的出現我們的UI設計中,H5動畫、APP閃屏 、廣告banner、ICON等等,那我們來看看2.5D到底是什麼樣的風格。

提示:

1. 在Ai中記得編組,並且多備份組;

2. 注意角度變化規則;

3. 注意相同元素寬高的統一;

4. 能使用剪切蒙版的就用剪切蒙版,便於修改。

第一步:拆分插畫,確定夾角角度

本插畫可以分為5個面,再加上其他元素。下面來看一下由正方形以夾角60度變化而來的基本面。「

左側面

繪製一個矩形,右擊,選擇「變換」,選擇「縮放」,數值如下圖1;選擇「變換」,選擇「傾斜」,數值如下圖2;選擇「變換」,選擇「旋轉」,數值如下圖3。

右側面

繪製一個矩形,右擊,選擇「變換」,選擇「縮放」,數值和左面的一樣;選擇「變換」,選擇「傾斜」,數值為30度;選擇「變換」,選擇「旋轉」, 數值為30度。

頂面

這個面有兩種數值設置,由正方形變化的展現形狀一樣,不等邊時就不一樣了。

第一種:繪製一個矩形,右擊,選擇「變換」,選擇「縮放」,數值和左面的一樣;選擇「變換」,選擇「傾斜」,數值為-30度;選擇「變換」,選擇「旋轉」, 數值為30度。

第二種:繪製一個矩形,右擊,選擇「變換」,選擇「縮放」,數值和左面的一樣;選擇「變換」,選擇「傾斜」,數值為30度;選擇「變換」,選擇「旋轉」, 數值為-30度。

第二步:打開Ai新建,繪製每個面的正面圖

①打開Ai,新建800x800px的文檔。

②先繪製右面的正面,不要在意現在的顏色,後面會美美的。

③運用第一步的變換規則,轉變成右側面圖。

④開始一個個處理,添加細節,使其立體起來,多利用門洞圖層的複製利用。

對有弧度的地方,其實很簡單,舉個例子,如下圖,然後將頂1和後面2合併再和部分3銜接上就行了。

⑤接下來用同樣的方法繪製其他面。

伸出的檯面還是按照前面的方法製作,然後複製此圖中的大門根據需要保留檯面的地方添加錨點擴大範圍,然後同時選中檯面右擊建立剪切蒙版,就得到下圖了。

然後再在最上面加上大門的漸變半圓就得到了下圖。

第三步:加小元素,調整完工

①製作小元素。

②將所有要素拼裝。

③調整完加上背景,完工。


推薦閱讀:
相关文章