DTP→WEB

Webの環境設定を確認しよう/DTPと両立する時はイラレに注意

DTP→Webに脱皮中ですが、コーダー泣かせのデータを作っていました。プロとして両方できるよう違いを調べ中です。「Webの単位はピクセル」分かっているつもりでなぜ見落としたのか!

すっごく基本的な所、環境設定から見直します。

Photoshopの環境設定

Photoshopの環境設定はDTPもWebも同じでイケる。こっちは大丈夫そう。

【Photoshopの環境設定】

  • 「一般」>「キー入力→1px
  • 「単位・定規」>「定規・文字→pixel
  • 「ガイド・グリッド」→「グリッド10px、分割数2(任意)

※最後に上部の「ウィンドウ」>「ワークスペース」>「Web」を選択して、設定を保存。

Illustratorの環境設定(DTP・Web両方やる時ミス注意)

Illustratorで画像を作る時は要注意です。一日の間に「DTP⇔Web」を何回もいったり来たりすると、うっかり設定を間違えそう。

実はPhotoshopの操作がまだ遅くて、急いでいる時はIllustratorでデザイン案を作る事もあります。もしかしたらその時ミスも出ていたかも・・。

Web用のIllustratorの環境設定

【Illustratorの環境設定】Webは全部ピクセル。

DTP用のIllustratorの環境設定の例

【Illustratorの環境設定】DTPはミリやポイント等任意。

混乱するので、バージョンで使い分ける

ミス防止でバージョンで使い分ける事に。新しいIllustratorをWEB用に。古いIllustratorをDTP用に。

  • 単位ピクセル
  • RGBカラー
  • スクリーン72ppi

Illustratorの新規作成でWebを選べば、自動的に設定が整う

「新規作成」で「WEB」を選べば、勝手に設定整うんですね。優しい〜。プレビューモードはピクセルを選びます。他のを選ぶと「100%が実寸にならない」事があるので注意。