早速フラットデザインのイラストを作ってみましょう。
完成イメージはこちら。
まずは適当なサイズの画像を作りましょう。
四角の横に細長い四角の図形を少し被せて配置しましょう。わかりやすいように画像に色をつけます。
ダブルクリックするとこのように各点を個別で変形させることができます。
右上の点を下に移動させると、このようになります。
白い図形に合わせてピンクの図形を変形させましょう。ダブルクリックした状態で辺の適当なとろこにカーソルを合わせると、点が出てくるのでクリックしてドラックするとより複雑な変形をすることができます。これができると大抵のフラットザインを作ることができます。
図形の下にこのような図形を配置します。先ほどと同じ方法で作成しましょう
このように図形を配置し、一番下の図形を下図のように変形させます。
右側も同じように変形させると、下図のようになります。
あともう少しです。画面を追加しましょう。
少しだけ立体感を出すために、画面の上側に陰影をつけます。
陰影は主に真っ白(#ffffff)か真っ黒(#000000)の透明度を変えて再現します。だいたい10~20%にします。
あとは細かい色などを設定して完成です。
あとは書き出すだけです。全てをアートボードに配置して、ファイル > 書き出し > 選択済み を選択。
設定はこのようにしています。ここの設定は状況に合わせて変えてください。
もしWordPressに画像をアップロードするなら画像を最適化してから画像をあげましょう。
これで以上になります。
まとめ
わかりにくいですよね。私も書いていてわかりにくいなと思いました(笑)。
でもとにかく簡単なのはわかっていただけたと思います。
このイラストの作成時間はだいたい5分くらいです。illustratorで作ってもだいたい時間は同じだと思います。
他にもXDの作成の説明をいくつか作って行きたいと思います。
ぜひ使ってみてください。
