creatersnest

【実践】イラストレーターでフラットデザインのアイコンを作ってみよう!


この記事ではAdode Illustratorを使ったフラットデザインのアイコンの作り方を
ご紹介します。

フラットデザインとは、デザインパーツの全てがフラットで起伏のない2Dの
デザインのことで、Appleの新規iOS7に採用されたことでも有名です。

スタイリッシュなデザインで、今や様々なツールでデザインスタイルを目にすることができます。

STEP1 カメラのアイコンを作ってみよう!
まずはボディから描いていきましょう。

シンプルなパーツを組み合わせて、さっそくアイコンを作成していきましょう。
できるだけシンプルなデザインにしていくことがフラットデザインのコツです。
今回はカメラのアイコンを作っていきます。

まずは「長方形ツール」で横長の長方形を描きます。
サイズは後から調整できるので描きやすいサイズではじめましょう。
step01

 

次にその長方形の角を、効果メニューの「角を丸くする…」で丸くします。
※ライブコーナーでも丸くする効果を加えられます。

 

step01_2

 

step01_3

 

STEP2 パーツを増やしていきます。
レンズの部分を描きましょう。

次に楕円ツールで円を描き、先ほどのオブジェクトの上に重ねます。

 

step02

 

長方形と円の両方を選択し、パスファインダーパネルの[前面オブジェクトで型抜き] を実行します。
(グループ化してから効果メニュー[パスファインダー]でも可能です。)

 

step02_1

 

さらに楕円ツールで小さめの円を描き、先ほど型抜きした円の上に重ねます。
これでレンズ部分は完成です。

 

step02_2

 

さらにシャッターボタンなどパーツを追加していきましょう。
※この方法で作成した図形は、すべてパーツ化されていますので、後から楽に
パーツのサイズなどを変えることができます。

 

step02_3

 

STEP3 正方形の枠を作りましょう。

最終的に四角い枠のアイコンにデザインしますので、作成したカメラのアイコンより
も少し大きめの正方形をカメラの後ろ側に作成していきます。

「長方形ツール」で正方形を描きましょう。

 

step03_1

 

さらに効果メニューの「角を丸くする…」で丸くします。
これでアイコンらしくなってきました。

 

step03_2

 

STEP4 仕上げの微調整をしていきます。

アイコンができあがったので、さまざまなデバイス用にサイズを変えたアイコンを
作っていきましょう。

できあがったカメラアイコンをリサイズします。
この例では80%にリサイズしていますが、どれぐらいリサイズするかはデバイスの
サイズによって変わりますので、必要なサイズにリサイズしてください。)

 

step04_1

 

拡大縮小を行った後はオブジェクトのサイズの数値を[変形パレット]で確認して、
微調整を行います。
※この作業をすることによって、アンチエイリアスが発生しないようになります。
きれいなアイコンを作成する為に、ぜひ行ってください。

パーツを一つ一つ微調整していきます。
[ダイレクト選択ツール]で正方形を選択して、高さと幅の数値を整数(偶数)に
していきます。

 

step04_2

 

内側のカメラのパーツも一つ一つ選択し、高さと幅を整数(偶数)に直します。

 

step04_3

 

全てのパーツを微調整して最適化しましょう。
調整が終われば、データが最適化完了です。

このようにサイズを変更して、微調整を行い、必要なサイズのアイコンを作っていき
ましょう。

STEP5 追記

正方形の枠の部分のカラーをグラーデーションにすると、より一層アイコンらしく
なりますので試してみてください。

 

step05

 

カメラの部分に影をつけたり、フォントを組み合わせてみたり、カラーも増やして
もいいでしょう。

以下にデザインの参考に、最新のフラットデザインに対応したアイコン集を
ご紹介いたします。

 

LINK

 

 

 

 

 

 

 

 

 

 

さいごに

以上が、イラストレーターでフラットデザインのアイコンを作る方法です。
簡単にシンプルなアイコンが作れますので、いろいろなデザインのアイコンを
作成してみてください。

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

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

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


Next Articleマウスオーバー時のアクションがおもしろいWebサイト30選