どうやら新デザインのCSS編集用デザインには、
必要ないようです。
記事タイトルをクリックして、単独で表示させたページの
アドレスバーのURLが「記事URL」の役割となるようです。
記事をリンクしたいのに、「記事URL」がない
前回の「Illustrator CS5 gif画像の作りかた-デザイン編」では
デザインを仕上げ、マスクして終了しました。
これをWEB用に保存し、ネット上で使えるボタンに変換します。
「WEB用に保存」は、
コマンド（つかむ）、オプション（コピー）、シフト、「Ｓ（保存）」を押します。
でも、このままでは「アートボード」サイズの巨大なボタンになってしまいます。
くれぐれも、指がつらないように注意して (゜д゜；)
パソコンの動きも遅くなりますよ～。
そこで「アートボード」自体を画像のサイズに変更します。
前のバージョン「トリムマーク」に変わる設定が
「アートボード」というわけですね。
「アートボード」は「オブジェクト」の下の方。
あら？種類があるけど、どれかな
ではまず「オブジェクト全体に合わせる」を実行してみましょう。
あれ
上下に余計なスペースが・・・
実は・・・。
プレビューを解除してアウトライン（骨組み？）にして見てみると
この世には、目には見えないものって本当に、あるんですねえ
要するに「オブジェクト全体に合わせる」では、
マスクされていないパスや点、（自分的には）余分なオブジェクトも範囲に含むということですね。
そこで「選択オブジェクトに合わせる」を使いましょう。
一番上にある外側のパスを選択します。
「選択オブジェクトに合わせる」を実行すると、ぴったりの「アートボード」に！
やった
「アートボード」の関連記事
Illustrator CS5 アートボードの設定
ここで、ようやく「WEB用に保存」です！
先ほど書きましたが「WEB用に保存」は、
コマンド（つかむ）、オプション（コピー）、シフト、「Ｓ（保存）」。
さあ、思い切って押しましょう！
くれぐれも、指がつらないように注意して (°Д°；≡°Д°；)
押しましたか？
この画面、出ましたか？
設定について、ここでは詳述しませんが
とにかくgifで保存してみましょう！
（gifは、透明にしたい、色数が少なくサイズを抑えたい時に使います）
ボタン画像が完成しましたね
お疲れ様でした～
デザインを仕上げ、マスクして終了しました。
これをWEB用に保存し、ネット上で使えるボタンに変換します。
「WEB用に保存」は、
コマンド（つかむ）、オプション（コピー）、シフト、「Ｓ（保存）」を押します。
でも、このままでは「アートボード」サイズの巨大なボタンになってしまいます。
くれぐれも、指がつらないように注意して (゜д゜；)
パソコンの動きも遅くなりますよ～。
そこで「アートボード」自体を画像のサイズに変更します。
前のバージョン「トリムマーク」に変わる設定が
「アートボード」というわけですね。
「アートボード」は「オブジェクト」の下の方。
あら？種類があるけど、どれかな
ではまず「オブジェクト全体に合わせる」を実行してみましょう。
あれ
上下に余計なスペースが・・・
実は・・・。
プレビューを解除してアウトライン（骨組み？）にして見てみると
この世には、目には見えないものって本当に、あるんですねえ
要するに「オブジェクト全体に合わせる」では、
マスクされていないパスや点、（自分的には）余分なオブジェクトも範囲に含むということですね。
そこで「選択オブジェクトに合わせる」を使いましょう。
一番上にある外側のパスを選択します。
「選択オブジェクトに合わせる」を実行すると、ぴったりの「アートボード」に！
やった
「アートボード」の関連記事
Illustrator CS5 アートボードの設定
ここで、ようやく「WEB用に保存」です！
先ほど書きましたが「WEB用に保存」は、
コマンド（つかむ）、オプション（コピー）、シフト、「Ｓ（保存）」。
さあ、思い切って押しましょう！
くれぐれも、指がつらないように注意して (°Д°；≡°Д°；)
押しましたか？
この画面、出ましたか？
設定について、ここでは詳述しませんが
とにかくgifで保存してみましょう！
（gifは、透明にしたい、色数が少なくサイズを抑えたい時に使います）
ボタン画像が完成しましたね
お疲れ様でした～
サイドバーにリンク画像を貼ってみる！
で登場した「真の蔵」を題材に、バナーの作り方をご紹介します。
初心者の方にもわかりよう、なるべく工程を省かないようにしますね
長方形ツールでオプションを押しながらクリック。
180px×60pxに設定します。
文字が白、黒ベースのバナーなので、カラーパレットで
長方形を黒に設定します。
私は紙人間
なのでCMYKのBL100。
もちろん、WEBセーフカラー、RGBでもOKです。
保存する時にWEB用に変換されるので、どちらでも大丈夫
イラスト、文字の素材を貼ります。
コマンドC（コピー）→V（ペースト）。コピペというやつですね（‐＾▽＾‐）
黒の長方形をつかんで、
コマンド（つかむ）、オプション（コピー）、シフト（水平･垂直・45度）を押しながら
下へドラッグ！
指がつらないように注意して (゜д゜；)
↑おっと、画像のタッチが変わった！
手がふさがっていたので、カメラでモニタを撮りました (・∀・) 原始的。
モニタをムービー録画するソフトがあれば良いんでしょうけど、持ってないちゅうねん
黒の長方形を、青に変更します。
それでは、レイアウトを整えましょう。
仕上がりイメージが解らないので、
黒の長方形をコマンドC→F（同じ位置の前面にペースト）し
塗りを「なし」にして、罫線に色を付けて作業します。
センスと美貌で好きなように作ってくださいね。
完成したらコマンドA（全てを選択）。
コマンド7（クリッピングマスクを作成）で
一番上にある長方形で下のイラストや文字をマスクします。
やった～～～
それっぽいね
これでデザインは完成！
次はWEB用に保存するため、サイズぴったりのgif画像に変換します。
このままでは、巨大なボタンになってしまいますよ～
次回へ続く。
で登場した「真の蔵」を題材に、バナーの作り方をご紹介します。
初心者の方にもわかりよう、なるべく工程を省かないようにしますね
長方形ツールでオプションを押しながらクリック。
180px×60pxに設定します。
文字が白、黒ベースのバナーなので、カラーパレットで
長方形を黒に設定します。
私は紙人間
なのでCMYKのBL100。もちろん、WEBセーフカラー、RGBでもOKです。
保存する時にWEB用に変換されるので、どちらでも大丈夫
イラスト、文字の素材を貼ります。
コマンドC（コピー）→V（ペースト）。コピペというやつですね（‐＾▽＾‐）
黒の長方形をつかんで、
コマンド（つかむ）、オプション（コピー）、シフト（水平･垂直・45度）を押しながら
下へドラッグ！
指がつらないように注意して (゜д゜；)
↑おっと、画像のタッチが変わった！
手がふさがっていたので、カメラでモニタを撮りました (・∀・) 原始的。
モニタをムービー録画するソフトがあれば良いんでしょうけど、持ってないちゅうねん
黒の長方形を、青に変更します。
それでは、レイアウトを整えましょう。
仕上がりイメージが解らないので、
黒の長方形をコマンドC→F（同じ位置の前面にペースト）し
塗りを「なし」にして、罫線に色を付けて作業します。
センスと美貌で好きなように作ってくださいね。
完成したらコマンドA（全てを選択）。
コマンド7（クリッピングマスクを作成）で
一番上にある長方形で下のイラストや文字をマスクします。
やった～～～
それっぽいね
これでデザインは完成！
次はWEB用に保存するため、サイズぴったりのgif画像に変換します。
このままでは、巨大なボタンになってしまいますよ～
次回へ続く。