Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

2023年6月2日開催 DIST.39「みんなのFigma」LT資料です!
https://dist.connpass.com/event/281775/

Miki Kuramata (nico)

June 04, 2023
Tweet

Other Decks in Design

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