こんにちは!デザイナーのペです!

アプリやWEBサイトのデザインで、今や一般的になりつつある「アイソメトリック」なイラストですが、
自分で作ってみようと思ったらなかなかイメージ通りにいかなかったりしますよね(泣)。
角度がちょこっとずれたり3D効果で作っても何故か微妙になる…

そんなときにIllustratorのライブペイントツールを使えば誰でも簡単に思い通りのアイソメトリックイラストが作れます!
今日は私と一緒にこのライブペイントを使って簡単な図形から作ってみましょう!
記事の最後にはアイソメトリック素材の無料ダウンロードサイトも紹介しているので、ぜひチェックしてみてください!

目次

    さっそく作りましょう!

    ツールの紹介

    今回使用するのはAdobe Illustratorライブペイントツールです!


    グリッド作成

    グリッド作り

    1.まずは「ペンツール」を使って線を一本引きます。

    2.「Alt + Shift」を押しながら線をドラッグして一本複製します。

    3.「Ctrl + D」で線をたくさん追加します。

    本数は奇数に

    ※このとき、線の間隔と本数は適当でOKですが、線の本数は奇数になるように気を付けてください。

    グリッド角度調整

    4.線を複製し終わったら引いた線全部を選択してグループ化してください。
    その後、そのグループを「Ctrl + C / Ctrl + F」で複製して角度を60度にします。

    グリッド角度調整

    5.グリッドにするためには3つのライングループが必要になりますので、
    最初にグループ化したライングループをもう一回複製した後、今度は-60度に角度を調整して三角形のグリッドラインを作ります。

    ライブペイント作成

    6.3つのライングループを作ったらライブペイントを有効化するために作ったライングループ全部を選択したあと
    「オブジェクト → ライブペイント → 作成」順で選択してライブペイントを作成します。
    これでグリッドの作成は完了になります。


    カラーパレット準備

    カラーグループ作成

    7.イラストで使う色を図形ツールで作成した後、作成された図形全体を選択して、スウォッチ新規カラー グループを選択して新しいカラーグループを作成します。これでカラーパレットの準備は完了になります。


    イラスト作成

    イラスト作成

    8.グリッドの線をなしに設定して、グリッドが選択された状態で「Kキー」を押すとライブペイントの有効化ができます。
    キーボードの上下左右でカラーを選択して、ドラッグしながら色を塗っていきます。

    必要ないライン削除

    9.オブジェクトにある「分割・拡張機能」で色を塗った部分以外のラインを消します。

    ※このとき分割・拡張のときのオプションはデフォルトのままで大丈夫です。

    作成イラストのパーツ化

    10.作成したイラストをパーツ化するため、パスファインダーの「合流」を選択した後「グループ解除」をしてください。


    完成!

    これで簡単にアイソメトリックイラストが出来上がりました!

    今回の方法を使えば少し複雑なアイソメトリックイラストも作れちゃいます!

    終わりに

    皆さんいかがでしたか?
    ライブペイントで作るアイソメトリックイラスト。本当に簡単でビックリですよね!(笑)
    ライブペイントを使えば誰でもできますので皆さんもぜひチャレンジしてみてください!

    アイソメトリック素材無料ダウンロードサイト

    IsoFlat

    IsoFlat

    シンプルで色んなジャンルのアイソメトリック素材が無料でダウンロードできるサイトです。

    IsoFlat

    ISOMETRIC

    ISOMETRIC

    アイソメトリックなイラストのみを扱っているサイトです。

    ISOMETRIC

    isoflat - explore-isobuild

    isoflat - explore-isobuild

    お気に入りのアイソメトリックイラストが見つからないときに、素材を組み合わせてイラストが作成できるサイトです。

    isoflat - explore-isobuild
    ペ

    ペ Webデザイナー

    Webデザイン・コーディング、どちらも勉強していきたいWebデザイナー。2019年入社。
    社内キュウリ会の会長をしている。

    OUR SERVICE

    01戦略立案

    Webサイトを活用したマーケティング企画を支援。コンセプト策定、現状分析、機能検討の各フェーズを経て、成果につながる実現可能な提案が強みです。

    02課題解決

    Webサイトに関する様々な課題を解決。基礎的な技術はもちろん、AI連携、グローバルサイト構築、大量コンテンツ移行などの大規模な事例にも実績があります。

    03システム開発

    CMS実装、アプリ開発、外部システム連携などの開発技術を支援。将来的な拡張性を考慮し、専門的な技術者がご相談にのります。

    04運用支援

    Webサイト公開後の更新作業から保守までの一貫したサポートを提供。アナリティクス解析やWeb広告の運用など継続的な支援を行い、お客様との長期的な信頼を築き上げます。

    CONTACT

    Web制作・サービスに関するご相談を承ります。お気軽にお問い合わせください。