illustratorで作るバナーの枠線の引き方

質問

検索しても分からなかったので質問させて頂きます。

adobe社のillustrator（ver.10）を
windowsXP (sp2)のパソコンで使用しています。

website用のバナーを作っていたんですが
バナーの外枠を縁取る線の引き方が
何度探しても分かりませんでした（汗）

現状、任意のピクセル数のバナーを作るに当たって
書類設定でピクセル数を指定し
画像や文字を配置した後
空のレイヤーを一番上位に１枚配置して
その上に□ツールを使用し
書類設定で指定したピクセル数と同じ数値（又は-1等）を入力し
枠線として配置しています。（説明が下手ですいません；；）

その後トンボを設定して
「web用に保存」でもって
主にgif形式で出力しているのですが
枠線が思ったように配置出来ません。
キーボードの矢印キーを使って細かく移動するのですが
今ひとつ綺麗に配置されないのです。

もしかするとこの外枠の引き方そのものが間違っているのでしょうか…
illustratorに関しては本を読みながら
なんとか使ってる程度のビギナーで
ひょっとするとこの質問自体本にも載らない程度の
基本中の基本であるがゆえに
探しても見つからないのではないか、と思っています。

申し訳ありませんがご教授お願い申し上げます。

回答No.5

fab76 · ベストアンサー

Web用画像作成ならトンボ（トリムマーク）は関係がありません
（印刷入稿用の"位置合わせ"なので意味がないのです）

作業手順としては間違っていませんがコツがあります、確認事項を書き出しますね。

1. 新規作成のアートボードのサイズはバナーサイズとします（意味は後で記述、作業をCMYKで行っているようですがRGBの作業としてください、色の再現が出来なくなります）

2. 鬱陶しいですが正確な作業のため【画面】→「スマートガイド」にチェックを入れます。

3. 矩形ツール□で求めるサイズの枠線を描きます、線幅は【編集】→[環境設定]→「単位・取り消し」で一般、線をピクセルとします。

4. アートボードと枠線を合わせます、ドラッグして「スマートガイド」が"原点"と表示したら止めます。
ズームツール（虫眼鏡）に切り替えアートボードのコーナーをドラッグして選択します（1000倍～2000倍程度でしょうか）

5. 選択ツール（黒）に切り替えて少し動かしてみます、"原点"と表示されればOKです、これで正確な枠線レイヤーとなります。

6. Text、オブジェクトはそれぞれ新規作成したレイヤーに置きます。
枠線レイヤーが最下位にあるのでレイヤーパレットで最上位に移動します。

7. 【Web用に保存】を行いますが、画像サイズタブで「アートボードサイズでクリップ」にチェックを入れます、アートボード＝枠線＝生成する画像のサイズが同一となります。ブラウザプレビューで画像サイズ、枠線の位置を確認してください。

# 同じデータを入稿用として転じる場合は一回り大きな新規アートボード（CMYK）に貼り付け外枠オブジェクトを選択して【フィルタ】→[クリエイト]→ 「トリムマーク」とします（トンボ→作成でもいいのですけど）
枠をまたいでいるオブジェクトはパスファインダで切り取ったものを使います。

お礼

詳細なご解説、本当にありがとうございます。

スマートガイドの使い方や原点の表示、
画面サイズタブでの「アートボードサイズにクリップ」など
知らないことばかりで非常に勉強になりました。

自分と同じビギナーのためにokweveのlogとしてずっと残したい
素晴らしいご回答、本当に本当にありがとうございました！

回答No.4

NAIROBI

理解いたしました（笑）。
試してみましたが、確かにこうあるべきと言う手順を踏むとなぜかズレ
ますね。
う～ん、トンボを使用せず、クリッピングマスクで不要部分を隠し、枠
線を設けてpsdに保存し、要らない領域をトリミングしてから改めてgif
に保存しなおす。
いっそのことパスファインダでズタズタにしてしまって、不要部分（例
の画像で言うなら連続した星のはみ出した部分）をデリートする。元画
像が惜しければコピーしておく。
望む結果は得られると思いますが煩雑な上乱暴ですかね？
web上に保存しない場合であればトンボを作成した根拠になっている元
の形状をコピーして重ねれば問題ないでしょう。

お礼

方法としては印刷物の入稿に際して
後の修正作業が可能なように別名で保存し
テキストをアウトライン化する場合と同様の手順ですね。

親身にご回答いただき本当にありがとうございました。

回答No.3

NAIROBI

ごめんなさい、補足をいただく前ですが＃２です。

つまりあなたがお作りになっている見本で言うなら、イラレ上でオブジ
ェクトを下から
赤い矩形、グレーの矩形、白い文字、赤い文字の順に重ねて一緒に書き
出すと言うことです。
グレーの矩形、白い文字、赤い文字が既に一つの画像ファイルになって
いるなら、それを一回り大きな赤い矩形に重ねてセンタリングすれば同
じことになります。

う～ん、ご質問の意図をやはり私が間違えているような気が・・・。

お礼

ご回答頂きありがとうございます。

質問がもう一つ上手く説明出来ていなくて申し訳なく思っています。

一番外に配置されている赤い矩形が
任意のピクセルで切ったトンボの枠に対して
右が太いとか左が切れてしまうとか
均等に配置されていない症状を改善したく思っています。

今回は題材としてバナー作成を作業として出していますが
onlineで印刷データを入稿する際にも
トンボ（トリムマーク）に沿った外枠の線を引く為に使える、とか
全般的なillustratorの操作方法としての質問をさせて頂きました。

ご丁寧にお応え頂き有り難うございました。

回答No.2

NAIROBI

gifのバナーは既にあって、それ用の枠線だけを作りたいということで
しょうか？
劣化しますが、そのバナーをイラレ上に配置し、枠を下に重ねてそれご
とweb用に保存するのでは駄目なのですかね（つまり枠付の新たなバナ
ーを一つのオブジェクトとして作成）。
またはバナーからイラレで作り直すとか？
私が勘違いしているようでしたら補足してください。

回答No.1

aisu_san3

もしフォトショップをお持ちであれば
イラストレータのデータを立ち上げたまますべてのオブジェクトを
選択してコピーしてフォトショップなどに貼り付けると簡単に
gif化できるとおもうんですが・・・。

補足

早速のご回答ありがとうございました。

説明がもう一つ上手く出来ず申し訳なく思っています。

質問の主目的として、現状困っている画像の作成を題材に
illustratorの使用方法を教えて頂きたかったのです。

元のデータにはリッピングマスクで切った画像など
トンボの外にはみ出す要素がいくつか配置されており
photoshopに貼り付けた際には
それらの要素を含んだ形でのデータが作成されます。

photoshopを利用するこの方法を使い
枠線を選択しそれに沿って
切り抜く事で意図した画像は出力されますね。

ありがとうございました。