新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Illustrator(イラストレーター)を使ってWebサイトのデザインをする際の注意点

      2014/11/12

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

自分、基本的にIllustrator(イラストレーター)ではWebデザインやりません。
というのは、ピクセル単位でのデザインができないから。

こりゃダメだ
こんなんなっちゃいます。

ただし、最近のIllustratorではピクセル単位でのデザインもできるようになってきています。
以下、Illustratorを使ってピクセル単位でのデザイン(Webデザイン)をする際の注意点をお伝えします。

スポンサーリンク
 

まずは、Illustratorを使ってピクセル単位でのデザイン(Webデザイン)をする際に注意すべき点を4つあげてからそれぞれに関して解説していこうと思います。

  1. 単位はpx(ピクセル)に統一する
  2. ピクセルプレビューで編集する
  3. ピクセルにスナップにチェックを入れて編集する
  4. 罫線を使う場合は内側罫線もしくは外側罫線にする

それではそれぞれの設定方法と解説です。

単位はpx(ピクセル)に統一する。

【設定方法】 「編集」→「環境設定」→「単位」

IllustratorでWebデザイン01

単位はピクセルに統一した方が良いでしょう。
Webデザインにおいてはフォントサイズもpx(ピクセル)で指定するほうが良いです。

ピクセルプレビューで編集する

【設定方法】 「表示」→「ピクセルプレビュー」にチェック

IllustratorでWebデザイン02

これが一番重要。
要は実際Webサイトでどのように見えているかを確認しながらデザインすることができます。

ピクセルにスナップにチェックを入れて編集する

【設定方法】 「表示」→「ピクセルにスナップ」にチェック

IllustratorでWebデザイン03

ピクセルプレビューにすると初期設定で「ピクセルにスナップ」のチェックが入ります。
これは、パスを書いたり、図形を書いたりするときにピクセル単位でアンカー等を配置することの出来る機能です。
この設定を行うと、四角形などのオブジェクトの境目が綺麗にピクセル単位で切り取られます。

罫線を使う場合は内側罫線もしくは外側罫線にする

【設定方法】 罫線パネルを表示して「線の位置」の設定を「線を内側に揃える」か「線を外側に揃える」に変える。

IllustratorでWebデザイン04

CS6の場合はスナップの基準がピクセルの中心になるのでこの設定は必要ありません。
CS4の場合はスナップの基準がピクセルとピクセルの境になるのでこの設定をしないと1pxの罫線が綺麗にでません。
なお、CS6でこの設定をすると上記のようにパスと罫線が微妙にずれてしまいます。

以上を駆使して最初に紹介したボタン(CS4で制作)を作りなおしてみました。

これイイね!
こんな感じ。
ボタンと背景の境目がきっちりして、さらに、1pxの罫線が再現できるようになりました。

なお、CS4には上の罫線の内側にちょっとグレーが残るというバグがあるようですが、CS6では解決されています。 
上記(CS4)では0.9pxと指定を入れてごまかしています。 

 - Illustrator(イラストレータ), Webデザイン, デザイン

アドセンス広告メイン

Comment

  1. 《K》 より:

    とても参考になりました!
    ありがとうございますm(__)m

  2. えんどう より:

    白い部分は白で塗っとかないとPhotoshopなどに取り込んだ場合などに透明になってしまうのも地味に困りますね

Message

メールアドレスが公開されることはありません。

  関連記事

自分のサイト表示がブラウザごとに確認(チェック)できるサイト「browserling」

1年以上前の記事です。内容が古い可能性があります。Web制作する際に困るのが表示 …

no image
バグを逆手にプログラミング(CSSハック)

1年以上前の記事です。内容が古い可能性があります。livedoor ニュース & …

no image
台風接近!!

1年以上前の記事です。内容が古い可能性があります。台風直撃の中、都内まで打ち合わ …

ツイッターで片思い、片思われが分かる「ついっぷるフレンズ」

1年以上前の記事です。内容が古い可能性があります。以前も何度か紹介したことのある …

no image
自宅サーバーをいかに安価に設置するか【序章】 きっかけ

1年以上前の記事です。内容が古い可能性があります。自宅サーバーはすでにもっていた …

no image
遂に出た!! ネット上のスタンプラリー

1年以上前の記事です。内容が古い可能性があります。かねてから個人的に提唱していた …

フォトショップ(Photoshop)でWebデザイン、角丸シェイプを使うときは「ピクセルにスナップ」にチェック!

1年以上前の記事です。内容が古い可能性があります。Webデザイナーとして当然なん …

gif(ジフ・ギフ)画像書き出しで使う「ディザ」とは何なのか

1年以上前の記事です。内容が古い可能性があります。Webデザインにおいてgif( …

swfファイルはflaファイルに変換せずに直接Flashで開いても結構使える【Flash CS6】

1年以上前の記事です。内容が古い可能性があります。先日、swfから画像や音声ファ …

携帯サイト(ケータイサイト)の作り方Part2

1年以上前の記事です。内容が古い可能性があります。携帯サイト作成に関するすばらし …

血液型オヤジ