header01

Date: 2016/09/24

Webデザイン初心者必見!IllustratorでWebサイトをデザインする際に、必ずやっておくべき設定

僕は印刷物のグラフィックデザインをやってきたので、Webデザインに関してはまだまだ未熟者です。この業界には僕のような方が沢山いらっしゃると思います。そんな皆さんに、
Webデザインをするにあたって、僕が必ずやっているIllustratorの設定をご紹介させていただきます。
※イラストレーターのバージョンはCC2015.3.1です

1.新規ドキュメント作成時にプロファイルを「Web」に、プレビューモードを「ピクセル」に、「新規オブジェクトのピクセルグリッドに整合」のチェックを外す。

Illustratorの新規ドキュメント作成時に「Web」を選ぶことによって、ある程度Webデザインに適した設定に変わります。
「ピクセルプレビュー」にすることでズームした時にピクセル本来の表示になります。
「ピクセルグリッドに整合」は表示のズレにつながるので外しておきます。
※プレビューモードなどを変更するとプロファイルがカスタムになります。

 

img01

 

2.メニューバーの、表示 > ピクセルにスナップにチェックを入れる。

このチェックでオブジェクトが整数のピクセルにスナップされるようになります。

 

img02

 

3.四角や円のオブジェクトを作る時、線の設定を内側にする。

線の設定を内側に設定しておかないと1pxの線幅が太くなってしまったり、オブジェクトが狙ったサイズより大きくなってしまいます。

 

img03

 

4.環境設定 > 一般 > キー入力 を「1px」にする。

環境設定のキー入力を1pxにしておくとオブジェクトを選択して上下左右キーを押した時に、それぞれの方向へ1pxずつ動くようになります。Shiftキーを押しながらだと10pxずつになります。

 

img04

 

5.環境設定 > 一般 > 「プレビュー境界を使用」にチェックを入れる。

このチェックをしておくと、オブジェクトの大きさに線の幅がプラスされるので、アップにして確認しなくても線の設定が「内側」になっていない事に気付けます。

 

img05

 

6.環境設定 > 単位 で一般をピクセルにする。

座標系の単位がピクセルになります。線と文字はポイントでもピクセルでも同じなので、どちらでも構いません。

 

img06

 

7.アートボードのサイズをデザインするWebサイトのサイズに合わせる。

「プリセット」または「幅・高さ」を指定して、アートボードのサイズを変更することが出来ます。

 

img07

 

8.上記の設定を再利用出来るように「テンプレートに保存」をしておく。

上記の内容を毎回設定するのは面倒だと思われる方は、上記の設定がすでに出来ている新規ドキュメントが作成出来る「テンプレートに保存」をおすすめします。

 

img08