Illustrator

基本機能

Effect Process
Illustrator ツールパネル ▶︎ページはこちら
キー（Mac, Windows） Command＝Ctrl
Option＝Alt
ピクセル表示設定 「Illustrator CC」メニュー＞環境設定＞単位＞すべてピクセル
ピクセルプレビュー 「表示」メニュー＞ピクセルプレビュー
※ウェブ用パーツを作成する時は必ず設定
選択ツール Cmdを押しながらクリック
（テキスト入力中はEsc or Cmd + Enter）
編集の取り消し Cmd + Z
編集のやり直し Shift + Cmd + Z
前回の動作を繰り返し Cmd + D
オブジェクトをコピー オブジェクトを選択＞Option + ドラッグ
オブジェクトを同じ場所にコピー Cmd + C ＞ Cmd + F
複数オブジェクトの選択 Shift + オブジェクトを選択
オブジェクトをグループ化 複数のオブジェクトを選択＞Cmd + G
レイヤーを複製 レイヤーパネル＞レイヤーを選択＞パネルオプション＞レイヤーを複製
手のひらツール ・スペース（テキスト入力中はOption）
・手のひらツールをダブルクリック＞全体表示
拡大、縮小表示 ・スペース + Cmd + ドラッグ（or スクロール）
・タッチパッドでは2本指を広げ/縮める
・拡大・縮小ツール＞ドラッグしながら伸び縮み
・拡大、縮小ツールをダブルクリック＞100%表示
画像から色を抽出 スポイトツール＞Shift + クリック
アウトライン表示 Cmd + Y
アートボードを追加する アートボードパネル＞「新規アートボード」をクリック
アートボードを切り替える Option + 矢印
カラー無し 英字「/」
パス内の塗りつぶし クローズパスを選択＞描画色を選択＞ライブペイントツール＞パス内をクリック
パネルの表示、非表示
（すべて）		 Tab
パネルの表示、非表示
（ツール、コントロールパネル以外）		 Shift + Tab
ガイドの位置調整 定規を表示：「表示」メニュー＞定規＞定規を表示＞定規からドラッグ
ロック解除：「表示」メニュー＞ガイド＞ガイドをロック解除
位置調整：ガイドを選択＞変形パネル＞X, Y座標を位置調整
画像の配置 「ファイル」メニュー＞配置＞ファイル選択＞「リンク」チェックを外す＞配置
※読み込み後、幅・高さに小数点が表示されたら端がにじんでしまうので、小数点を手動で削除
※画像の解像度（ppi）がWeb用解像度「70」以下にならないように注意
代替フォントを強調表示 「ファイル」メニュー＞ドキュメント設定＞「代替字形を強調表示」にチェック
aiファイルのバージョンが不明な時 テキストエディタで開くと、テキスト中に記載あり

選択ツール

Effect Process
数値を入力して移動 オブジェクトを選択＞選択ツールをダブルクリック（or Enter）
または、変形プロパティのX, Y座標欄に「+20, -10」式を追加
ピクセル移動（キー入力の値（Cmd + k）×10倍の移動） オブジェクトを選択＞Shift + 矢印

パスの調整

Effect Process
パスの名称 ︎▶︎パスの名称はこちら
水平、垂直、45度線の描画 ペンツール＞Shiftを押しながら始点と終点をクリック
描画中のアンカーポイント移動 ペンツール＞（描画中）＞スペースを押しながらドラッグ
曲線から直線を描画（次のセグメントの方向線を削除） ペンツール＞（曲線を描画中）＞アンカーポイントをクリック＞直線を描画（終点をクリック）
描画の終了 Cmd + 何も無い所をクリック
曲線のアンカーポイントの調整
（片方の方向線だけ調整）		 パスを選択＞ダイレクト選択ツール＞Optionを押しながら方向線をドラッグして調整
アンカーポイントの追加 パスを選択＞ペンツールでセグメント上をクリック
アンカーポイントの自動追加 パスを選択＞「オブジェクト」メニュー＞パス＞アンカーポイントの追加
アンカーポイントの削除 パスを選択＞ペンツールで削除したいアンカーポイントをクリック
（またはダイレクト選択ツールでアンカーポイント選択＞Delete）
※直線などの場合、余分なパス（「選択」メニュー＞オブジェクト＞余分なポイント）が残ることがあるので任意削除
セグメントを消去する ダイレクト選択ツール＞セグメントをクリック（複数の場合はShiftを押しながら）＞Delete
不要なパスを削除する 「オブジェクト」メニュー＞パス＞パスの削除
パスをコーナーポイントで連結 ダイレクト選択ツール＞2つの線端をドラッグして範囲選択＞「オブジェクト」メニュー＞パス＞連結
パスをスムーズポイントで連結 ダイレクト選択ツール＞2つの線端をドラッグして範囲選択＞Option + Shift + Cmd + J＞スムーズ＞OK
コーナーポイントからスムーズポイントに切替え パスを選択＞アンカーポイントツール＞コーナーポイントをドラッグ
（またはオプションバーの当該ボタンクリック）
スムーズからコーナーポイントに切替え パスを選択＞アンカーポイントツール＞スムーズポイントをクリック
（またはオプションバーの当該ボタンクリック）
パスを点で切断（はさみツール） パスを選択＞はさみツール＞パス上をクリック
※はさみ・・オープンパスで切断
パスを線で切断（ナイフツール） パスを選択＞ナイフツール＞パス上をドラッグ
※ナイフ・・クローズパスで切断
アンカーポイントを揃える ダイレクト選択ツール＞複数のアンカーポイントを選択＞「オブジェクト」メニュー＞パス＞平均＞平均の方法を指定してOK
▶︎パスの平均方法はこちら
方向線の役割 ▶︎ベジェ曲線の概念はこちら

鉛筆ツール

Effect Process
いびつな線をなめらかにする スムーズツール＞滑らかになるまでパスに沿ってドラッグ
（またはオブジェクト＞パス＞単純化）

ブラシ、塗りブラシツール

Effect Process
塗りブラシツール 塗りブラシは、ペイントした領域が塗りになるパスを作成するツール
ブラシを太く ブラシ・塗りブラシツール＞ ]
ブラシを細く ブラシ・塗りブラシツール＞ [
カリグラフィブラシオプションを設定 ブラシ・塗りブラシツール＞ブラシパネル＞各項目をダブルクリック
塗りブラシを使った雲の作成 塗りブラシツール＞雲の形を描画＞グループ選択ツール＞内側のパスを選択＞Deleteで削除

消しゴムツール

Effect Process
選択した範囲を削除 消しゴムツール＞Optionを押しながらドラッグ
ブラシを太く 消しゴムツール＞ ]
ブラシを細く 消しゴムツール＞ [

線と文字

Effect Process
線幅ツール ・基本線、アートブラシ、パターンブラシは線幅ツールで編集可能
・カリグラフィブラシ、散布ブラシ、絵筆ブラシは編集不可
線幅を変える パスを選択＞線幅ツール＞線幅を変える位置のアウトライン（中心線）にポインタを重ねる＞外側or内側に向けてドラッグ＞さらに調整する際は、外側にポインタを重ねてドラッグ
（外側or内側のみ調整する際は、Optionを押しながらドラッグ）
複数の線幅ポイントを同時に移動 パスを選択＞線幅ツール＞Shiftを押しながら線幅ポイントをドラッグ
または、線幅を変える位置をダブルクリックして設定
私鉄の線を描く ペンツールなどで線を描画する＞パスを同じ位置にコピー
＞アピアランスパネル＞線パネルを開く
＞線幅：10に設定＞破線にチェック＞線分：2　間隔：15に設定
文字の線 文字ツール＞テキストを入力＞アピアランス＞新規線を追加＞色、線幅を設定＞「塗り」を前面に移動することで塗りが隠れなくなる
文字のグラデーション反転 テキストオブジェクトを選択＞リフレクトツール＞水平にコピー
＞位置を少し下にずらして間隔を空ける
＞オプションバーで文字の色、線を無しに設定
＞アピアランス＞新規塗りを追加＞グラデーションを選択
＞グラデーションパネル＞両端で黒（#000000）を指定
＞終点の不透明度を0に指定（色は黒のまま）＞グラデーションツール
＞グラデーション方向を上から下に描画
＞グラデーションパネル＞不透明度：30%に設定
＞両オブジェクトを選択してグループ化
画像を回り込むような形でテキストエリアを作成 長方形などを組み合わせて形状を作成＞パスファインダー＞合体＞文字ツール＞パスをクリック＞エリア内にテキストを入力

図形

Effect Process
中心から長方形を描く 長方形ツール＞Optionを押しながらドラッグ
長方形を角丸にする オブジェクトを選択＞効果＞スタイライズ＞角を丸くする
始点から終点位置を指定して円を描く 楕円形ツール＞Cmdを押しながらドラッグ
角度を固定して多角形を描く 多角形ツール＞Shiftを押しながらドラッグ
多角形の辺の数を増減 多角形ツール＞描画中に矢印（上下）を押下
第一半径を固定してスターを描く スターツール＞Cmdを押しながらドラッグ
一直線に揃えたスターを描く スターツール＞Optionを押しながらドラッグ
描きながらパスを移動 図形ツール＞描画中にスペースを押下
スターツール 例）第１半径：25mm　第２半径：5mm
▶︎スターツールはこちら

変形

Effect Process
回転 オブジェクトを選択＞回転ツール＞基準点をクリック＞オブジェクトをドラッグして回転
※Shiftを押しながら・・45度単位に固定
数値入力で回転 オブジェクトを選択＞回転ツールをダブルクリック
（基準点を指定する場合は、アートボード上でOptionを押しながらダブルクリック）
拡大・縮小 オブジェクトを選択＞拡大・縮小ツール＞基準点をクリック＞オブジェクトをドラッグ（ドラッグした方向に拡大・縮小）
数値入力で拡大・縮小 オブジェクトを選択＞拡大・縮小ツールをダブルクリック
ドラッグで反転 オブジェクトを選択＞リフレクトツール＞基準点をクリック＞2つ目の基準点をドラッグして反転軸を調整
（コピーする場合は、Optionを押しながらドラッグ）
数値入力で反転 オブジェクトを選択＞リフレクトツールをダブルクリック
（基準点を指定する場合は、アートボード上でOptionを押しながらダブルクリック）
ドラッグで傾ける オブジェクトを選択＞シアーツール＞基準点をクリック＞オブジェクトをドラッグした方向に傾斜する
数値入力で傾ける オブジェクトを選択＞シアーツールをダブルクリック
変形パネルで傾ける オブジェクトを選択＞変形パネル＞基準点を指定して、シアーに値を入力
リシェイプ ダイレクト選択ツール＞変形する範囲を選択＞リシェイプツール＞変形しないアンカーポイントをShiftで複数選択＞カーソルの右下に□が表示された状態で変形方向へドラッグ
ピクセルグリッドに整合 ・オブジェクトを選択＞「オブジェクト」メニュー＞ピクセルを最適化
・オブジェクトを選択＞右クリック＞ピクセルを最適化
・オブジェクトを選択＞コントロールパネル＞「選択したアートをピクセルグリッドに整合」ボタンをクリック

オブジェクトの編集と合成

Effect Process
画像を2枚重ねてグラデーション 画像を2枚重ねる
＞2枚が重なっている範囲に収まるように長方形を描画する
＞長方形にグラデーションをかける
＞レイヤーパネルで前面の画像1枚と長方形を選択
＞アピアランス＞不透明度＞「マスク作成」クリック
＞切り抜きたい範囲に、もう1枚長方形を載せる
＞全選択＞「オブジェクト」メニュー＞クリッピングマスク＞作成
オブジェクトを等間隔に並べる ブレンドツール（ダブルクリックするとブレンド方法を変更可能）＞始点となるオブジェクトをクリック＞終点となるオブジェクトをクリック

バナー作成

Effect Process
バナー作成 バナーサイズのアートボードを作成
＞表示＞ピクセルプレビュー
＞画像を配置＞縮小
＞画像と空きスペースを覆うように長方形を描画
＞長方形の塗り＞グラデーションパネル＞グラデーションを選択
＞グラデーションツール＞透明〜描画色で設定
＞クリッピングマスクでベースを確定
＞上に重ねる画像を配置＞ペンツールなどで切り抜く範囲のパスを描画
＞パスの塗りをグラデーションに設定（白〜黒）
＞画像とパスのレイヤーを選択＞透明パネル＞マスク作成
＞文字ツール＞テキスト入力＞アピアランス＞線の色と線幅を設定＞新規塗りを追加＞塗り色を設定（塗りを上にする）
＞アピアランスの線を選択＞新規効果を追加＞スタイライズ＞ドロップシャドウ（線に対してかける）
＞前面にバナーサイズの長方形を描画＞全選択＞クリッピングマスク

ワイヤーフレームの作成

Effect Process
ワイヤーフレーム作成 ①新規ファイル作成＞幅、高さ指定
②定規を表示＞ガイドを設定＞レイヤーごとロック
③ピクセルプレビューON
④レイヤーをサブコンテンツ分作成（header, contents, footerなど）
⑤キービジュアルを配置
⑥各レイヤーに背景としての図形を作成（線無し、塗りのみ）
⑦header, footer内にロゴなどの図形、テキストを配置
⑧メインコンテンツ部分はサブレイヤーを作成

・線の座標位置：「直線ツール」で作成した線のX, Y軸位置はパスの中心軸が基準になるので、1px幅の場合は0.5のずれが発生する（座標を入力すると自動で0.5補正が入る）が気にしなくてよい。（線を図形で作ると0.5のずれは発生しない。）
・図形のクオリティ：図形を拡大（800%位）してもし滲んでいたら、ピクセルを最適化（ピクセルグリッドに整合）する。
※小数点が入ると必ずにじむ＝クオリティが低下するので注意
・Illustratorで図形の枠に線を指定する場合は、「パスを図形の内側」に設定する。（正確さが必要な場合）
手順：図形を描画＞線パネル＞線の位置：線を内側に揃える

デザインカンプの作成

Effect Process
デザインカンプ作成 ※作業の際は、編集するレイヤーのみロックを解除し、作業が終わったらすぐにロックをかけておく。
①ワイヤーフレームを別名保存し、カンプ用のファイルを作成
（ファイル名：wf→designに変更）
②各ブロックの背景色を指定
③キービジュアルの画像を配置してクリッピングマスクをかける
④ヘッダー、フッターをデザイン
⑤サイドバー、バナーをデザイン
⑥メインコンテンツをデザイン
※上下のコンテンツの両端などはぴっちり揃えること！
※隙間もきっちり計算して揃える
⑦ナビゲーションメニューのロールオーバー、カレント状態をデザイン
⑧ファビコンを作成

スライスの作成

Effect Process
①スライス領域を作成 オブジェクトを選択＞「オブジェクト」メニュー＞スライス＞選択範囲から作成
※スライスは絶対に重なる場所を作らない！
※クリッピングマスク：マスク用の前面パスを選択＞スライス作成
②スライスを書き出し 「ファイル」メニュー＞Web用に保存（モード：最適化）
＞オブジェクトをダブルクリック＞スライス名を編集
＞プリセットを選択
※透明部分があればPNG形式、「透明部分」にチェックを入れる
　また、背景となる画像をすべて非表示にしてから書き出す
※小さな画像（メール、サイトマップアイコン類）はSVG形式
※色が少ないロゴなどはGIF
＞書き出し：すべてのユーザー定義したスライス＞保存

※SVG形式の書き出し
オブジェクトをコピー＞新規ファイルに貼り付け＞X, Y座標を0, 0に指定
＞「オブジェクト」メニュー＞アートボード＞選択オブジェクトに合わせる
＞「ファイル」メニュー＞書き出し＞書き出し形式＞ファイル形式：SVG＞書き出し