マンガでなれる?WEBデザイナー講座

第2話 ベクターデータで作るメリットとIllustratorの基本設定

第2話 Webデザインをベクターデータで作るメリット、IllustratorをWeb制作するための基本設定 第2話 Webデザインをベクターデータで作るメリット、IllustratorをWeb制作するための基本設定

ベクターでWebデザインするメリット

その1 データが軽くなる

(同じ量のデザインでもPhotoshopの2分の1くらいになる)

その2 複数のアートボードを配置して管理できる

(レスポンシブWebデザインと相性バツグン!)

その3 アピアランスで装飾ができるのでレイヤーが複雑化しない

(他の人へデータを渡す時Photoshopのようにレイヤー名をつけたり細かく整理する必要がほぼない)

その4 色の管理がしやすい

(Illustratorならオブジェクトを選択するだけで色情報もわかる上にパーツごとの色変更も自由自在!)

その5 レイアウトがしやすい

(元がDTP向なので写真や文章のレイアウトがしやすい。変更修正にも素早く対応できる。)

その6 シンボル、グラフィックスタイルで共通のデザインを使いまわせる

(デザインを共通化して制作時間を短縮できる)

その7 デザインパーツからCSSを生成できる(IllustratorはCCから対応)

(Illustrator、Sketch3共にCSS生成する機能があるのでコーディングの時短になる。コードフレンドリー!)

その8 合成フォントが使用できる

(Illustratorのみの機能。日本語フォントと欧文フォントを組み合わせて1つのフォントとして使う事が可能。)
mika

IllustratorもWeb用の設定さえキチンとやっていれば十分Web制作の主力選手として使える存在だと思います。

というわけでIllustratorでWebデザインする設定の説明をしたいと思います。

yoko

よろしくお願いします!

mika

それではIllustratorでWebデザインするための各種設定です☆

1.表示をピクセルプレビューにする

1.表示をピクセルプレビューにする
mika

Webデザインする時は必ずピクセル単位にします。

Photoshopと違ってピクセルの概念がないのでIllustratorではピクセルプレビューを指定してあげます。

2.ドキュメントのタブには、カラーモード(RGB)に設定しておきます。

2.ドキュメントのタブには、カラーモード(RGB)に設定しておきます。
mika

初期設定だとCMYKになるのでRGBにします。

これをうっかりCMYKにしちゃうと印刷データの色設定になるので「Webわかってない人だな」 と思われてしまいます(苦笑)

Webでは使えないデータになってしまう事もあります。

3.環境設定の単位をpxにします。

3.環境設定の単位をpxにします。

4.環境設定の「一般タブ」の「キー入力」を0.5pxにします。

4.環境設定の「一般タブ」の「キー入力」を0.5pxにします。
yoko

キー入力を0.5pxにするのはなぜですか?

mika

キー入力を0.5pxにするとオブジェクトを10pxずつではなく、5px動かす事ができます。

パスを書く時にアンカーポイントの 細かい調整が可能になります。
キー入力とはキーボードの矢印キーでオブジェクトを移動させる時の距離です。

5.「テキスト」タブの「サイズ/行送り」も1pxに変更しましょう。

5.「テキスト」タブの「サイズ/行送り」も1pxに変更しましょう。
mika

これでIllustratorでWebデザインする環境設定が整いました。
次回はワイヤーフレームからWebデザインする方法を紹介したいと思います。

yoko

Photoshopでもそうだけど環境設定は大事なんですね。
勉強になりました。


Twitterでシェアよろしくお願いします

Twitterでフォローする