XDでフラットデザインのイラストを作ろう!公開日:2019/08/20早速フラットデザインのイラストを作ってみましょう。完成イメージはこちら。適当なサイズの画像を作りましょう。四角の横に細長い四角の図形を少し被せて配置しましょう。わかりやすいように画像に色をつけます。ダブルクリックするとこのように各点を個別で変形させることができます。右上の点を下に移動させると、このようになります。白い図形に合わせてピンクの図形を変形させましょう。ダブルクリックした状態で辺の適当なとろこにカーソルを合わせると、点が出てくるのでクリックしてドラックするとより複雑な変形をすることができます。これができると大抵のフラットザインを作ることができます。図形の下にこのような図形を配置します。先ほどと同じ方法で作成しましょうこのように図形を配置し、一番下の図形を下図のように変形させます。右側も同じように変形させると、下図のようになります。画面を追加しましょう。立体感を出すために、画面の上側に陰影をつけます。陰影は主に真っ白(#ffffff)か真っ黒(#000000)の透明度を変えて再現します。だいたい10~20%にします。あとは細かい色などを設定して完成です。あとは書き出すだけです。設定はこのようにしています。ここの設定は状況に合わせて変えてください。WordPressに画像をアップロードするなら画像を最適化してから画像をあげましょう。おすすめツール4選これで以上になります。まとめわかりにくいですよね。私も書いていてわかりにくいなと思いました(笑)。簡単なのはわかっていただけたと思います。このイラストの作成時間はだいたい5分くらいです。illustratorで作ってもだいたい時間は同じだと思います。他にもXDの作成の説明をいくつか作って行きたいと思います。XDの作業がさらに捗る!おすすめプラグイン9選ブログのデザインを変えようかと思う話。プロフィールこのサイトを運営しているイノカワです。静岡でフリーランスをやっています。コードを書くのが大好き。いろんな技術に触れて日々気づいたこと・感じたこと・詰まったこと・生活のことを書いています。技術においては雑食です。