DIST.39「Figmaを使ってベクターイラストを描く！」

Transcript

1. 00
   Figmaを使って
   
   ベクターイラストを
   
   描く！
   倉又美樹（まるみ）
   
   @nicoicon_design
   

   View Slide

2. 1
   倉又美樹（まるみ）
   
   @nicoicon_design
   Web/DTP/UIなどをやるデザイナー
   
   イラストを使ったデザインが好き
   
   イラストを描くのも好き
   
   IllustratorとFigmaを
   
   行ったり来たりする
   

   View Slide

3. 2
   イラストを描く時だいたいIllustratorなのですが
   
   Figmaでデザインする機会が増えてきました
   色調整などはFigmaで行うこと多し
   

   View Slide

4. 3
   LEVEL 1 植木鉢に花を咲かせる
   Figmaの「楕円」と「長方形」で描画する
   

   View Slide

5. 4
   前提：イラストは
   
   があればある程度描ける！！
   ●▲■の形
   楕円
   長方形
   楕円を変形
   楕円を変形
   

   View Slide

6. 5
   LEVEL 2 虹・雨・雲を描く
   これらすべてFigmaで描けます
   

   View Slide

7. 6
   構造はこんなかんじ
   

   View Slide

8. 7
   円グラフを描く要領で
   
   複数の円弧を重ねると虹が描けます
   ポイントは「円弧」
   

   View Slide

9. 8
   LEVEL 3 グラデーションでリアルめな表現
   「線形」「放射状」グラデーションは便利
   

   View Slide

10. 9
    いちごを拡大
    粒部分といちご本体の
    
    グラデーションで
    
    光を表現
    

    View Slide

11. 10
    いくらの粒を拡大
    「放射状」グラデーションの集合体
    

    View Slide

12. 11
    補足
    
    ブーリアングループを併用すると便利です
    特に「選択範囲の結合」　めちゃ便利
    

    View Slide

13. 12
    これらの技術を活用して、
    
    良きイラスト＋デザインライフを！
    ご清聴ありがとうございました！
    

    View Slide