夏がやってきましたね。暑中見舞いにこの素晴らしいチュートリアルをお届けします。夏をテーマにした４種類のアイコンをイラストレーターを使って作成したいと思います。 これらのアイテムは、日常的に使っているベーシックな図形とツールによって簡単に作ることができます。

あなたはいつでもそのセットをEnvato Marketで展開することができます。Envato Marketには、美しく作り込まれたアイコンパックが山ほどあります。

では、早速やってみましょう。

１．新規ドキュメントを用意します

どの新しいプロジェクトでも、まず最初に適切な設定をしましょう。

ファイル > 新規　または Ctrl+N で新規ドキュメントを開き、以下の設定を行います。

• アートボードの数：1
• 幅：800px
• 高さ：600px
• 単位：ピクセル

それから詳細設定：

• カラーモード：RGB
• ラスタライズ効果：スクリーン（72ppi）
• 「新規オブジェクトをピクセルグリッドに整合」にチェックを入れる

ヒント：これらの設定はWebのドキュメントプロファイルの元にすることができます。ただし、サイズだけは自動的にセットせずにその都度選択する必要があります。

2.カスタムグリッドの設定

illustratorには強力なグリッドシステムが用意されていますので、最小値を設定しておきます。そうすることで確実にピクセルグリッドにスナップすることができます。

その設定画面は、編集 > 環境設定 ＞ ガイド・グリッドにあります。以下のように設定してください。

• グリッド：1px
• 分割数：1

ヒント：グリッドについてもっと知りたいなら、この記事をオススメします。→「how Illustrator's Grid System works（どのようにイラストレーターのグリッドシステムが作動するか）」

カスタムグリッドを設定したら、はっきりとした見た目にするために、表示メニューの中にある「グリッドにスナップ」機能を忘れずに有効にしておきましょう。ピクセルプレビューモードで、ピクセルにスナップされるのが分かります。

1pxの狂いもなくアイコンを作るために、私はあなたに「how to pixcel-perfect artwork（1ピクセルの狂いもないアートワークの作り方）」のチュートリアルを読んでいただくことを強くお勧めします。それはあなたの技術スキルをひろげてくれるでしょう。

3.レイヤーの設定

新しいプロジェクトファイルを作成したら、アイコンパックをレイヤー分けしておきます。安定したワークフローを作っておくと１つのアイコンに集中できます。

それから、レイヤーパネルを表示して全部で５つのレイヤーを作成します。また、それぞれを簡単に識別できるようなキーワードでレイヤー名をつけます。

• レイヤー1 > 参照グリッド
• レイヤー2 > モヒート
• レイヤー3 > アイスクリーム
• レイヤー4 >サーフボード
• レイヤー5 > 砂のバケツ

ヒント:今回の使おうとしているレイヤーは本当に単純なものです。 まず、今作業しているレイヤー以外がロックされているか確認します。ロックするには目のアイコンの隣にあるエリアをクリックします。

作業中にアイコンを作り終えたらすぐにそのレイヤーをロックして、次のものにとりかかります。全ての作業を終えるまで、この作業を繰り返します。

4.参照グリッドの作成

参照グリッド（またはベースグリッド）は外観の正確な範囲を示します。その範囲の中でアイコンを作成します。

一般的に、グリッドのサイズを決めるということは、実際のアイコンサイズが決めるということです。それは新しいプロジェクトでのあなたの最初の決断になります。あなたは常に可能な限り最小のサイズからはじめて、その上に構築したいと思うので。

今回のケースでは、128 x 128 px以上の大きさの１サイズのみでアイコンパックを作っていきます。

Step 1

参考グリッド以外のレイヤーをロックし、長方形ツールを選択して128 x 128 pxの赤（#FF6B57）色の四角を作ります。アイコンのサイズのベースとなります。

Step2

それから116 x 116 px (#F2F2F2)の小さいサイズの四角を先ほどの四角に重ねて追加し、6pxの余白設けておきます。

Step3

２つの四角を同時に選択し、Ctrl+Gでグルーピングします。グルーピングしたものを40px間隔で３つコピーします。またそれらをアートボードにセンタリングしておきます。

参照グリッドができたら、無意識のうちに動かさないようそのレイヤーはロックしておきます。またそのレイヤーはこれから作成するアイコンレイヤーの下に移動しておきます。

5.初期"ブランク"アイコンの作成

我々がかつて行ってきた他のアイコンチュートリアルと比べて、今回のものはとても簡単です。というのも、各アイコンは同じ背景を使用するためです。

つまり、ベースとなるブランクのアイコンを作ることができるということです。各アイコンを作る際にはブランクアイコンにそれぞれの要素を追加するところから始めればよいのです。制作プロセスを簡単にすることができます。

Step1

最初の参照グリッドの上に配置し、作業エリアがよりよく見えるよう拡大してください。

それから楕円形ツール（L）を使って、88 x 88 pxの#34D5EAで塗りつぶした円を作ります。それを真ん中より下、枠よりも4px離して配置します。

ヒント: ここではピクセルプレビューモードを使用することをお勧めします （ビュー > ピクセル プレビューまたは Alt+Ctrl+Y）より簡単に基礎のピクセルグリッドと図形を配置することができます。

Step 2

オブジェクト > パス > パスのオフセット で表示されるポップアップウィンドウでオフセットの値に4pxと入力し、そのシェイプにアウトラインを追加します。また同時に色を少し暗めの (#493E3E)に変更しておきます。

ヒント:もしこれまでアウトラインを作成する時に、オフセットパスツールを使ったことがないなら、この次のチュートリアル（the two main methods for creating line icons）を読んでください。この制作過程がよく分かります。

Step3

メインの図形とそのアウトラインができたら、次に、背景に素敵でポップな印象を与える、リングのようなハイライトを追加する必要があります。

まずは青い円を選択し、コピーをします。（Ctrl+C > Ctrl+F）そして-4pxのオフセットを追加します。 そしてそのコピーとオフセットの両方を選択し、パスファインダーの前面オブジェクトで型抜きを使って、切り抜きます。

Step 4

そうしてできた新しい図形について、色を白 (#FFFFFF) に変更して、また不透明度を80%に下げ、ブレンドモードをソフトライトにして、調整する必要があります。

次に、背景にいくつか詳細を追加します。砂のビーチから始めましょう。

Step5

ペン ツール (P) を選んで、上に向かって素敵な曲線を持つ四角形を描きます。メインカラーは金黄色にし (#EDBC32) 、青色の円の下のセクションに図形を配置してください。

ヒント: 幅 96px 、高さ 50 pxという値を見てみることで砂を作る図形のサイズのアイデアを得ることができる。

Step6

砂のところにパスのオフセットを使って４pxの厚みのあるアウトラインを追加します。色は暗めの(#493E3E)に変更しておきましょう。

Step7

砂にテクスチャーを追加します。2 x 2 pxの円形（#D19A20）を両サイドに数か所追加します。そしてそれらをCtrl+Gでグループ化しておきましょう。

ヒント：見て分かるように、砂の特定のエリアのみを（正確言うなら左側と右側）を小さい円形を使ってカバーしました。というのは、全てのアイコンで、真ん中には同じ幅のキーオブジェクトがくるからです。

あなたのケースでは、好きなようにスペースを埋めていただいて構いません。キーオブジェクトを追加してから円の数を調整してください。

Step8

ここでは、ビーチの砂をマスキングする必要があるので、最初のセレクションと、すべての図形（塗りシェイプ、アウトライン、砂のテクスチャ）のグループ化 (Ctrl+G) をします。

そして、青色の図形をコピーして一番上に配置します。クリッピングマスクとして使用します。右クリックでクリッピングマスクを作成します。

 ヒント: もしこれまでクリッピングマスクを使ったことがないなら、次のチュートリアルをお読みください：「the advantages of using the Clipping Mask over Pathfinder’s Shape Modes （パスファインダーの図形にクリッピングマスクをする利点）」

ご覧のようにビーチの砂が完全にマスクされましたが、アイコンスタイルを統一するために、対となるハイライトが必要です。

Step 9

円形のハイライトを砂のビーチエリアに追加しましょう。青い円で使ったものをコピー（Ctrl+C）して、マスキンググループの中に貼り付け（Ctrl+F）ます。 それから、マスク用に黄色の図形を使います。境界線にかぶらないようにします。

 ヒント: 対象をダブルクリックすることで、クリッピングマスクまたはグループ化されたオブジェクトのセットの編集モードにすることができます。 なお、編集モードを抜けるにはシンプルにエスケープキーを押せばOKです。

Step 10

砂のビーチの上の部分にハイライトを追加します。80 x 80 px の円を使用してマスクして、ハイライトが重ならないようにしましょう。

Step11

雲のセットを作りましょう。まずは16 x 8px の大きさの角丸長方形を作成します。角の半径は4pxで、 色は白 (#FFFFFF) (1) にしておきます。 次に接続部分の要素を作成します。まずは6×2pxの四角形（2）を描ましょう。その両端に2×2pxの円（3）を追加し、切り抜きます（4）。

12×4 pxの角丸長方形（半径2px）を、コネクター部分の下側に追加して (5) 、最初の雲のセットが完成です。

Step 12

Ctrl+Gを使って雲の要素すべてをグループ化し、アイコンの左上隅に配置します。またブレンドモードを比較（明）に設定し、不透明度を50%に下げます。

Step 13

青い円の右側に対となる雲を作成し、グループ化 (Ctrl+G)して、それらのすべてをビーチの砂のクリッピングマスク内に配置します。

これから作成する各アイコン用にコピーして使うので、これまで作成してきた図形をすべて選択し、グループ化します。

Step 14

各アイコン用として、初期背景にそのコピーを３つ作成する必要があります。参照グリッドの上に配置し、利用可能なレイヤーにペーストしたか確認してください。

これでデフォルトの「空白」アイコンが完成しました。次からはいよいよ、４つのアイコンにそれぞれキーオブジェクトを追加していきます。

6. モヒートアイコンの作成

最初に作るアイコンはジャーモヒート（モヒートの瓶）です。 すでに適切なレイヤーがあるので、ロックしたり他のレイヤーのロックを解除したりすることなく、直接作業を始めることができます。

Step 1

長方形ツール (M) を使って、 48 × 50 ピクセルの図形を作成します。色は#9FBA7Dにし、砂のビーチの下の方に配置します。整列パネルを使って、水平中央にしておきます。

Step 2

次に今作成した図形の上、16pxのところに、28 x 4 px 四角形 (#9FBA7D) を追加します。

Step 3

ペン ツール (P) を使って、2 つの図形をつなぎ、それぞれの起点から8pxのところで交差するようにハンドルをドラッグして、ネック部分の曲線を描画します。

Step 4

モヒートジャー（瓶）を作る３つの図形を選択し、パスファインダーの形状モードで使って１つのオブジェクトにします。

Step 5

ジャー（瓶）のメイン図形ができたので、パスのオフセットで4 pxの太い輪郭 (#493E3E)を追加します。 （オブジェクトから > パス > パスのオフセット を選択し、オフセット値フィールドに4pxと入力しします。）

Step 6

次に36 x 2 pxの角丸長方形を作って首のふちを追加しましょう。角の径は1pxにし、色は#CCC8BEにします。 4 px の境界線(#493E3E) を追加し、ジャー（瓶）の上部と境界線が交差するように配置します。

Step 7

先ほど作成した2つの図形を選択して、Alt キー（コピー作成）とShiftキー（まっすぐにドラッグ）を押しながら、上にドラッグし、新たに別の図形を追加します。

Step8

ジャー（瓶）の細かな表現を追加しましょう。両サイドに-2pxのオフセットを使ってハイライトを作ります。上と下と真ん中は取り除きます。 そうしてできた図形の色を白 (#FFFFFF) にします。またブレンドモードをソフトライトにし、不透明度を80%に設定して、透明度を調整します。

Step 9

長方形ツール (M) を使用して、2 x 70 pxと作成し、さらに少し大き目の 4 x 70pxの長方形を右側に2px離して配置します。それからグループ化し（Ctrl+G）、透明度を調整します。値は両サイドのハイライトに使用したものと同じ値を使用します。

それらができたらジャー（瓶）上に右側数ピクセル開けて配置しましょう。

Step 10

28 x 4 px の(#000000) 長方形を、最初に作ったリッジの下に追加します。そして不透明度を40%下げて、シャドウに変えましょう。

Step 11

次に、楕円ツール (L) を使って2 x 2 px の円 (#493E3E) を、2px間隔で2行分描いてグループ化（Ctrl+G）しておきます。それらはジャー（瓶）にセンタリングし、最初のリッジから約 20px離して設置します。

Step 12

角丸長方形ツールを選択し、角径が12pxの24×42 pxの図形を作ります。色は#EDDAC0にしましょう。また4 pxのアウトライン（#493E3E）を追加します。それらをジャー（瓶）の真ん中に配置し、縦位置は先ほど追加した点々から8px離れたところにします。

Step 13

ジャー（瓶）のボディに行なったように、同様にハイライトを２つを追加し、ツヤ感を出します。

Step 14

円、長方形、角丸四角形などのいくつかの単純な図形を用いて、ラベルの要素をいくつか追加します。 それができたら、それを構成するすべての図形を選択し、ショートカットCtrl+Gを使用してグループ化しておきます。

Step 15

次にジャー（瓶）の上部に移動して、2つのリッジにハイライトを追加します。メインの色は白 (#FFFFFF) とし、ブレンドモードをソフトライトにし、不透明度は80%に設定します。

できたら、ショートカットCtrl+Gを使用して、各リッジの要素をグループ化します。

クイック ヒント: 100% ズーム レベルではいくつかの詳細を瞬時に表示できない場合がありますので、それらを持っていることをお勧めします。別のプロジェクト用のアセットの拡大版が必要になると知らないならなおさらです。

Step 16

ストローを作り始めましょう。まず4 x 22pxの長方形を作成し、色は#EDDAC0にします。また4pxのアウトライン (#493E3E) を追加し、ジャー（瓶）の最上部エリアの右側に寄せて配置します。

Step 17

続いて4 x 2 px の長方形 (#FFFFFF) ストローの上部にハイライトになるよう設置します。ブレンドモードをソフトライトにし、不透明度を90%にします。

4 x 4 pxの黒の(#000000) 正方形をその下部に追加し、不透明度を40%にして影にします。

Step 18

ペンツール (P)を使って２つの斜線を追加し、ストローを仕上げます。色は#493E3E を使用します。 完了したら、ストローの構成要素をすべて選択して、Ctrl+Gでグループ化しておきます。

Step 19

ミントの葉を作りましょう。14 x 14 px の円（#809B54）（1）を作ります。この図形の上部のアンカーを選択して、8px分上に引き上げます。（2） そけから、4pxのアウトライン（#493E3E）（3）と、内側のハイライト（色：白、ブレンドモード：ソフトライト、不透明度：80%）（4）を追加します。そして、葉全体を45度傾けます（5）。最後に葉の下部にシャドウ（色：黒、不透明度：40%）を追加します（6）。

Step 20

Ctrl+G のキーボード ショートカットを使用し全ての要素をグループ化し、ストローの左側に葉を置きます。

この時点でモヒートジャー（瓶）がほぼできたので、すべての要素を選択してCtrl+Gでグルーピングし、間違えて置き換えられてしまうこととのないようにしましょう。

Step 21

最初のアイコンを完成させるために、ジャー（瓶）の下部をマスクしなければなりません。そうして背景の曲線に添わせます。

これをするため、単に青い円をコピーし（Ctrl+C）、ジャー（瓶）の上位にペースト（Ctrl+F）します。

Step 22

ジャー（瓶）を背景の表面の外に置くためのマスク用の円の調整を行います。円の上部のアンカーポイントを削除して、ペンツール（M）を使って新しいパスを描きます。上部の描画エリアまでカバーするようにしてください。

Step 23

調整した円と、モヒートジャー（瓶）を両方選択肢、右クリックしからクリッピングマスクを作成を行います。 マスクしたジャー（瓶）と背景を選択して、Ctrl+Gでグループ化しておきます。

最初のアイコンを作り終えたので、そのレイヤーをロックし、次に作成するアイスクリームアイコンの作業レイヤーに移動します。

7.アイスクリームアイコンの作成

すでに 2 番目の参照グリッド上にズームしていると仮定して、2番目のアイコンにとりかかりましょう。

Step 1

角丸長方形ツールを選択して、48 x 92 pxの図形 (#E25439) を作成します。角の半径は6pxにします。また、変形パネルを使って上部の角径を 24px に変更します。 いつもの4 pxのアウトライン(#493E3E) を追加し、2 つの図形を描画エリアの一番上に配置します。

Step 2

上位レイヤーにハイライトを追加してアイコンにツヤ感を追加しましょう。ハイライトは塗りつぶしカラーとして白色（#FFFFFF）を、ブレンドモードをソフトライトに、不透明度 を80%に設定して使います。

できたら、構成する要素をすべて選択して、Ctrl+Gでグループ化しておきます。

Step 3

アイスクリームの棒にとりかかりましょう。12x12pxの正方形を描きます。色は#D3B276にし、4 pxのアウトライン(#493E3E)も追加します。それら２つを前のステップで作った図形の下に置きます。

Step 4

長方形ツール (M) を使って、2 x 12 pxの図形 (#FFFFFF)を２つ作成し、アイスクリームの棒の両サイドに配置します。また、ブレンドモードをソフトライトに、不透明度を80%にして調整します。

Step 5

棒にテクスチャを追加しましょう。メインカラーに#B2915Dを使用し 、2 px 幅の角丸四角形を2、3個描きます。

Step 6

あらたに12 x 4 px の黒い (#000000) 長方形を作成し、棒の一番上に配置します。不透明度を40%にして、シャドウにします。

シャドウが追加できたら、棒の要素をすべて選択してグループ化（Ctrl+G）します。間違って置き換えないようにします。

Step 7

アイスクリームの構成要素すべてをCtrl+Gでグループ化し、最初のアイコンの時におこなったようにそれらをマスクします。

これで2番目のアイコンが完成したので、そのレイヤーをロックし、3番目のアイコンのレイヤーに移動します。

8. サーフボードアイコンの作成

3 番目のアイコンのサーフボードまでやってきました。アイスクリームアイコンのように、簡単に作成できるでしょう。

Step 1

楕円形ツール (L) を使用して、48 x 164 pxの図形を作成します。その際、色は#D3B276 にします。 そして、いつもの4pxのアウトライン（#493E3E）を追加します。両方の図形を3つ目の背景の上に置き、描画エリアの上に配置します。

Step 2

サーフボードにリングのようなハイライトを追加します。メインの塗りつぶしカラーとして白（#FFFFFF）を使い、ブレンドモードをソフトライトに、不透明度を80%にします。

Step 3

2px幅の角丸の長方形（#B2915D）を色んな間隔で配置してテクスチャを追加します。そしてマスクをして外にはみ出さないようにしましょう。

Step 4

さらにハイライト（色：白、ブレンドモード：ソフトライト、不透明度：80%）を垂直方向に２本追加します。ボードの右寄りに配置し、リング状のハイライトに重ならないよう、マスクをしましょう。

Step 5

続いてサーフボードに詳細を追加していきます。18 x 32 pxの楕円を作成し、色は#EDDAC0にします。 4pxのアウトライン（#493E3E）を追加し、それらをサーフボードの横中央、縦は上から82pxのところに配置します。

Step 6

今作った楕円の図形にいつものようにハイライトを追加します。そして、仕上げに2 x 84 pxの長方形（#493E3E）を中央に追加し、楕円形の先端から降りてくるようにします。

Step 7

サーフボードを構成する要素すべてを選択して、Ctrl+Gを使ってグループ化しておきます。これで他のアイコンに行なってきたようにクリッピングマスクができます。

終わったら、マスクされたボードと背景を選択して同様にそれらをグループ化します。

9. 砂バケツアイコンの作成

あともう一息ですよ！ 残りは4 番目の最後のアイコンを作成するのみです。

すでに砂バケツのレイヤーに移動したという前提で、その参照グリッド上にズームして、完成させましょう。

Step 1

長方形ツール (M) を使用して、40 x 28 pxの図形を作ります。色はダークグレー (#AAA79F)にし、描画エリアの横中央に、また縦位置はビーチの砂の底辺に合わせます。

Step 2

ダイレクト選択ツール (A) で底辺のアンカーポイント選択し、それぞれ内側に2pxずつ移動させ、図形を調整します。それでできた図形にパスのオフセットで4pxのアウトライン (#493E3E)を追加します。

Step 3

オブジェクトの見た目がポップになるよう、いつものハイライトと影を追加します。 ハイライトには、ソフトライトと不透明度80%の白 (#FFFFFF) を用い、シャドウは、不透明度40%の黒 (#000000) にします。

Step 4

ラベルを追加します。角径が8px の16 x 20 px の角丸長方形を作ります。色は#EDDAC0を使用します。 4 px のアウトライン (#493E3E) を追加しましょう。そして両方の図形をバケツの横中央と上から10 px のところに慎重に配置します。

Step 5

ラベルにいくつかのハイライトを与え、そして、小さな長方形(#493E3E)を２つ追加します。魅力的な見栄えにするためのダミーテキストです。

それができたら、バケツの構成要素をすべて選択し、Ctrl+Gを使ってグループ化しておきます。

Step 6

長方形ツール (M) を使用して、色が#CCC8BE の 48 × 10 pxの図形を作成します。 4 px のアウトライン (#493E3E) を追加し、先ほど作成したバケツの上にアウトラインと重なるよう配置します。

Step 7

新しい形にいくつかのハイライトを与えます。色は白 (#FFFFFF) を使って、ブレンドモードにソフトライトを設定し、不透明度を80%に下げるて、透明度を調整します。

Step 8

次に、2 x 2 pxの円 (#493E3E) を３つで１セットとし、２セット追加します。バケツの上のそれぞれのサイドから、水平方向と垂直方向両方2px間隔で配置します。

Step 9

バケツの上部のセクションの仕上げとして、22 x 2 px の角丸長方形(#493E3E) を追加します。角径は1 px とし、中心に配置します。 それからすべての構成要素を選択して、Ctrl+Gでグループ化します。

Step 10

小さなシャベルにとりかかりましょう。8 x 46 pxの長方形を作ります。色は#E25439にしておきましょう。 いつものように 4 px のアウトライン (#493E3E) を追加し、できた２つの図形を砂のバケツの上に配置します。アウトラインが重なっているかどうかを確かめてください。

Step 11

両サイドに  2 x 44 px の長方形 (#FFFFFF) 2つ追加します。ブレンドモードにソフトライトを設定し、不透明度を80%に下げることによってハイライトにします。

Step 12

長方形ツール (M) を使用して、さらに小さい8 x 4 pxの図形を作ります。色は黒 (#000000) にして、不透明度を40%にすることでシャドウにします。シャベルの本体の底に置きましょう。

Step 13

次に、シャベルの現在のセクションにいくつかの細かいラインを追加します。2 x 14 px の長方形を作成し、続いて、別に小さな 2 x 2 pxの図形を2px離して配置します。 両方の図形の色#493E3E とし、赤い図形の真ん中に整列させます。その際、縦位置は先ほど作ったシャドウから数px上に配置しましょう。

Step 14

シャベルのハンドルを作成しましょう。28 x 20 pxの大きさで角径4pxの角丸長方形を描きます (1)。 その図形からパスファインダーの全面オブジェクトで型抜きを使って、20 × 12 px の長方形で切り抜きます (2)    できた図形に4px のアウトライン(#493E3E)を追加します。 そしてそれを下のレイヤーに移動させてください。(右クリック >重ね順> 最背面へ) (4)。 それから 角径が 2px の 6 x 4 pxの角丸長方形（#493E3E）をアウトラインの下のところに追加します (5)。ハンドルの仕上げにいくつかのハイライトを追加します(6)。

Step 15

すべての砂バケツの要素をCtrl+Gを使ったグループ化し、これまでと同じように、それらをマスクします。

これでおしまい！

夏の雰囲気をキックオフする準備ができた4 つのかわいいアイコンをあなたは手にしました。 あなたがチュートリアルの各ステップに従ってなんとかやりとげ、何か新しく役立つものを習得されたことを願っています。