この記事では、Adobe Illustrator CCでWebデザインを行う時に必要な設定の解説をしています。単位や表示の変更を行う方法を詳しくお伝えします。
また、次回作成時にも設定を流用できるように、プリセットに保存する方法も紹介しています。
STEP１: 作業環境の変更
単位をピクセルに変更
上部メニューの「編集」＞「環境設定」＞「単位」を選択します。
→ショートカットキーは「Shift+Ctrl+U」（macはshift+command+U）
環境設定ダイアログの単位メニューが表示されます。
一般・線・文字・東アジア言語のオプションの単位を全て、「ピクセル」に変更します。
次に、一度OKをクリックして、設定を保存します。
もう一度環境設定ダイアログを開き、一般メニューを選択してキー入力項目を「１px」と入力します。
ガイド・グリッドの変更
次に、ガイド・グリッドメニューを選択します。
グリッドと分割数に任意の値を指定してから、OKをクリックして設定を保存します。
ワークスペースをWEBデザイン用に変更する
上部メニューの「ウィンドウ」＞「ワークスペース」＞「Web」を選択します。
STEP２: 新規ドキュメント作成時の設定
新規ドキュメントダイアログを開きます。
プロファイルをWebに設定すると、Web用に適した設定が読み込まれます。
任意のサイズを設定し、
・プレビューモード→「ピクセル」
・「新規オブジェクトをピクセルグリッドに整合」→チェックを外す
最後にOKをクリックします。
※設定を変更すると、プロファイルの表示がカスタムになりますが、そのままOKをクリックします。
「新規オブジェクトをピクセルグリッドに整合」をオフにする理由
条件によっては、オブジェクトの境界線と描画にずれが生じるため、新規ドキュメントの設定時はオフにします。必要に応じて、変形パネルでオブジェクト毎に設定します。
【設定方法】
上部メニューの「ウィンドウ」＞「変形」から変形パネルを開きます。
→ショートカットキーは「Shift＋F8」
オブジェクトを選択し、ピクセルグリッドに整合のチェックを入れます。
STEP３: 表示の確認
上部メニューの「表示」から、「ピクセルプレビュー」と「ピクセルにスナップ」の設定が有効になっているか確認します。
次に、必要に応じて定規とグリッドを表示します。
定規
上部メニューの「表示」＞「定規」＞「定規を表示」を選択します。
→ショートカットキーは「Ctrl＋R」（macはcommand+R）
グリッド
上部メニューの「表示」＞「グリッドを表示」を選択します。
→ショートカットキーは「Ctrl＋¥」（macはcommand+¥）
STEP４: 線の位置を内側に揃える
オブジェクトを選択し、コントロールパネルの「線：」をクリックします。
線パネルで、線の位置を内側に設定します。
次から新規作成するオブジェクトにも設定を適用するため、アピアランスパネルの設定を変更します。
上部メニューの「ウィンドウ」＞「アピアランス」でアピアランスパネルを開きます。
→ショートカットキーは「Shift＋F6」
アピアランスパネルの右上をクリックし、項目を表示させます。
「新規アートに基本アピアランスを適用」のチェックを外します。
これで、次のオブジェクトを作成すると線が内側に揃うようになりました。
線の位置を内側にする理由
デフォルトの設定では、線の位置は中央に揃える設定になっています。最終的にオブジェクトを書き出す際に、選択範囲とオブジェクトのズレが生じることがあるため、線の位置は内側に設定します。
STEP５: 設定の保存
新規ドキュメントを作成時に流用できるように、設定内容をプリセットに登録します。
STEP４までを設定した現在のドキュメントを下記フォルダに保存してください。
※ドキュメント名がプリセット名となります。
Windows
C:\Users\ログインユーザ\AppData\Roaming\Adobe\Adobe Illustrator 18 Settings\ja_JP\x86\New Document Profiles
※バージョンに応じて、Adobe Illustrator 18 Settingsのフォルダ名の数字は変わります。
Mac
Application Support/Adobe/Adobe Illustrator CC2014/ja_JP/New Document Profiles
※バージョンに応じて、Adobe Illustrator CC2014のフォルダ名の数字は変わります。
Illustratorを再起動し、新規ドキュメントを作成します。
プリセットの一覧に新しいプリセットが追加されました。
※線の位置のみ、一度はオブジェクト作成時に内側に揃える必要があります。
