BACK

バナーを作ってみよう♪

とても簡単なバナーの作り方を明記してみます(^_^)
貴方の手作り素材をぜひ、HPに使ってみて下さい(^_^)

★準備するもの
パソコン・・・1セット
画像製作ソフト・・・1つ ※ここでは主に(C)Adobe Photoshop(R)(以下Photoshop)で進めます
バナーに使いたいアイコン、壁紙などの素材・・・適宜
※Windows対応の方法でのみ進めていきます

はじめに
基盤を準備・・・・・・・・・・壁紙からバナーサイズ(88×31ピクセル)の基盤を作る
文字を入れる
文字を入れる:応用・・・・文字にレイヤーで影を付ける
仕上げ・・・・・・・・・・・・・・GIFとJPG(JPEG)を使い分ける
仕上げ(制作中)・・・・・・・・・応用いろいろ

■はじめに・・・
バナー(リンクバナー)は、貴方のページのいわば「広告」又は「顔」みたいなもんです。
可愛いのや奇麗なの、凝ったの、かっこいいのなどなど、人それぞれのページの
色んなバナーがあります。
ちょっとばかしよれよれでも、文字がゆがんでても、それは手作りの良さです(^_^)
恥ずかしがらずにどんどん手作りしてみましょうね。

もう一つ大事な事は、リンクバナーはあくまでも「相手の方のページに表示して貰う物」です。
懲り過ぎてあんましファイルサイズ(バイト数)がでかくなったり、縦横サイズがでかいのは、
相手の方にも迷惑ですので、出来るだけ軽く(バイト数を小さく)しましょう。
サーチエンジン等では「○バイト以下」と決められている所もあります。

この画面のTOPへ

ここでは一般的とされている、88×31サイズのバナーで進めていきます
作業中は、出来るだけこまめに保存しましょう
思いがけない時にすかっと落ちたりフリーズしたりして、泣いてしまいまする

操作:1
基盤にしたい壁紙などのファイルを開きます。
ここでは、この壁紙を使ってみます

お花の壁紙
※素材屋さんによっては加工を禁じているところもあります
必ず注意事項を読んで、加工OKを確認してから行いましょう
Queen's FREE Worldではバナーやタイトル制作に使うのは、
OKになっています


この画面のTOPへ

操作:2
まずは壁紙をバナーのサイズにカットする事からはじめます
Photoshopのようにサイズをカットできる機能がある場合は、
サイズ変更機能で横88ピクセル縦31ピクセルにカットします

模様を小さくしたい時は、解像度(Photoshopの場合)で、まず横幅だけを88ピクセルに
縮小したあと、横幅そのまま、縦31でカットします

うまくカット出来ない場合は、
「新規制作」として縦31ピクセル横88ピクセルの白い四角の画面を準備します。

先の壁紙を選択機能で「すべて選択」して、「コピー」します。
次に新規に作った白い画面にカーソルを持ってきて、「ペースト(貼り付け)」します
上手く行ったら壁紙がぺたっと張り付いているはずです
※はりついてなかったら、壁紙の選択→コピー→貼り付けを再度やって見てください

何度やっても新規画面がまっしろけの時は、多分壁紙の方にどんどん張り付いてると思います(^^;)
新規画面のどこかをクリックして、ソフトに「今はこっちに貼り付けたいの」と、
教えてあげましょう。
それから貼り付けします。

それでも上手く行かない時は・・・無地の画面を作って、好きな色を流し込んで基盤にしましょう〜

この画面のTOPへ

操作:3
カットできたら、次にとても大事な事をします
壁紙の拡張子がGIFの場合は、色の数が256色以下に設定されてますので、
一旦16M色に色数を上げます
Photoshopなら「モード」の中を見ると「インデックスカラー」にチェックされてると思います
これを「RGB」にチェックしなおしします
すると、パレット(表示させてた場合)の色がカラフルに変わります
(その他のソフトの場合は、マニュアルを参考にして下さい(汗)

これで取りあえず、基盤が出来ました(^_^)
SAMPLE

この画面のTOPへ

文字を入れる
次は一大イベント(?)の文字入れです
文字入れにはテキストツールが付いたお絵描きソフトが必要になります
ツールボックス(ペンやバケツのマークのアイコン達)は大抵の場合、「A」や「T」など、
アルファベットのアイコンになっています。
では、文字を入れてみましょう。
1.ソフトのツールボックス(ペンやバケツなどなど、描画の道具のアイコン)の
    テキストツール(たいてい「T」や「ABC」など、アルファベットに
    なっています)をクリックします

2.文字の色にしたいカラーを決めて、パレットの色をクリックします

3.次にプレートの文字を載せたい場所にカーソルを持っていってクリックすると、
    文字を書ける状態になりますので、キィボードで文字を打ちます
    Photoshopの場合、文字を書き込む画面になります
    そこでフォントの種類等指定できますので、好みのフォントを選んでクリックします
    アンチエィリアスにチェックを入れておきます

4.画面に文字を書いてOKすると、基盤に文字が書き込まれます

5.まだ文字を動かせる状態ですので、文字を置く場所へ移動します
    この時、文字以外のところをクリックしてしまうと、その場所で文字が
    固定されてしまうので、注意です
    もし、やってもうた!の時は、慌てずに「アンドゥ(やり直し)」機能を使いましょう

6.場所が決まったら、文字以外の場所をクリックすると、文字が固定されます
    これで文字入れは完了です
これは、ただ簡単に文字を書いただけのパターンです。
SAMPLE

この画面のTOPへ

□文字入れ応用編
良く見る文字に影が付いていて、ちょっと立体っぽくてなんかカッコイイみたいな?
というバナーの方法です。
PhotoshopやPaint Shop proのように、レイヤー機能のあるソフトの
レイヤーを活用します。
1.バナーの基盤にした画面上で、「新規レイヤー」を作成します

2.レイヤーの上で、上の文字入れの手順にしたがって文字を書きます

3.その文字を固定しないまま(選択の点線が文字の周りをうにゃうにゃ囲ってるまま)、
    その文字を「編集」→「コピー」します
    目には見えないですが、パソコンの「クリップボード」とかいうやつに、その文字が
    一旦保存されている状態です

4.次に、カラーパレットから文字の影にしたい色を選んでクリックします

5.影の色を選んだら、うにゃうにゃの点線で囲まれてる文字をそのまま「塗りつぶし機能」→
   「描画色」で、塗りつぶします
    上手く行ったら文字が影の色になるはずです
    上手くいったら、文字以外の場所をクリックして、影を固定します

その影の上に、さっき「コピー」していた文字を「貼り付け」して、
固定する前にほんのちょっとズラします
すると、文字がちょっと立体っぽい感じになります
Photoshopの5以降だと、自動的に新しいレイヤーが出来て、文字が貼りつきます
SAMPLE
この画面のTOPへ

□次は、この影の効果です
この影に「ぼかし」をかけると、ちょっと浮き上がってるような効果が出ます
1.文字をコピーする前に、影だけの時に「ぼかし」をかけます
   「フィルタ」の中の「ぼかし」−「ガウス」をクリックします
    すると、ぼかしの強弱のコマンドが出てきますので、設定します
    ここのワンポイントは、「文字が細くて小さい場合は、1以下で設定」します
    ぼかしすぎるとなんだかくすんだような感じになるだけで、効果にならないからです

    バナーくらいのサイズの文字は、大抵超ちっさいので、大半が0.7〜0.9前後で設定します
    実行すると、ぼやんと影がぼやけているはずです

2.この上に、コピーしていた文字を貼り付けします
    真上に貼り付けすると、ぼかした部分が隠れてしまうので、文字を固定する前にちょっと斜めに
    移動させます
    斜め上、斜め下それぞれの移動の方向で、文字の浮いてる感じが変わります
    また、影から離し過ぎると違う効果になります
    あんまし離し過ぎると、たまにちょっち間抜けな感じになるので、注意です

3.文字の場所が決まったら、文字以外の場所をクリックして、固定します
    これで影付き文字が出来ました
SAMPLE
Photoshopの5以降や、Paint Shop Proでは、上のややこしぃ作業なしで
ソフトの機能でカンタンに影付けが出来ます

Photoshop→レイヤー→効果→ドロップシャドウ
Paint Shop Pro→効果→3D効果→影を加える

この画面のTOPへ

操作:4
文字入れが終わったら、これをサイト(HP)にのっけられるようにします
間違ってもBMPのままのっけないようにしましょう
また、ファイル名は必ず半角英数字でつけておきます
日本語では、文字化けして読み込めなかったりしまする

GIFへの変換:
1.モード→インデックスカラーで、色数を減らします
2.ファイル→別名で保存→保存する拡張子の種類から、gifを選びます
3.○○.gif(半角英数)で保存します

Paint Shop Proでは、減色なしのままファイル→エクスポートGIFイメージで、
GIFに出来ます

JPG(JPEG)への変換:
1.レイヤーだったら、レイヤーの統合(結合)します
2.ファイル→別名で保存→保存する拡張子の種類から、jpg(jpeg)を選びます
3.○○.jpg(半角英数)で保存します

Paint Shop Proでは、レイヤー統合しないままファイル→エクスポートJPGイメージで、
JPGに出来ます

拡張子と画質に関しては CG講座の方でちょこっと解説してまする

この画面のTOPへ

応用編、アイコンをのっけるバナーは、また次回(^_^)ノしばし待たれよ

BACK