視覺設計 ? 扁平化幾何花朵插畫教程

扁平化幾何花朵插畫教程

發表于: 視覺設計. 評論
Sponsor

今天為你們帶來的表演是「扁平化幾何花朵插畫」。接下來,就有請我插畫班的助教老師——娜娜開始她的表演!

這次插畫風格的研究員娜娜,今天帶大家一起研究扁平幾何花朵插畫,簡單易操作,上手既會,快動手跟我一起玩起來?。?!

扁平幾何花朵插畫教程

知識重點:扁平幾何花朵海報、幾何圖形、花紋裝飾

操作工具:數位板 | Photoshop | AI

操作難度:會使用工具就行,分分鐘拿下~

今天我們學習的是近兩年一直流行的扁平風插畫中的扁平幾何花朵插畫海報,造型簡單,具有很強的裝飾性。

*

扁平幾何花朵插畫海報賞析

//

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

圖片來自網絡,僅供賞析

按照國際慣例,在這開始繪制之前我們先來總結一下扁平幾何花朵插畫的特點:

1.花朵形狀左右對稱,使用幾何圖形概括;

2.多用平面中的重復、對比(大小對比、疏密對比)構成去設計花朵;

3.使用花紋裝飾,豐富花朵的設計;

4.色相豐富對比強烈;

5.排版以圖形為主,文字為輔;

扁平幾何花朵插畫教程

1.搜索圖片素材

找適合的參考圖片,因為想做出一個系列,所以我這里選擇做15支花朵的設計,讓這個花朵系列組合起來更豐富。

 

扁平幾何花朵插畫教程

TIPS:因為扁平幾何花朵存在左右對稱的特點,所以在找參考的時候我們盡量選擇正面對稱的花朵參考,方便進行概括。

2.繪制花朵形狀

因為花朵元素都是對稱的,所以在這個時候我打開了PS的對稱工具偷懶。

*對稱工具在2018以上版本才有,切換畫筆狀態,上面的小蝴蝶就是了~

 

扁平幾何花朵插畫教程

首先我們把參考圖透明度降低,在參考圖的基礎上用圓形、方形、三角形等基礎幾何形狀概括出花朵的輪廓,然后用幾何形二次設計細化花朵輪廓。

①第一朵花我選擇了圓形+半圓概括輪廓,再用圓形組合來對花瓣形狀進行細化

 

扁平幾何花朵插畫教程

②添加花朵的內部結構,調整幾何形狀的比例,讓花朵形狀更加精致

 

扁平幾何花朵插畫教程

TIPS1:不要被圖片局限住,舉一反三,可以用其他幾何形狀去概括,這里我用梯形+三角形概括,就得到了新的花朵。

扁平幾何花朵插畫教程

TIPS2:同理,在原有花朵輪廓上,用其他幾何形細化花瓣,在這里的選擇了方形+三角形的花瓣。

扁平幾何花朵插畫教程

其他的也是按照同樣的步驟去做,這樣我們就得到了下面的15朵花朵。

 

扁平幾何花朵插畫教程

3.添加花托、花梗、花葉

按照提取花朵輪廓的方法提取出3種花托、花梗、花葉的輪廓,這里我們只需要細化輪廓即可。

花托:為了讓花托的形式感保持統一,所以我這里都是用圓形來細化輪廓。

扁平幾何花朵插畫教程

花梗:用長矩形概括,只有粗細變化。

扁平幾何花朵插畫教程

花葉:用三角形和橢圓來細化輪廓

 

扁平幾何花朵插畫教程

TIPS:讓花托、花梗、花葉的形態≤3種形態,保持花朵設計的統一感同。

扁平幾何花朵插畫教程

4.添加花紋裝飾元素

給花朵加入條紋裝飾元素,豐富花朵的設計。

扁平幾何花朵插畫教程

TIPS:為了防止花紋添加過多,組合起來平均且雜亂,所以選擇其中8朵來添加花紋,其他的花朵不添加花紋裝飾。

扁平幾何花朵插畫教程

TIPS:統一的元素會讓花朵更有系列感

其他的也是按照上面的步驟去做,這樣我們我們最最最重要的草稿部分就完成啦~

 

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

線稿的繪制是在AI(illustrator)中完成的,當然在PS中也可以完成,但是我選擇對我來說更熟悉的AI完成~

①我們首先把草稿拖到AI(illustrator)降低不透明度用【形狀工具】選擇描邊,用圓形工具繪制出花瓣的輪廓

扁平幾何花朵插畫教程

【路徑查找器】合并輪廓

 

扁平幾何花朵插畫教程

橢圓工具繪制內部

 

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

②然后再繪制出花朵和裝飾圖案,畫兩個圓形概括花的輪廓。

扁平幾何花朵插畫教程

【路徑查找器】合并,拉圓角

扁平幾何花朵插畫教程

矩形旋轉45°,在【路徑查找器】點分割

扁平幾何花朵插畫教程

TIPS:按住Alt復制矩形之后,按住Ctrl+D等距復制矩形

刪掉多余的形狀

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

③繪制出花梗、花托、花葉。用矩形圓形畫出花梗和花托,矩形概括葉子形狀

扁平幾何花朵插畫教程

【直接選擇工具】選中錨點,刪除

 

扁平幾何花朵插畫教程

Ctrl+J連接錨點

 

扁平幾何花朵插畫教程

【直接選擇工具】選中錨點拉圓角,就完成啦~

 

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

這里有一個特殊花朵需要使用到混合器工具,首先和上面步驟一樣先繪制出花朵外輪廓和內部的輪廓,選中輪廓。

扁平幾何花朵插畫教程

使用混合快捷鍵:Alt+Ctrl+B。

扁平幾何花朵插畫教程

雙擊混合器工具調整合適的步數。

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

按照上面的方式繪制其他的花朵,線稿就完成了。

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

配色我選擇了復古配色,以綠色、藍綠色為主色,搭配黃紅輔助色形成對比,紫色做點綴色,讓視覺統一的同時更具有沖擊力。我們可以提前安排一下顏色的占比,主色大概占到65%,輔助色20%,點綴色15%。

扁平幾何花朵插畫教程

去掉描邊,吸取色卡的顏色,就得到了完整的花朵~~

扁平幾何花朵插畫教程

按照上面的方法制作色卡,得到更多配色方案。

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

扁平幾何花朵插畫教程

1.單個圖形排版

(1)花朵排版

在排列單個花朵時,將花朵放大,撐起版面

扁平幾何花朵插畫教程

TIPS:花朵可以居中、居左、居右排列,選擇2-3個排列位置,讓排版形式更加豐富。

(2)加文字

根據空缺的位置,把文字信息,放置在版面中。

 

扁平幾何花朵插畫教程

2.系列圖形組合排版

(1)組合花朵

在排列花朵的時候垂直排列,高低錯落做出起伏變化,然后花朵做出大小變化,讓組合更有層次。

扁平幾何花朵插畫教程

TIPS:在組合花朵的時候占到海報的5/4的空間,為文字留出排版的空間。

(2)加文字

先將我們的文字信息,放置在版面中,然后根據空缺的位置,哪里需要放哪里。

扁平幾何花朵插畫教程

duang duang ?duang到這里我們畫面就繪制完成啦~~撒花~~

來看看效果展示~

扁平幾何花朵插畫教程

本文的扁平化幾何花朵插畫教程就介紹到這里,里面有很多使用的AI軟件小技巧,可以幫助大家提高設計效率,大家在實踐中可以試一試,真的很不錯哦!

來源:胡曉波工作室 (ID:ziyou-design)
推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }