7-2.アイコン調の画像を作成する

学習フロー部分に入れる画像を作りながら、図形を組み合わせてアイコン調の画像を作っていきましょう。
これが出来れば、Webデザインに使うアイコンも自作できるようになりますよ。

Illustratorの設定

LPのような大きなサイズのデザインを行っている場合、アイコンなどは別のドキュメントを作って作成したほうが進めやすいです。

新規ドキュメントを作成しましょう。
Webプリセットで、サイズは大きすぎないものであればOKです。
新規作成して、わかりやすい名前で保存しておいてください。

画像サイズを揃えるための、枠を作る

これから作成する5つの画像の、サイズを揃えるために枠を作ります。

デザインでは正方形にしていますが、今回はちょっと横長にしましょう。
幅250px × 高さ200pxの長方形を作ります。
目立つ色で枠線を付けておきましょう。

複製して5個、もしくは6個並べておきます。

レイヤー名を枠などわかりやすいものに変更し、レイヤーをロック。
新規レイヤーを追加して、画像はそちら（下図の場合はレイヤー1）で作ります。

拡大縮小の設定をする

円でも四角でも何でも良いので、図形を一つ描画してみてください。
右クリックメニューから 変形 > 拡大・縮小 を開きます。

オプションの項目、下図の２つはチェックを外しておいてください。

画像の作成

1-目標の決定

【階段】

1. 角丸の正方形を作ります（線の太さ6pt、角丸10pxくらい）
2. 右クリックメニューから拡大縮小を開く
3. 垂直方向を50％にしたコピーを作成する
4. 正方形の左へ移動
5. 正方形を選択。拡大縮小を開いて.垂直方向を150％でコピーを作成
6. 正方形の右側へ移動

【旗を作る】

1. 長方形×1、多角形ツールで三角形×1を作成
2. 三角形を回転させ、長方形と重ねる
3. 三角形の横幅を縮め、調整する（黒色の部分が旗になります）
4. 長方形と三角形の両方を選択し、パスファインダー > 前面オブジェクトで型抜き
5. 塗りと線を反転する

【旗と階段の合体】

1. 太さ6ptの線を挿入し、旗の左と重ねる 2 .階段の上に移動
2. 枠内に入れて全体のサイズ、バランスを整える

枠の中に入れて整えてみましたが、ちょっと間延びしていますね。

階段の幅を狭く（細く）なるように縮小。
直線ツールを使って、地面に見立てた横棒を加えます。 線パネルで“線端”を丸型に変更すると、線の先が丸くなります。

2-カウンセリング

【人を作る】

1. 正円と楕円を少し重ねて人型にする
2. パスファインダーから合体する
3. 長方形を重ねる（楕円の半分より少し上まで）
4. パスファインダー > 前面オブジェクトで型抜き

【PC画面を作る】

1. 人型を複製する 6.複 製した人型の線と塗りを反転（線の太さ6pt）
2. 角丸の長方形で枠を作る
3. 人型を右に寄せて縮小
4. 枠の下に線を引きPC画面っぽく見せる（線端を丸型に） 10 .9の線を複製し、右下に三本線を配置
5. チェックマークを並べる

チェックマークは長方形や線を組み合わせて作っても、バナー講座で行ったように文字「✓」をアウトライン化して使っても良いです。

全体を見直してバランスを整えたら完成です。
下図は人を少し縦に伸ばして、スリムにしました。

3-レッスン開始

【動画再生】

1. 画面に使っていた長方形と線を複製
2. 多角形ツールで三角を作り、回転 3 .長方形の中に入れて、サイズを調整

【ファイル】

1.やや縦長の長方形を作成。角丸にする。
2.もう一つ、細長い長方形を作る。
3.2を45度回転させ、右上の角と重ねる
4.長方形を2つとも選択し、パスファインダーで型抜きをクリック
5.分離したフチを回転し、反転する

6.フチを内側に移動する
7.３本線を入れる
8.移動・回転させて動画再生と重ねる

重ねると、上図のようにPCが透けてしまいます。
（透けない方は塗りが白になっているので、なしにしましょう。）

重なった部分を取り除いていきましょう。

重ねた部分の調整

※今の状態の画像を、邪魔にならない位置にコピーしておいてくだい。

まず、あると作業しにくい再生の三角形・ファイルの線を非表示にします。
線は選択ツールで幅を変えれば大丈夫ですね。

• 画面に見立てた四角
• ファイルに見立てた四角（縁が欠けている方）

2つを選択して、シェイプ形成ツールをクリックします。

カーソルを重ねると、画面部分の重なっていないところだけ選択された状態になります。
下図のようになったら、クリックしましょう。
クリックすると、パスが分割されます。

重なっている部分の（不要な）パスを非表示に。
新しく出来た線と重なるようにファイルアイコンを移動させます。
ここまで出来たら、重なっていた部分のパスは削除してください。

非表示にしていた、再生の三角形・ファイルの線を表示します。
枠に合わせてサイズを調整すれば完成です。

4-課題提出

1.レッスン開始で作ったファイルの枠部分をコピー
2.カウンセリングで作ったチェックリストをコピー
3.ラインツールで角度45度のラインを引く
4.リフレクトツールで、垂直方向に反転させコピー
5.一番下のチェックマークと入れ替える

6.角丸長方形+三角で吹き出しを作る
7.パスファインダーを使って合体
8.塗りと線を反転。線パネルで角をラウンド結合にする
9.リフレクトツールで吹き出しを垂直方向に反転
10.移動させ、バランスを調整する

5-コーチング

【画面部分のアレンジ】

1. カウンセリングで使った画面部分を複製し、少し拡大する
2. 課題提出の図から、吹き出しを複製
3. リフレクトツールで垂直方向に反転
4. 画面の枠と吹き出しを選択し、パスファインダー>アウトライン
5. 線をつけ直す

アウトラインを実行すると、グループが出来ています。
その中に、画面枠と吹き出しの交差部分があります。非表示もしくは削除してください。

線の太さを6ptに、角の形状をラウンド結合にします。

【画像作成】

1. 先程作った、吹き出し付き画面を配置
2. 黒塗りの人を複製。縮小して配置する
3. 正円を作る（塗りなし、線を黒）
4. 円を選択した状態で、効果>パスの変形>パンク・膨張を開く
5. スライダーを縮小の方に動かし、キラキラの形を作る
6. 黒い人の上に配置し、丁度良いサイズに縮小
7. キラキラを複製→縮小して並べる

リフレクトを使って、黒い人の左側にもキラキラを配置します。
これで5つのアイコン風画像が完成しました！

LPデザインで使う準備

作成したアイコン風画像を、それぞれの画像ごとにグループ化しておきましょう。
ドラッグで範囲選択すると早いです。

5つのグループを作った後は、どれか1つを選択。
右クリックメニューから 変形 > 拡大縮小 を選びます。
最初にチェックを外した、オプションに再びチェックを入れてOKをクリックしてください。

デザイン内に挿入する

LPデザインの空欄部に、作った画像を挿入しましょう。
コピー＆ペースト、使いたいドキュメントへのドラッグ、どちらでも移動させることが出来ます。

それぞれ、お好みに合わせて幅140～150pxくらいに縮小。
仮置の四角形も活用して、配置していきましょう。

最後に、灰色の四角形を非表示にすれば完成です！