イラストレーターで作る夏のアイコンパック

Japanese (日本語) translation by Naoko Takeda (you can also view the original English article)

Final product image — What You'll Be Creating

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

あなたはいつでもそのセットを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）色の四角を作ります。アイコンのサイズのベースとなります。

creating the main shape for the reference grids

Step2

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

creating the main shape for the active drawing area

Step3

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

creating and positioning all four reference grids

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

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

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

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

Step1

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

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

creating the main shape for the default background

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

Step 2

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

creating the outline for the default backgrounds main shape

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

Step3

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

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

creating the default backgrounds ring highlight

Step 4

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

adjusting the blending mode for the default backgrounds highlight

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

Step5

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

creating the main shape for the beach sand

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

Step6

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

adding an outline to the beach sand shape

Step7

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

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

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

Step8

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

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

using a clipping mask to hide the outer sections of the beach sand

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

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

Step 9

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

adding the ring highlight to the beach sand section

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

Step 10

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

adding a highlight to the upper section of the beach sand

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

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

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