Illustrator（イラストレーター）を使ってWebサイトのデザインをする際の注意点
2014/11/12
1年以上前の記事です。内容が古い可能性があります。
自分、基本的にIllustrator（イラストレーター）ではWebデザインやりません。
というのは、ピクセル単位でのデザインができないから。
こんなんなっちゃいます。
ただし、最近のIllustratorではピクセル単位でのデザインもできるようになってきています。
以下、Illustratorを使ってピクセル単位でのデザイン（Webデザイン）をする際の注意点をお伝えします。
まずは、Illustratorを使ってピクセル単位でのデザイン（Webデザイン）をする際に注意すべき点を4つあげてからそれぞれに関して解説していこうと思います。
- 単位はpx（ピクセル）に統一する
- ピクセルプレビューで編集する
- ピクセルにスナップにチェックを入れて編集する
- 罫線を使う場合は内側罫線もしくは外側罫線にする
それではそれぞれの設定方法と解説です。
単位はpx（ピクセル）に統一する。
【設定方法】 「編集」→「環境設定」→「単位」
単位はピクセルに統一した方が良いでしょう。
Webデザインにおいてはフォントサイズもpx（ピクセル）で指定するほうが良いです。
ピクセルプレビューで編集する
【設定方法】 「表示」→「ピクセルプレビュー」にチェック
これが一番重要。
要は実際Webサイトでどのように見えているかを確認しながらデザインすることができます。
ピクセルにスナップにチェックを入れて編集する
【設定方法】 「表示」→「ピクセルにスナップ」にチェック
ピクセルプレビューにすると初期設定で「ピクセルにスナップ」のチェックが入ります。
これは、パスを書いたり、図形を書いたりするときにピクセル単位でアンカー等を配置することの出来る機能です。
この設定を行うと、四角形などのオブジェクトの境目が綺麗にピクセル単位で切り取られます。
罫線を使う場合は内側罫線もしくは外側罫線にする
【設定方法】 罫線パネルを表示して「線の位置」の設定を「線を内側に揃える」か「線を外側に揃える」に変える。
CS6の場合はスナップの基準がピクセルの中心になるのでこの設定は必要ありません。
CS4の場合はスナップの基準がピクセルとピクセルの境になるのでこの設定をしないと1pxの罫線が綺麗にでません。
なお、CS6でこの設定をすると上記のようにパスと罫線が微妙にずれてしまいます。
以上を駆使して最初に紹介したボタン（CS4で制作）を作りなおしてみました。
こんな感じ。
ボタンと背景の境目がきっちりして、さらに、1pxの罫線が再現できるようになりました。
なお、CS4には上の罫線の内側にちょっとグレーが残るというバグがあるようですが、CS6では解決されています。
上記（CS4）では0.9pxと指定を入れてごまかしています。
アドセンス広告メイン
関連記事
-
-
リンクファーム（検索ディレクトリ）の威力
1年以上前の記事です。内容が古い可能性があります。以前、ここでリンクファームらし …
-
-
Yahoo!ボックス（Web版）は複数ファイルの一括ダウンロードができない
1年以上前の記事です。内容が古い可能性があります。アプリを使えばできるのでいいの …
-
-
DTP、Webデザインを勉強するのにおススメのテキスト【書評】
1年以上前の記事です。内容が古い可能性があります。職業訓練校で講師をやっていた経 …
-
-
はてブ（はてなブックマーク）ボタンが新しくなった
1年以上前の記事です。内容が古い可能性があります。どなたかのツイートで知ったので …
-
-
カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 1 – 「Custom Field GUI Utility」の巻 【ワードプレス】 #wp
1年以上前の記事です。内容が古い可能性があります。1. Custom Field …
-
-
バトンで集客
1年以上前の記事です。内容が古い可能性があります。一歩間違えればスパムとさほど変 …
-
-
画像共有サイト（写真共有サイト・フォトシェアリング）ってたくさんあるんだね
1年以上前の記事です。内容が古い可能性があります。前記事からの流れで画像共有サイ …
-
-
電源ボタンのマークは秘密 （8/23追記）
1年以上前の記事です。内容が古い可能性があります。Yahoo!トップページから2 …
-
-
WordPressのRSSをカスタマイズ。フィードでの各投稿の表示は「抜粋」に変えておこう
1年以上前の記事です。内容が古い可能性があります。最近は、RSSリーダーなんて使 …
-
-
JPEG画像は新規保存するたびに劣化する（わけじゃない）
1年以上前の記事です。内容が古い可能性があります。JPEGってのはファイル形式で …
Comment
とても参考になりました！
ありがとうございますm(__)m
白い部分は白で塗っとかないとPhotoshopなどに取り込んだ場合などに透明になってしまうのも地味に困りますね