パソコン・・・１セット
画像製作ソフト・・・１つ ※ここでは主に(C)Adobe Photoshop(R)（以下Photoshop）で進めます
バナーに使いたいアイコン、壁紙などの素材・・・適宜
※Windows対応の方法でのみ進めていきます
■はじめに
■基盤を準備・・・・・・・・・・壁紙からバナーサイズ（88×31ピクセル）の基盤を作る
■文字を入れる
■文字を入れる：応用・・・・文字にレイヤーで影を付ける
■仕上げ・・・・・・・・・・・・・・ＧＩＦとＪＰＧ（ＪＰＥＧ）を使い分ける
■仕上げ(制作中)・・・・・・・・・応用いろいろ
■はじめに・・・
バナー（リンクバナー）は、貴方のページのいわば「広告」又は「顔」みたいなもんです。
可愛いのや奇麗なの、凝ったの、かっこいいのなどなど、人それぞれのページの
色んなバナーがあります。
ちょっとばかしよれよれでも、文字がゆがんでても、それは手作りの良さです(^_^)
恥ずかしがらずにどんどん手作りしてみましょうね。
もう一つ大事な事は、リンクバナーはあくまでも「相手の方のページに表示して貰う物」です。
懲り過ぎてあんましファイルサイズ（バイト数）がでかくなったり、縦横サイズがでかいのは、
相手の方にも迷惑ですので、出来るだけ軽く（バイト数を小さく）しましょう。
サーチエンジン等では「○バイト以下」と決められている所もあります。
この画面のTOPへ
ここでは一般的とされている、８８×３１サイズのバナーで進めていきます
作業中は、出来るだけこまめに保存しましょう
思いがけない時にすかっと落ちたりフリーズしたりして、泣いてしまいまする
操作：１
基盤にしたい壁紙などのファイルを開きます。
ここでは、この壁紙を使ってみます
※素材屋さんによっては加工を禁じているところもあります
必ず注意事項を読んで、加工ＯＫを確認してから行いましょう
Queen's FREE Worldではバナーやタイトル制作に使うのは、
ＯＫになっています
この画面のTOPへ
操作：２
まずは壁紙をバナーのサイズにカットする事からはじめます
Photoshopのようにサイズをカットできる機能がある場合は、
サイズ変更機能で横８８ピクセル縦３１ピクセルにカットします
模様を小さくしたい時は、解像度（Photoshopの場合）で、まず横幅だけを８８ピクセルに
縮小したあと、横幅そのまま、縦３１でカットします
うまくカット出来ない場合は、
「新規制作」として縦３１ピクセル横８８ピクセルの白い四角の画面を準備します。
先の壁紙を選択機能で「すべて選択」して、「コピー」します。
次に新規に作った白い画面にカーソルを持ってきて、「ペースト（貼り付け）」します
上手く行ったら壁紙がぺたっと張り付いているはずです
※はりついてなかったら、壁紙の選択→コピー→貼り付けを再度やって見てください
何度やっても新規画面がまっしろけの時は、多分壁紙の方にどんどん張り付いてると思います(^^;)
新規画面のどこかをクリックして、ソフトに「今はこっちに貼り付けたいの」と、
教えてあげましょう。
それから貼り付けします。
それでも上手く行かない時は・・・無地の画面を作って、好きな色を流し込んで基盤にしましょう〜
この画面のTOPへ
操作：３
カットできたら、次にとても大事な事をします
壁紙の拡張子がＧＩＦの場合は、色の数が２５６色以下に設定されてますので、
一旦１６Ｍ色に色数を上げます
Photoshopなら「モード」の中を見ると「インデックスカラー」にチェックされてると思います
これを「ＲＧＢ」にチェックしなおしします
すると、パレット（表示させてた場合）の色がカラフルに変わります
（その他のソフトの場合は、マニュアルを参考にして下さい(汗)
これで取りあえず、基盤が出来ました(^_^)
この画面のTOPへ
■文字を入れる
次は一大イベント（？）の文字入れです
文字入れにはテキストツールが付いたお絵描きソフトが必要になります
ツールボックス（ペンやバケツのマークのアイコン達）は大抵の場合、「Ａ」や「Ｔ」など、
アルファベットのアイコンになっています。
では、文字を入れてみましょう。
１．ソフトのツールボックス（ペンやバケツなどなど、描画の道具のアイコン）の
テキストツール（たいてい「Ｔ」や「ＡＢＣ」など、アルファベットに
なっています）をクリックします
２．文字の色にしたいカラーを決めて、パレットの色をクリックします
３．次にプレートの文字を載せたい場所にカーソルを持っていってクリックすると、
文字を書ける状態になりますので、キィボードで文字を打ちます
Photoshopの場合、文字を書き込む画面になります
そこでフォントの種類等指定できますので、好みのフォントを選んでクリックします
アンチエィリアスにチェックを入れておきます
４．画面に文字を書いてＯＫすると、基盤に文字が書き込まれます
５．まだ文字を動かせる状態ですので、文字を置く場所へ移動します
この時、文字以外のところをクリックしてしまうと、その場所で文字が
固定されてしまうので、注意です
もし、やってもうた！の時は、慌てずに「アンドゥ（やり直し）」機能を使いましょう
６．場所が決まったら、文字以外の場所をクリックすると、文字が固定されます
これで文字入れは完了です
これは、ただ簡単に文字を書いただけのパターンです。
この画面のTOPへ
□文字入れ応用編
良く見る文字に影が付いていて、ちょっと立体っぽくてなんかカッコイイみたいな？
というバナーの方法です。
PhotoshopやPaint Shop proのように、レイヤー機能のあるソフトの
レイヤーを活用します。
１．バナーの基盤にした画面上で、「新規レイヤー」を作成します
２．レイヤーの上で、上の文字入れの手順にしたがって文字を書きます
３．その文字を固定しないまま（選択の点線が文字の周りをうにゃうにゃ囲ってるまま）、
その文字を「編集」→「コピー」します
目には見えないですが、パソコンの「クリップボード」とかいうやつに、その文字が
一旦保存されている状態です
４．次に、カラーパレットから文字の影にしたい色を選んでクリックします
５．影の色を選んだら、うにゃうにゃの点線で囲まれてる文字をそのまま「塗りつぶし機能」→
「描画色」で、塗りつぶします
上手く行ったら文字が影の色になるはずです
上手くいったら、文字以外の場所をクリックして、影を固定します
その影の上に、さっき「コピー」していた文字を「貼り付け」して、
固定する前にほんのちょっとズラします
すると、文字がちょっと立体っぽい感じになります
Photoshopの５以降だと、自動的に新しいレイヤーが出来て、文字が貼りつきます
この画面のTOPへ□次は、この影の効果です
この影に「ぼかし」をかけると、ちょっと浮き上がってるような効果が出ます
１．文字をコピーする前に、影だけの時に「ぼかし」をかけます
「フィルタ」の中の「ぼかし」−「ガウス」をクリックします
すると、ぼかしの強弱のコマンドが出てきますので、設定します
ここのワンポイントは、「文字が細くて小さい場合は、１以下で設定」します
ぼかしすぎるとなんだかくすんだような感じになるだけで、効果にならないからです
バナーくらいのサイズの文字は、大抵超ちっさいので、大半が０．７〜０．９前後で設定します
実行すると、ぼやんと影がぼやけているはずです
２．この上に、コピーしていた文字を貼り付けします
真上に貼り付けすると、ぼかした部分が隠れてしまうので、文字を固定する前にちょっと斜めに
移動させます
斜め上、斜め下それぞれの移動の方向で、文字の浮いてる感じが変わります
また、影から離し過ぎると違う効果になります
あんまし離し過ぎると、たまにちょっち間抜けな感じになるので、注意です
３．文字の場所が決まったら、文字以外の場所をクリックして、固定します
これで影付き文字が出来ました
Photoshopの５以降や、Paint Shop Proでは、上のややこしぃ作業なしでソフトの機能でカンタンに影付けが出来ます
Photoshop→レイヤー→効果→ドロップシャドウ
Paint Shop Pro→効果→３Ｄ効果→影を加える
この画面のTOPへ
操作：４
文字入れが終わったら、これをサイト（ＨＰ）にのっけられるようにします
間違ってもＢＭＰのままのっけないようにしましょう
また、ファイル名は必ず半角英数字でつけておきます
日本語では、文字化けして読み込めなかったりしまする
ＧＩＦへの変換：
１．モード→インデックスカラーで、色数を減らします
２．ファイル→別名で保存→保存する拡張子の種類から、gifを選びます
３．○○.gif（半角英数）で保存します
Paint Shop Proでは、減色なしのままファイル→エクスポートＧＩＦイメージで、
ＧＩＦに出来ます
ＪＰＧ（ＪＰＥＧ）への変換：
１．レイヤーだったら、レイヤーの統合（結合）します
２．ファイル→別名で保存→保存する拡張子の種類から、jpg（jpeg）を選びます
３．○○.jpg（半角英数）で保存します
Paint Shop Proでは、レイヤー統合しないままファイル→エクスポートＪＰＧイメージで、
ＪＰＧに出来ます
拡張子と画質に関しては CG講座の方でちょこっと解説してまする
この画面のTOPへ
応用編、アイコンをのっけるバナーは、また次回(^_^)ノしばし待たれよ