creatersnest55

【Illustrator】アイコンの作り方が参考になるチュートリアル集


アイコンとは、そのファイルや機能やアプリケーションを表す顔のようなものです。
簡略化された絵柄や記号が使われることが一般的ですが、ぱっと目を引くものや機能を象徴的に表すイメージを使用している場合もあります。
アイコンの作成は、奥が深いものです。
Illustratorでアイコンを作る場合の、様々なチュートリアルを集めました。ぜひ参考にしてください。

 

Handy Web Design

matomeicon_01
http://handywebdesign.net/2012/08/menu-item-for-making-icon/

アイコンを作るときによく使う知っておくと便利な機能や、アイコン作成時の作業効率アップを考えるならばおさえておきたい情報が掲載されています。
アイコン作成を開始する前に目を通しておくとよいでしょう。

 

Adobe Pinch In

matomeicon_02
http://www.adobe.com/jp/jos/pinchin/howto/illustrator-icon-logo-ui/part-based-icon.html

後からデザインの調整がしやすいアイコンづくりを目指す方法が、詳しく解説されています。
例として、飛行機のアイコンを作成したが翼の大きさを後から変えたくなった、という状況があげられます。
そうしたときに修正を施しやすいアイコン作りをしておくと便利です。活用しましょう。

 

atskimura-memo

matomeicon_03
http://atskimura.hatenablog.com/entry/2014/03/02/204314

Illustratorの初心者がアイコンを作成する手引書を読み、実際にアイコンを作成した例を紹介しています。
本から得た知識を元に、オリジナルアイコンの作成を試みた過程が掲載されており、これからアイコンを作成したいと思っている人に役立ちます。

 

blog.SPOON graphics

matomeicon_04
http://blog.spoongraphics.co.uk/tutorials/how-to-create-an-intricate-vector-heart-illustration

複雑な模様で描かれたハート型のアイコンを作成するチュートリアルです。
パスのオフセットと線の設定を利用することで装飾された線を表現し、変形の繰り返しCtrl+Dを多用して複雑な模様を作成しています。
英語サイトですが、スクリーンショットが多数掲載されているため英語がわからなくても手順がわかりやすいです。

 

Atrae Tech BLOG

matomeicon_05
http://atraetech.tumblr.com/post/102401024234

図形ツールを駆使して、フラットなアイコン作成を試みるチュートリアルです。
キャンバスの設定や、アイコンの作成時に必須となるガイドの作成から始まります。
統一感のあるアイコンを作成するために必要な情報やコツが詰まっています。

 

Dsingn Tips

matomeicon_06
http://designers-tips.com/archives/2091

Illustratorでアイコンを作成するときに知っておきたい、グラデーションやシャドウやエッジの細かな設定のテクニックが丁寧に解説されています。
グラデーションの設定一つであっても、どんな印象のアイコンにしたいかによって細かに変えることが必要です。

 

VectorCove

matomeicon_07
http://www.vectorcove.com/tutorials/icon-design/drum-icon-in-adobe-illustrator/

真上から見たときの太鼓の様子をリアリティーあふれるアイコンにするチュートリアルです。
解説は英語ですが、スクリーンショットが多く手順がわかりやすくなっています。
設定の表示などの画像も大きいので見やすいです。
太鼓のスティック部分まで細かく作られており、繊細な表現がされたアイコンを作りたいとき参考になります。

 

セカイのカケラ

matomeicon_08
http://www.raky.net/note/196/

Illustratorで歯車の形のアイコンを作るチュートリアルです。
パスの効果でジグザグを適用し好みの形に変形させ、最後にアピアランスを分解しパスファインダーで合体させて作ります。
簡単な図形に効果を適用するだけで短時間でアイコン作成ができるお手本です。

 

shoya.io

matomeicon_09
http://shoya.io/blog/long_shadow/

ベーシックかつおしゃれな雰囲気のロングシャドウのアイコンを作るチュートリアルです。
同じアイコンを二つ用意するところから始まります。
ブレンドツールを使用し、オブジェクトの分割・拡張やパスファインダーでの合体を経た後、グラデーションを適用してロングシャドウを作成することが可能です。

 

Dynamite Design Blog

matomeicon_10
http://weblog.weska.jp/2009/03/illustrator-safari-icon.html

パス、マスク、グラデーションを駆使してサファリのアイコンを作るチュートリアルです。
時代とともにソフトのヴァージョンは進化していきますが、様々な作成方法を知っていることで応用の幅を広げることができます。
完成データをダウンロードすることが可能です。

 

MdN Design Interactive

matomeicon_11
http://www.mdn.co.jp/di/articles/2364/?page=9

スマートフォンなどで採用されている、光沢のあるカラフルでポップなデザインのアイコンを作成するチュートリアルです。
一つ一つの手順がわかりやすく説明されています。
アイコンに使うイラストは素材集などを使うのも手早く作る手の一つです。

 

yossy’s手抜きTUTORIAL

matomeicon_12
http://tutorial.yossy-m.net/?p=539

ウェブショップなどの時間帯指定に使えそうな時計を現したマークを作成するチュートリアルです。
シェイプから一部型抜きを適用することで、欠けた部分の表現が可能です。
作成したアイコンを30°ずつ回転させることで、時間の経過をあらわしています。円グラフにも使用できる形です。

 

blue-screeeeeeen.net

matomeicon_13
http://blue-screeeeeeen.net/illustrator/sono21.html

ラスター画像を使って、スマートフォンアプリ風のアイコンを作るチュートリアルです。
クリッピングマスクをかけたグループオブジェクトに、効果を重ねて作ります。
画像を変更することで、いつでも好みのイメージのアイコンを作成することが可能となるアイデアです。

 

ポケットラボ

matomeicon_14
http://nh-lab.com/illustrator-buil-tutorial/

遠近グリッドを使って立体的なビルのアイコンを作成するチュートリアルです。
ビル以外の他の建物を表現する際にも使用できます。
アイコンとしてだけでなく地図のワンポイントとしても利用できそうです。

 

WEGRAPHICS

matomeicon_15
http://vforvectors.com/create-a-simple-paperclip-icon/

シンプルなクリップのアイコンの作り方を7つのステップにわけて解説しています。
他のアイコンと組み合わせて使ったりと、使い方は色々です。
英語で解説されていますが、スクリーンショットに内容が詳しいため英語に疎くても手順が理解できます。

 

dryicons.com

matomeicon_16
http://dryicons.com/blog/2009/02/09/icon-design-tutorial-how-to-make-a-calendar-icon/

ポップなイメージの立体的なカレンダーのアイコンを作成するチュートリアルです。
スタイライズの効果でカレンダーの角に丸みをもたせています。
解説は英語ですがスクリーンショットを見て作業内容を理解することが可能です。
アイコンを作る際に、紙の上にイメージをスケッチすることから始めることの重要性についても触れています。

 

佐賀でふらふり

matomeicon_17
http://www.sriproot.net/blog/howto-make-spoon-icon-easily-715

サクっと4ステップで作ることが可能なスプーンのアイコンを作成するチュートリアルです。
効果のスタイライズを適用して、スプーンの持ち手に丸みをもたせています。
複雑なアイコン作りにも応用できるため、アイコン作りが難しいと感じている人は挑戦するといいでしょう。

 

tuts+

matomeicon_18
http://design.tutsplus.com/tutorials/quick-tip-create-a-shiny-shield-with-illustrator–vector-4419

光沢のあるシールドのアイコン作成のチュートリアルが動画で紹介されています。完成した作品は、セキュリティソフトなどのアイコンに使用できそうです。
図形ツールで四角を描き、アンカーポイントをひっぱって盾の形を作っています。グラデーションで立体感を表現し、パスファインダを利用して光沢部分を作成しています。
5分程度の短い動画ですので、短時間でプロのテクニックを知りたい人におすすめです。

 

tuts+

matomeicon_19
http://design.tutsplus.com/tutorials/how-to-create-a-suitcase-icon-in-adobe-illustrator–vector-4331

スーツケース型のアイコンを作成していく手順の中で、アイコン作成時に便利なアピアランスパネルの使用方法が理解できるチュートリアルです。
解説は英語ですが、豊富なスクリーンショットによって内容が理解しやすくなっています。

 

tuts+

matomeicon_20
http://design.tutsplus.com/tutorials/how-to-create-a-simple-cardboard-box-icon–vector-3690

立体的な段ボール箱のアイコンを作るチュートリアルです。
効果の3D押し出し・ベベルを利用して箱を立体にし、側面のテープはパスファインダを使用してはりつけています。
細部まで作りこむことによって繊細な表現が可能となっています。

 

まとめ

Illustratorで作ることができるアイコンには、手軽に作れるものからリアルな質感を作りこんだものまで様々なものがあります。
アイコンの作成方法にはこれといって決まりはなく、色々な手法があります。自分以外の人がどんなふうにアイコンを作成しているのか知ることでアイコンをより手軽に作れるようになったり、デザインの幅が広がるかもしれません。ぜひ活用してください。

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

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

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


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article無料でGIFアニメーションが作成できるWebサービスまとめ