今ではスマートフォンのアプリやテレビのCMなど至る所でこのようなフラットなアイコンが見られますよね。もしあなたがIllustratorなどの練習をしているならとてもいい練習材料になります。僕の各記事のトップ画像にもフラットなイラストレーションを毎回作るようにしています。

今回は下のようなフラットアイコンを作っていこうと思います。コーヒーを上から見た可愛いアイコンです。とてもシンプルなのですぐにできますよ！

フラットアイコンのいいところは簡単にできて、しかも見た目が可愛いくなるところですね。

では作っていきましょう！

フラットアイコンの作り方

参考になる画像を探す

今回はとてもシンプルなデザインなので人によっては必要ないかもしれませんが、参考資料があったほうが作りやすいです。

今回はいつもお世話になっているUnsplashから下の画像をお借りします。

カラーパレットの用意

今回使用していくカラーパレットは、Flat UI Colorsから借りてきました。様々なカラーパレットを探すことが出来る便利なサイトです。今回はRussian Paletteを使用しています。

基本的な図形から作る

画像を参考にしながら丸や四角等の基本的な図形を使って、コーヒーのマグカップを作っていきましょう。

取っ手は長方形を使って簡単に作る

長方形の角を限界まで丸めて、カップの一番下のレイヤーに配置すればマグカップの完成です。

背景を配置

背景を配置したらもう殆どの形は見えてきましたね。後は数ステップだけです！

背景色や配色に困ったら、カラーガイドを参考にする

イラストレーションを作っているときのどの色が合うのかわからなくなり、配色に困ったらカラーガイドを参考にしてみましょう。様々な色の配色を確認することが出来るので便利です。今回は背景色の色に悩んだので、ガイドに出てきた色に近い色を採用しました。

このようなアイコンを開けば出てきます。もし見当たらなければ、上部のウィンドウ欄から見つけることができます。

ウィンドウ　＞　カラーガイド

影をつける

影の付け方は人によって違うと思いますが、今回は僕なりの簡単な影の付け方をご紹介します。

先ずはコーヒーの上に影を作っていきます。

Option/Altで複製、Shiftで斜め４５度に移動させることができます。

その後シェイプビルダーツールかパスファインダーツールで余分な所を取り除きます。

あとは影になる部分の色を色を変更して影の完成です。

マグカップの影を作る

マグカップの影の作り方は、マグカップの図形を複製してパスファインダーツールで合体させます。

左上のアイコンを選択すれば合体できます。

そのあとは先程のコーヒーの影と同じように４５度斜めの下の位置に配置します。

影の色の選択の仕方

先程使ったカラーガイドを使えば影の色を簡単に選ぶことができます。影を加えたい色を選択するとカラーガイドにその色を基本としたシャドウやハイライトを選択することができます。

今回は一つ暗い色にしました。

完成です！

とても簡単にかわいいフラットアイコンを作ることができましたね！

フラットアイコンを作るだけで様々なことが学べたと思います。これからもチュートリアルをご紹介していきます。

ではまた！

Illustrator おすすめ本