- 2008-06-07 (土) 1:06
- Tips:
こんなエントリをみつけました↓
>Illustrator WEB用に保存するとサイズがずれる
どうもイラレ系の制作TIPSを見ているとこのテの「イラレから書き出すとズレる」の記述があるんですががが。
結論から言えばズレません。
ズレるのはそのオブジェクトの座標がズレているからです。ピクセルにぴったりあわせてオブジェクトを作ればズレないんですヨ!マジでマジで!
最初っからズレないようにデータをつくれば、イチイチPhotoshopに書き出してからスライスとかしち面倒くさい事しなくて済みます。元ファイルが複数あるとミスの元ですし、できればイラレで作ったら元ファイルはイラレで完結しておきたいところなのです。 スライスもイラレ上で長方形を使ってズレる事なくキレイに切れますからね。
キモは前にも描きましたが。定規とトリムマークと数値入力です。それとピクセルプレビュー。
手順としては

1. 新規書類を開いたら
Illustrator > 環境設定 >単位・表示パフォーマンス…のあたりから 単位を「ピクセル」にしてください。
Illustrator > 環境設定 >一般… の プレビュー境界を使用 にチェックを入れてください。

2. メニューバーから、表示>ピクセルプレビュー にします。これでオブジェクトは72dpiの画像として表示されます。
3. メニューバーから、表示>ピクセルにスナップ にチェックを入れます。これでオブジェクトを作る時にピクセル単位で作れるようになります。
4. メニューバーから、表示>定規を表示 にチェックを入れ、アートボードの左上に定規の基準点0をあわせます。 ウェブページのレイアウトを組む場合、これがそのままCSSの座標の基準点として使えます。
5.左上のアンカーポイントがX:0 Y:0 の位置に想定の長方形を配置し、トリムマークを作ります。
コレがズレてると全部ズレますので、線なし塗りグレーとかの長方形を配置、6400%に拡大表示して、妙なアンチエイリアスがかかっていないのを確認してからトリムマークにしてください。ズレてない場合はプレビュー表示でも、アンチエイリアスのないクリアな長方形として表示されます。

ここで注意したいのは、変形パレット及びCS2以降のコントロールパレットの座標と大きさに出てる数字は実は信用できねぇって事です。
CSではキリのイイ数字で出ないし、CS2では勝手に小数点以下を切り捨てて表示していますので…。(げっふ
単位をピクセルにしていれば、定規がそのままピクセルを現しています。ピクセルにスナップをチェックしていれば、正しい座標にピタリとあいます。ピクセルプレビューで妙なアンチエイリアスが出ない様見ながらやれば、左程の手間ではありません。
それと、最小単位は1pxなので、0.5ptの線とか当然ボケます。線幅が1pxでも線の表示設定がオブジェクトの真ん中だとこれも当然ボケますので。CS2以降なら内側が外側かどっちかにしてください。
一度お試しくださいましヨ。
———-2008.10.27 追記———-
プレビュー境界を使用についての補足を追記しました。あわせてどうぞ。
- Newer: Tips_パターンの基本
- Older: Tips_スウォッチに登録する / スウォッチライブラリの保存と読み込み
Comments:0
Trackbacks:6
- Trackback URL for this entry
- http://illustrator-labo.com/wp-trackback.php?p=16
- Listed below are links to weblogs that reference
- Tips_イラレでもズレませんブレません from イラレラボ illustrator-labo
- pingback from イラレラボ illustrator-labo - Tutorial_テクスチャ感のあるタブ型ナビゲーションバーを描く 08-07-30 (水) 22:51
-
[...] 0. 先ずは準備。Webで使う素材なので、書類のモードはRGB、単位はピクセル。 表示はピクセルプレビュー、ピクセルにスナップにチェックです。 詳しくはココ→ [...]
- pingback from イラレラボ illustrator-labo - Tutorial_光エフェクトの半立体風ナビゲーションバーを描く 08-09-26 (金) 2:13
-
[...] 0. 先ずは準備。Webで使う素材なので、書類のモードはRGB、単位はピクセル。 表示はピクセルプレビュー、ピクセルにスナップにチェックです。 詳しくはココ→ [...]
- pingback from イラレラボ illustrator-labo - Tips_プレビュー境界を使用についての補足 08-10-28 (火) 1:20
-
[...] 以前「イラレでもズレませんブレません」という記事で「プレビュー境界を使用にチェックをいれる」と書いたのですが、時と場合によるので補足です。 プレビュー境界を使用 というのは、座標を使って位置指定をする場合、効果を含めたオブジェクト全体で指定される、という意味です。 チェックを入れなければオブジェクトのパスの座標で指定されます。 [...]
- trackback from what a wonderful world 08-12-18 (木) 21:54
-
イラストレータでウェブ制作をするとき、ブレたりズレたりする件…
結構前から思ってたんですが、イラストレータで素材を作ってそのままウェブ用に書き出すと、サイズがおかしくなることがありませんか?
分かりづらいですね。。。
えと、たとえば30px… - pingback from イラレラボ illustrator-labo - Tutorial_白ベースの淡い影の半立体風のナビゲーションバー 09-01-10 (土) 21:47
-
[...] 先ずは準備。Webで使う素材なので、書類のモードはRGB、単位はピクセル。 表示はピクセルプレビュー、ピクセルにスナップにチェックです。 詳しくはココ→ [...]
- pingback from イラレラボ illustrator-labo - Tutorial_蛍光ネオン管を描く 09-02-19 (木) 1:17
-
[...] 夜を彩る蛍光ネオン管の効果のチュートリアルです。 先ずは準備。書類のモードはRGB、単位はピクセル。 表示はピクセルプレビュー、ピクセルにスナップにチェックです。 詳しくはココ→ [...]