長方形グリッドツールを使ったアイコンの作成１

＜長方形グリッドツールを使ったアイコンの作成＞Illustrator

今回は、Illustratorの長方形グリッドツールを使い、
図１のようなデザインを簡単に作ってみます

図１

１長方形グリッドツールを選択します。（直線ツールを右にドラッグすると出てきます）（図２）

図２

2長方形グリッドツールをダブルクリックします（図３）。

図３

3水平方向の分割と垂直方向の分割数を入力
　外枠に長方形を使用、グリッドの塗りにチェックを入れます（図４）。

カラーの設定は、塗りを適当に選択し、線はなしにしておきます（図５）。
私の場合は、水平方向の分割は６と垂直方向の分割は２０としました。

図４

図５

4アートボード上にグリッドを作成します（図６）。

図６

5最上部メニューより、ウィンドウ＞パスファインダを選択し、
　パスファインダツールを表示させます。

6オブジェクトを選択したまま、分割を選択（図７）

図７

7オブジェクトを選択したまま、オブジェクト上で右クリックし、
　グループ解除を選択（図８）

図８

8最上部メニューのオブジェクト＞変形＞個別に変形を選択

9拡大・縮小の、水平方向垂直方向に同じ値をいれ、縮小します（図９）。（今回は82%にしました）

図９

10余計な部分を、選択ツールで選択、Deleteキーで削除していき、
　作りたい図形になるようにします（図１０）。

図１０

図１１

11部分的に色を変えてもよいかもしれません（図１１）

図１１

完成です☆

ふきだしのアイコン（ウェブなどに使用）

＜新規ドキュメントの設定の仕方＞photoshop
1最上部メニューよりファイル＞新規を選択

2幅→140px、高さ→140px、解像度→72pixel/inch、RGBカラー8bit、カンバスカラー白
　を選択

3レイヤーの「背景」を右クリックし、レイヤーに変換

　新規レイヤーを作成

　レイヤーに変換した「背景」レイヤーを削除する。

4カスタムシェイプツールを選択

5上部メニューより、シェイプレイヤーを選択

6上部メニューより、シェイプ横の↓をクリック
7ダイヤログ横の→をクリックし、「すべて」を選択

8シェイプより、吹き出しを選択

9ドキュメント内に、吹き出しを作成

10レイヤーの色パレットをダブルクリックし開き、色を#bdbdbdに指定。

11レイヤーをダブルクリックし、レイヤースタイルのダイヤログを表示

12
＜ドロップシャドウにチェック＞
描画モード：乗算
描画モード右のカラーをクリックし、#6b6969に指定
不透明度：46%
角度：97%
包括光源を使用にチェック
距離:0
スプレッド0
サイズ2

＜シャドウ（内側）にチェック＞
描画モード：乗算
描画モード右のカラーをクリックし、#2f2e2eに指定
不透明度：49%
角度：97%
包括光源を使用にチェック
距離:3
チョーク2
サイズ5

＜べベルとエンボスにチェック＞
スタイル：ベベル（内側）
テクニック：滑らかに
深さ：378%
方向：上へ
サイズ1
ソフト9

13新規レイヤーを作成

14ペンツールを選択し、上部メニューより、シェイプレイヤーを選択

上部メニューのスタイルはなしを選択しておきます。

　吹き出しにつやを描く

15[14]のレイヤーの色パレットをダブルクリックし、色を
　#ffffffに指定

16[15]のレイヤーの不透明度を56%にする

17吹き出し本体のレイヤーの下に、新規レイヤーを作成する

18吹き出し本体と同様、吹き出しを作成する。

19選択ツールを用い、コピーした吹き出しを本体より若干大きくする

20レイヤーの色パレットをダブルクリックし、色を
　#ffffffに指定

21不透明度を20%にする

22レイヤーをダブルクリックし、レイヤースタイルのダイヤログを表示

23＜べベルとエンボスにチェック＞
スタイル：ベベル（内側）
テクニック：滑らかに
深さ：100%
方向：上へ
サイズ5
ソフト0

完成

photoshopのファイル自体は、
最上部メニューのファイル＞保存より保存します。

web用素材としては、
最上部メニューのファイル＞webおよびデバイス用に保存を選択し
JPEGやGIF,PNG形式を選択します。

吹き出しの背景を透過させたい場合、
PNG-24を選択し、透明部分にチェックをします。

保存したPNG画像