creatersnest45

Illustratorでシンプルなアイコンを作成するチュートリアルまとめ


PCやスマホを使っているとあらゆるところにアイコンを見かけますよね。
小さな中に情報がぎっしり詰め込んであるものもあって
検索していると本来の目的のついでにお気に入りアイコンを探したりしてしまいます。
凝ったものも良いけれどスッキリしたデザインのものが見やすいですね。
今回はその中でもシンプルなものを作成するチュートリアルを紹介していきます。

 

スーツケース型アイコン

1

画像出典:envato tuts+

オシャレなスーツケースアイコンを作るチュートリアルです。
アピアランスパネルの練習にも最適です。

 

開封済みのダンボールアイコン

2

画像出典:envato tuts+

立体的なダンボールのアイコンを作るチュートリアルです。
パスファインダーを使ってテープを張るのは面白くて作業が早いですね。

 

スプーン型アイコン

3

画像出典:佐賀でふらふり

丸めのフォルムが可愛いスプーン型アイコンのチュートリアルです。
色を変えれば雰囲気も凄く変わりますね。
カトラリー系のアイコンは使い勝手も抜群です。

 

シンプルアイコン

4

画像出典: COMMONSENSE Web&Design

難易度分けされていてシンプルアイコンの入門編として役立つチュートリアルです。
線をいじれば雰囲気が違うものを作ることが出来るので一度挑戦してみてはどうでしょうか。

 

手書き風のお天気アイコン

5

画像出典:envato tuts+

手書きで書いたお天気の絵をクリップで留めたようなアイコンのチュートリアルです。
クリップは他の場所でも使うことが出来るので、作り方を知っておくと便利ですね。

 

透明感のあるゴミ箱のアイコン

6

画像出典:envato tuts+

3Dツールを使ってつくる透明感のあるゴミ箱のチュートリアルです。
基本的な使い方だけで作れる点が良いです。ガラスのコップなどの表現にも応用できますね。

 

愛らしい太鼓型アイコン

7

 

画像出典:vector cove

柔らかい色使いが特徴の太鼓型アイコンのチュートリアルです。
アピアランスパネルの設定が分かりやすく書かれているので挑戦しやすいです。

 

スプレー缶のアイコン

8

画像出典:vectips

グラデーションツールを使って書いた立体的なスプレー缶を描くチュートリアルです。
手順が1から10まで丁寧に解説されています。
アイコンとして紹介されているわけではありませんが、アイコンとして十分使えるものです。

 

ボトルキャップ型のアイコン

9

画像出典:envato tuts+

簡単なのにリアルなボトルキャップが描けるチュートリアルです。
アイコンとして紹介されていませんが、凄く簡単な手順なのにクォリティが高いです。
デザインの参考にも。

 

シンプルでかっこいいアイコン

10

画像出典:DESIGH TIPS

少し大人の男の雰囲気漂うアイコンのチュートリアルです。
シンプルでシックなアイコンを作りたいときの参考になります。

 

safariアイコン

11

画像出典:Dynamite Design Blog

おなじみのsafariアイコンである羅針盤を作るチュートリアルです。
色やデザインをアレンジしてオリジナルのデザインを楽しむのも良いですね。

 

レコードプレイヤーのアイコン

12

画像出典:envato tuts+

レコードプレイヤーのアイコンを作るチュートリアルです。
音楽関係のアイコンは使う場面も多いですね。
レコードの質感の表現が上手なので是非取り入れたいアイディアです。

 

スピードメーターのアイコン

13

画像出典:envato tuts+

スピードメーターを作るチュートリアルです。
速度の数字やメーターの針の位置を工夫するとフォルダ分けのアイコンとしても活躍しそうです。

 

メタリックなアイコン

14

画像出典:envato tuts+

メタリックなアイコンを作るチュートリアルです。
金属で出来た箱型のアイコンはまるでゲームのアイテムみたいですね。
箱の光沢の出し方は一度見て感動して欲しいです。

 

光彩を使ったシンプルアイコン

15

画像出典:Illustrator mania

どんなものにも応用や多用できそうな、シンプルアイコンのチュートリアルです。
光彩を使ってテキストを乗せれば終わりと作り方も至ってシンプル。

 

ペーパータグのアイコン

16

画像出典:DESIGH TIPS

工夫次第でどんなデザインにも対応可能なペーパータグ型のアイコンチュートリアルです。
アイコンとして使う場合は特にシャドウなどは入れないで使っても可愛らしいですね。

 

ダーツボードのアイコン

17

画像出典:envato tuts+

バーにありそうなダーツボードをかくチュートリアルです。
丸や四角の形をしたものはアイコンにしやすいですね。

 

日本イメージのアイコン

18

画像出典:IllusutratorWorks

日本をイメージしたシンプルアイコンのチュートリアルです。
描き方というよりは、着想や配色方法のアイディアを紹介してくれています。

 

フラットなアイコン

19

画像出典:IllustratorWorks

ピクセルベースで描くフラットなアイコンの作り方です。
色も形も新風rが一番と言う方におすすめです。

 

カレンダー型アイコン

20

画像出典:dryicons

デザインはシンプルだけど誰もが見慣れていて馴染みやすいカレンダー型のアイコンです。
ちょっと立体的にしただけでぐっとオシャレになりますね。

 

紙袋アイコン

21

画像出典:envato tuts+

紙袋型アイコンのチュートリアルです。
紙袋の模様を替えたり、袋の中に食べ物を配置したりすると
また雰囲気や用途が違ったアイコンとして使うことも出来ます。

 

買い物のかごのアイコン

22

画像出典:envato tuts+

ショッピングカートのような買い物かご型アイコンのチュートリアルです。
買い物かごの網部分は四角2つとコピーだけで簡単に出来るんですね。

 

サイコロ型のアイコン

23

画像出典:envato tuts+

白と黒のシンプルなサイコロのアイコンです。
サイコロのカドが丸くなっているところもリアルです。1の面を赤に変えてもいいですね。

 

GPSで表示した地図のようなアイコン

24

画像出典:vectips

画面に表示された地図のようなアイコンのチュートリアルです。
レーダーで目的地を探す機械のような雰囲気が良い味をだしています。
グリッドツールやグラデーションツールを上手に使用していますね。

 

レトロなテレビのアイコン

25

画像出典:ART INSPIRE STUDIO

昔にタイムスリップしたような懐かしい形のテレビ型アイコンです。
1手順ずつスクリーンショットが載っていて作りやすいです。
レトロな雰囲気が漂ってきますね。

 

メール型アイコン

26

画像出典:ART INSPIRE STUDIO
使い勝手の良いメール型アイコンです。
矢印の色、形、向きを変えるだけでも自分仕様に簡単アレンジできます。

 

砂時計型アイコン

27

画像出典:envato tuts+

砂時計型アイコンのチュートリアルです。
曲面へのハイライトのつけ方などを参考にしてみてはどうでしょうか。
この手順なら砂やガラスの質感は好みでアレンジも自在ですね。

 

ショップ型アイコン

28

画像出典:vectips
お店の形をしたアイコンのチュートリアルです。
しっかり細かい部分のシャドウにもこだわっています。
アレンジした作品例もページの一番下に表示されているますよ。

 

お寿司型アイコン

29

画像出典:envato tuts+

いろいろな巻き寿司型アイコンのチュートリアルです。
色使いが落ち着いていて食べ物というより雑貨のイメージが漂っています。

 

ロングシャドウアイコン

30

画像出典:envato tuts+

フラットデザインの簡単なアイコンにロングシャドウを追加する方法が動画で紹介されています。
凄く簡単なので、ちょっと変化をつけたいアイコンに試してみてはどうでしょうか。

 

まとめ

いかがでしたか?オリジナルのアイコンを作るアイディアが浮かんだでしょうか。
チュートリアルは、作り方がわかるだけでなく色々な人のセンスも見ることが出来て
自分のアイディアの引き出しも増えていくので眺めるだけでも楽しいですね。
是非わかりやすい機能美あふれるシンプルアイコンを作ってみてください。

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

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

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


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

Next ArticleIllustratorで手書き風のタイポグラフィを作成する方法