Illustratorでボタンやバナーなどを作成してWeb用に書き出す場合に指定寸法どおりにならずに困る場合があります。
ポイントを理解して思い通りのサイズで書き出せるようになりましょう。
四角形にbuttonというテキストの入った単純なボタンを例にします。
線幅は2pxで、長方形のサイズは幅250px縦50pxのものとします。
失敗するやり方
長方形を作成する前に線の設定を2pxとしておきます。（後で変更も可能）
長方形ツール選択後にアートボード上をクリックして長方形の数値入力パネルを出して、指定サイズの幅250px縦50pxの長方形を作成します。その後、文字ツールでButtonとテキストを作成して長方形と重ねて整列パネルを使用して整列させます。
変形パネルなどで長方形のサイズを確認しておきます。
その後、Web用に保存で保存します。
ここでサイズを確認すると作成した長方形のサイズと違う幅254px高さ54pxとなっています。
このまま保存したら幅254px高さ54pxで保存されてしまいます。
サイズが変わる原因１
このサイズの誤差の原因は線幅にあります。もう少し詳しく言うと、線の位置が長方形の外にあるか内側にあるか、またはその両方にまたがっているかの問題です。線パネルで線の位置を決められますので、線の内側に設定すると問題が出ませんが、通常は初期設定では両方にまたがった状態の設定になっています。これが誤差の原因です。
Webの場合はCSSのBoxモデルの考え方と同じにして、長方形作成のときにサイズ指定した長方形の幅は線なしの幅として、線を付けると線の幅だけ全体の幅が増えるようにするとよいと思います。
borderの幅はwidthの外につくわけです。
ただし、「線の位置」を「線を外側に揃える」しておくことが重要です。
正しい作成方法
原因がわかれば解決は簡単です。
線幅分だけ差し引いて長方形のサイズを決めてやります。その際、「線の位置」を「線を外側に揃える」しておきます。
今回の例では幅246px高さ46pxで長方形を作成すればOKです。
重要：「線の位置」を「線を外側に揃える」しておきます。これをやらないとうまくいきません。
Web用に保存で確認したら指定どおりのサイズになっています。
環境設定で線幅の取り扱いを変える方法
環境設定で線幅の取り扱いを変える方法は「環境設定」から「一般」の中で「プレビュー境界を使用」にチェックを入れると線幅がオブジェクトの幅に含まれます。
けれども、一般的にはこの方法はとりませんので、できるだけこの機能は使用しないで作成するようにしておいた方がよいでしょう。
サイズが変わる原因２
以上の内容をふまえて長方形を作成してもサイズが変わる場合があります。
これは座標が小数点になっている場合です。座標が小数点にならないように作成することで解決できます。
またまれにアートボードの座標が小数点になっている場合もありますので注意してください。
コメントを投稿するにはログインしてください。