IllustratorとPhotoshopのWebデザイン向け環境設定を紹介します

IllustratorとPhotoshopは初期設定のままではWebデザインで使いにくいところがあります。
Webデザインを始める前に設定しておきたい項目をご紹介します。

IllustratorをWebデザイン向けに設定する

まずはIllustratorのWebデザイン向け設定を紹介します。

「環境設定 > 一般」の「100%ズームで印刷サイズを表示」のチェックを外します。
この項目が有効になっていると100%ズームがピクセル等倍になりません。

「環境設定 > 一般」の「プレビュー境界線を使用」にチェックを入れます。
パスの枠線の位置を外側にした場合に、パスの高さと幅が枠線を含めた値になります。

「環境設定 > 単位」の「一般」、「線」、「文字」の単位を全て「ピクセル」に設定します。
Webデザインでは基本の単位がピクセルだからです。

「環境設定 > テキスト」の「サイズ/行送り」と「ベースラインシフト」の単位を「px」に設定します。
単位が「px」であれば数値は任意のもので大丈夫です。僕は「2px」に設定しています。

「環境設定 > テキスト」の「新規テキストオブジェクトにサンプルテキストを割り付け」のチェックを外します。
テキストツールで文字を入力する際にサンプルテキストを挿入する設定ですが、僕には不要なので無効にしています。

「環境設定 > テキスト」の「選択された文字の異体字を表示」のチェックを外します。
選択した文字の異体字を表示する機能ですが、Webデザインで異体字を使うことは少ないので無効にしています。

「環境設定 > ユーザーインターフェイス」の「UIスケール」を左端の「小」に設定し、「比率を保持してカーソルを拡大・縮小」のチェックを外します。
Illustratorの初期設定ではツールやパネルが大きすぎるので、UIスケールを最小に設定しています。

「ファイル > ドキュメントのカラーモード」で「RGB」を選択します。
Webデザインでは基本的にRGBでデザインします。
CMYKでデザインすると、モニターで表示した際に色味が変わる場合があるので注意してください。

「編集 > カラー設定」の「設定」を「Web・インターネット用 – 日本」に設定します。
カラーマネジメントを設定しておかないと、デザインを書き出す際やモニターで表示した際に色味が変わる場合があります。

「ウインドウ > ワークスペース」で「Web」を選択します。
Webデザインでよく使うパネルが配置されます。

次にPhotoshopのWebデザイン向け設定を紹介します。

「環境設定 > パフォーマンス」の「ヒストリー＆キャッシュ」を「Web/UIデザイン」に設定する。
「初期設定/写真」のままだとキャッシュサイズが大きすぎるため、WebデザインをしているとPhotoshopの動作がかなり重くなります。

「環境設定 > 単位・定規」の「定規」と「文字」を「pixel」に設定する。
Webデザインでは基本の単位がピクセルだからです。

「イメージ > モード」で「RGBカラー」を選択する。
Webデザインでは基本的にRGBでデザインします。
CMYKでデザインすると、モニターで表示した際に色味が変わる場合があるので注意してください。

「ウインドウ > ワークスペース」で「グラフィックとWeb」を選択します。
Webデザインでよく使うパネルが配置されます。

IllustratorとPhotoshopでWebデザインする場合は、適切な設定を行う必要があります。
Webデザインを始める前に、まずはIllustratorとPhotoshopが適切な設定になっているか確認しましょう。

以上がIllustratorとPhotoshopのWebデザイン向け環境設定の紹介でした。