creatersnest12

【Illustrator】シャドウの入ったフラットデザインのアイコンを作ってみよう!


フラットデザインはスタイリッシュに見えて、シンプルで分かりやすく
コントラストがはっきりしているため文字も見やすくなるメリットがあり
デザインする側にとっても製作時間が短縮できるというすばらしいメリットを持っています。
通常フラットアイコンにはグラデーションなどを使わず
アクセントに欠ける場合、シャドウを入れたデザインを用いることがあるので
作り方を知っておくとデザインしやすくなります。

 

フラットデザインのアイコンを作る

ペン型のフラットアイコンを作成してみましょう。

1

まず【角丸長方形ツール】で【高さ・幅:250px】のオブジェクトを描きます。
角の丸みは四隅の◎をドラッグすることで調節することが出来ます。

3
もう一つ【角丸長方形ツール】で【幅:50px、高さ:200px】のオブジェクトを描き
塗りを設定します。

4
【長方形】ツールで【幅:50px】【高さ:25px】くらいの長方形を描きます。
ここでは位置だけ合わせ、はみ出した部分はあとで【パスファインダー】パネルで調節します。

5-3

次にペン先を描いていきます。
【角丸長方形】ツールで適当なサイズで長方形を描き、
右クリック→【変形】→【回転】→【45°】で回転させます。

6

【高さ:80px】【幅:50px】に変更してペンの先の部分に配置して、
オブジェクト全体を選択した状態で水平方向に整列させます。

8
次にペン先の芯部分を書きます。
【楕円ツール】を使って円を描き、塗りを設定します。

9
続いて、先ほど描いた45°に回転した長方形を選択し、前面コピーします。(Ctr+C→Ctr+F)
コピーした長方形と円を選択して【パスファインダー】ツールで【交差】を選びます。

10
2つのオブジェクトが重なっていた部分だけ残って芯が出来ました。

11

今度は45°に回転したオブジェクトと、ペン本体の境目に3つの円を描きます。

13-2
3つの円を選択した状態で【パスファインダー】→【合体】を選びます。

14-2

次にペン本体と合体した円を選択して
【パスファインダー】→【前面オブジェクトで型抜き】を実行します。
鉛筆が削れた跡の完成です。

14-tsugi

ペン先と反対側に消しゴム部分を作ります。
【長方形】を作って【パスファインダー】を使い、ペン本体で型抜きをします。

16

次にペン本体に【長方形】オブジェクトを2つ作成します。
色が決まったらペン本体を【コピー】→【前面に貼り付け】をして
長方形を1つ選択し交差を選んで形を合わせていきます。
2つともペン本体になじんだら、もう一つ上にも小さい長方形を2つ配置して同じく操作をします。

41

全体を見渡して配色を見直してみましょう。
フラットアイコンに向いているvividもしくはパステル調のカラーを設定すると良いでしょう。
配色が決まったらフラットアイコン完成です。

 

フラットアイコンにシャドウを入れる

20

では次に作成したフラットアイコンに影をつけて見ましょう。
作ったペンと同じ高さで、【幅:300px】くらいの長方形を、ペンの真ん中から右に配置します。

21

ペンの背面に配置して鉛筆型のオブジェクトを
【パスファインダー】→【前面オブジェクトで型抜き】を実行します。
ペンから長方形が出たような形になりました。

22

長方形とペンのオブジェクトをまとめて【変形】→【回転】→【-45°】に設定します。

23

アイコンの枠から飛び出ている長方形を
枠を【コピー】→【前面に貼り付け】し、最前面に持ってきて長方形を選択します。
次に【パスファインダー】→【切り抜き】を行えば
シャドウの入ったフラットデザインのアイコンが完成です。

 

シンプルなアイコンにシャドウを入れる

31

もっとシンプルな文字のアイコンだったらどんな影を付けたらよいでしょうか?

32

テキストをコピーして影を伸ばしたい方向に配置し、【オブジェクト】→【ブレンド】を選択します。
ブレンドオプションでステップ数を250くらいに設定しましょう。
【オブジェクト】→【ブレンド】→【拡張】をして、【パスファインダー】で【合体】します。

33
【アンカーポイントの削除ツール】で余分なアンカーポーントを削除します。
色を背景よりも暗めの色に変更します。

36

グラデーションを設定して【透明】パネルで【乗算】の効果かけても良いでしょう。

37

元の文字を上に重ねて、角丸長方形を【コピー】したものを前面に置き
【前面オブジェクトで型抜き】すれば完成です。

 

いかがでしたか?

フラットデザインのアイコンはシンプルながら配色などが難しいなと感じることがありますが
【グラデーションを使わない】【コントラストの強いカラーを選択する】【分かりやすく可愛い】
【テクスチャーやエフェクトを避ける】をポイントとして押さえておくと
フラットデザインのアイコンが作りやすくなりますよ。
是非チャレンジしてみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next ArticlePhotoshopで写真に写り込んだ人を消すテクニック