イラストレーター10での線幅の扱い方

[15006]イラストレーター10での線幅の扱い方 投稿者:鈴木 投稿日:2007/01/06 12:52:58
基礎的な事だと思うのですが調べ方が悪いようで
分からなかったので教えてください。
ホームページを作成するにあたってメニューボタンを
イラストレーター10で作成しています。
ボタンを作成してJPGまたはGIFで保存するのですが
保存後のJPGまたはGIFのファイルを確認すると
保存前に確認したオブジェクトサイズと
サイズが若干違ってしまっている事に気がつきました。
これは、もしかして線幅の関係なのか?
と思いながらも、解決策が思いつかず
困っています。
線幅を含めてピッタリのサイズに保存する方法を教えてください。
よろしくお願いします。
Re: イラストレーター10での線幅の扱い方 投稿者:亭主 投稿日:2007/01/06 14:36:19
>線幅を含めてピッタリのサイズに保存する方法を教えてください。
よろしくお願いします。

この「サイズ」と言うのが結構曲者ですよね。
Illustratorの画面表示(%)が違えば、本来同じサイズでも見た目は当然変わってきます。
ですからサイズを厳密に合わせたい場合は、数値指定で作成したほうが良いでしょう。

幾つかのオブジェクト(ボタン)のサイズを合わせたい場合は、元になるオブジェクトを作り、それをコピーするなど。

線幅の問題は、[線パレット→線の位置]で、「線を内側に揃える」にすれば、数値指定の範囲に収まる筈ですが。
Re: イラストレーター10での線幅の扱い方 投稿者:m_ogawa 投稿日:2007/01/06 14:51:46
あと、ふだんWeb用途で使われることが多いなら、環境設定の単位表示も
ピクセルにしてしまうのはどうでしょう。
Re: イラストレーター10での線幅の扱い方 投稿者:鈴木 投稿日:2007/01/06 16:25:34
亭主様、ありがとうございます。
イラストレーター10の線種パレットには
CS2の[線パレット→線の位置]で、「線を内側に揃える」
という機能は無いようです。
バージョン10で同じような事をする方法は
無いでしょうか?
よろしくお願いします。

m_ogawa様
ありがとうございます。
環境設定の単位表示はピクセルにしています。
変形パレットでオブジェクトサイズを確認して
書き出すのですが、書き出したオブジェクトを
開き、変形パレットで確認するとサイズが
微妙に違ってしまっています。
実際にホームページを作成していて
ズレが気になってしまいます。
よろしくお願いします。
Re: イラストレーター10での線幅の扱い方 投稿者:コスゲタケシ 投稿日:2007/01/06 16:57:51
>微妙に違ってしまっています。

どの程度違うのですか。

>実際にホームページを作成していて

差し支えなければURL教えて下さい。
Re: イラストレーター10での線幅の扱い方 投稿者:鈴木 投稿日:2007/01/06 21:33:44
コスゲタケシ様、ありがとうございます。
すみません、お見せできるホームページが、まだありません。
ナビゲーションボタンを作成しているのですが
マウスオーバー時やクリック後に色が変わるように
3色用意していました。
変形パレットのオブジェクトのサイズだけを意識して
同じサイズにしていたのですが、線(1px)の在る物と
線を無しにした物とで約1px(ピッタリではありません)
の違いがあることに気がつきました。
マウスオーバーした時やページ移動したときに微かに
ずれてしまいます。
今、考えていて、全てに線を設定すればすむ事かと思いましたが、他に方法があれば是非教えてください。
よろしくお願いします。
Re: イラストレーター10での線幅の扱い方 投稿者:亭主 投稿日:2007/01/06 22:11:11
>バージョン10で同じような事をする方法は無いでしょうか?

CS2だけのノートから書き込んだのですが、確かにバージョン10にその機能は無かったようですね。
無理してやろうとすれば「アピアランスの分割」「グループ解除」などで対応も出来そうですが、そこまでする意味も無いでしょう。
或いは意図するサイズの矩形で「トンボを設定」すれば、その大きさで切り取られてWeb書き出し出来るでしょう。

しかしNo.15008でも書いたことですが、サイズを統一したいのであればソース画像を必要なだけコピーして、その後カラーなどの属性を変更すれば良い訳です。


1ピクセル程度の誤差については、以下のような問題も有るようです。

*http://illustrator-ok.com/bbs_log/faq/contennts/faq_setting_performance_1.htm#cs_marumegosa

*http://illustrator-ok.com/bbs_log/faq/contennts/faq_technique_1.htm#webgazo_size
(この場合、トンボを設定することで解決するみたい)



それとこれは先の課題かも知れませんが、最近のトレンドとしては、ボタンなど、極力テキスト(文字)で表現することが推奨されているようですよ。
Googleなどの検索ロボットは、テキストならそのまま素直に解釈出来るのですが、画像ではそう言う訳に行きませんからね。

このサイト、トップページのリンクボタンも全てテキストで作っています。後はスタイルシートでボタン風に見せています。
Re: イラストレーター10での線幅の扱い方 投稿者:m_ogawa 投稿日:2007/01/06 22:12:48
確かにたまに?なことがあるような気がします。
私の場合はGIFの透明が関係する時だけでしたが。
イラストレーターは本来ラスタ画像を扱うためのアプリケーションではなく
保存の際にはいちいちラスタライズしているわけですから、その際の微妙な
ズレとかが発生しているのかもしれません。

実際に作ったものを見てみないとわからないような気がします。
(部品程度ならここにアップすることも可能では?)
Re: イラストレーター10での線幅の扱い方 投稿者:鈴木 投稿日:2007/01/07 09:50:59
attached imageありがとうございます。
一番上が線の設定無し。
真ん中が線幅10pxの設定。
(両方とも変形パレット上のオブジェクトサイズは100px)
一番下がオブジェクトサイズの90pxに減らして線幅を10pxに設定。
線幅を設定した場合はオブジェクトのサイズを線幅分減らす事でラスタライズ後に同じサイズにすることが出来ました。
しかし、.08px分のズレはどうしても出来てしまうようです。
トンボを設定してテストもしてみました。
こちらもうまくいきましたが、同じように.08px分のズレが出ました。
とりあえず、今作ろうとしている物に関しては解決できました。ありがとうございました。
Re: イラストレーター10での線幅の扱い方 投稿者:倉田タカシ 投稿日:2007/01/07 22:50:44
ウェブ用の画像を作るなら、ピクセルプレビューモードで作業することをおすすめします。
また、バージョン10で線幅も含めて希望のピクセルサイズ内に収めるには、「効果>パス>パスのオフセット」で、線幅の半分だけパスを内側にオフセットするといいですよ。
ボックスじゃない開いたパスなら、「効果>ラスタライズ」を使うのがいいと思います。
ピクセルプレビューなら、デフォルトでは「ピクセルにスナップ」にチェックが入っているので、オブジェクトの座標をきっちりピクセル単位であわせることができ、ラスタライズ後にオブジェクトの縁がぼやけてしまうのを防げます。
Re: イラストレーター10での線幅の扱い方 投稿者:鈴木 投稿日:2007/01/08 19:36:02
倉田タカシ様、ありがとうございます。
ワーイ(^u^)勉強になりました。
この記事の書き込み元へのリンク (コメントや質問などはこちらへどうぞ)