illustratorでWEBデザイン【設定】

印刷物の制作で慣れ親しんだillustratorでWEBデザインできたらその方がいいなと思い制作してみます。

印刷屋時代、製版機のPCに合わせるために世の中がどんどん進化する中illustrator 8を10年近く使ってきた私。昨年独立してやっとCCを使い始めたのでWEB用の設定からコツコツと進めていきます。

まずDTPをやってきた人ならWEBをデザインする時は

1.RGBにする　2.解像度は72dpi　3.単位はピクセルに直す　4.web用にjpgで書き出す

ぐらいの事は知っていると思うのですが、WEB用に更に細かい設定をしないと輪郭がぼけた画像になってしまうので注意が必要です。ハッキリ鮮明に作るには1pxがとても大事になってきます。このillustratorの基本設定は必須となるので確実に行います。

1.新規ドキュメント設定

↓［新規ドキュメント］

↓プロファイル［WEB］を選択

↓サイズ［1280×800］を選択（PCの画面サイズ）

↓単位がピクセルになっていることを確認

　［新規プロジェクトをピクセルグリッドに整合］のチェックをはずす

2.環境設定

【一般】

［キー入力］を1pxにする

［プレビュー境界を使用］にチェックを入れる

【単位】

［一般］［線］［文字］をピクセルにする

【ガイド・グリッド】

［グリッド］を10px［分割数］を2にする

（理由がはっきり分からないのでとりあえずですが）

3.表示をピクセルプレビューに

ピクセルプレビューにチェックを入れると画像になった時のイメージそのまま表示されます。直線がぼけた画像になるなどの原因を防ぐ事ができます。

4.ピクセルにスナップ

DTPでは［ポイントにスナップ］にチェックを入れていましたがWEBでは［ピクセルにスナップ］にチェックを入れるとピタピタときれいにいってくれます。

5.アピアランスの設定

［アピアランス］のオプションで［新規アートに基本アピアランスを適用］のチェックをはずす。

6.制作サイズのアートボードを追加

制作するサイトの幅（PCサイトは960px）のアートボードを追加します。

↓960px×800pxの長方形を作成

↓ドキュメントの中心に合わせる

↓［オブジェクト］→［アートボード］→［アートボードに変換］

illustratorCCに不慣れだったのでアートボードの存在を最近やっと理解したのですが、WEBページや冊子など複数ページのデザインの際に便利な機能です。

またオブジェクトの配置を数値的に確認したり操作するのも便利になります。

はじめは使いこなせなかったのでまた改めてアートボードについては書いてみたいと思います。

illustratorでUIデザイン：設定編 - Two hats

IllustratorでWeb向け、ピクセルベースの作業を行う上での設定（完全版） - DTP Transit

IllustratorでWebデザインをはじめよう！ 第1回：デザイン前に行う環境設定と覚えておきたい基礎知識 | Adobe Creative Station

Illustrator：ピクセルパーフェクトを実現するために「ピクセルグリッドに整合」をチェックするよりも前にチェックすべきたった１つのこと - いかりんぐ IKA-ring.net