バーナーを作成。

それとIBMのホームページビルダーにて作成しますので、ホームページビルダーを利用していない方は、参考程度に。

88×31ピクセルに挑戦。

まず、ホームページ・ビルダーを立ち上げて、ツールからウェブアートデザイナーを起動させてください。

1．オブジェクト→図形の作成→四角形→四角形（枠のみ）を選択します。

適当に枠を作成してください。色も白以外なら何でもOK.

2．枠を選択して、図形の編集画面を表示させます。

情報をクリックして、バナーのサイズを決めます。

今回は、88×31ピクセルなので、幅に88、高さに31を入力してください。

※縦横比保持のチェックは外しておいてね！

次に線の色をクリックして、枠の色を決めます。

今回は、ネイビーを選択しました。

3．デザインを決めます。

おいおい今頃決めるのかよ～！

今回は、ここでデザインを考えますが、予めデザインし、それを忠実に反映させても良いですよ！そのほうが正攻法かな？？

4．デザインを反映させます。

今回は、適当なロゴと適当な文字の組み合わせにしました。

それを個々に作成して行きます。

5．オブジェクト→図形の作成→四角形→四角形（塗り潰しのみ）を選択します。

１.と同じように適当に作成します。色もそのままで、作成。

バナーの下側に配置しよう思うので、サイズを幅88、高さ12に変更します。

6．．オブジェクト→ロゴの作成を選択します。

ロゴ作成ウィザードに従いテキストの入力画面→色の選択→縁取りの選択→文字効果の選択→完了と進めます。

歩がここで作成したパーツ。

Cと意味不明な数字は、本当は白色です。

7.パーツを合体させます。

今までに作ったパーツを調整をして、88×31の枠内に上手くレイアウトします。

8．キャンバスを右クリック→Web用保存ウィザードを利用します。

保存するオブジェクトを指定するを選択して、指定ボタンを押します。

今回の場合は、全てのオブジェクト（作成したパーツ）同士が重なっているので、レイアウトされているバナーを選択して次へ。

保存形式選択の画面が表示されたら、GIFを選択して次へ。

設定後のファイルサイズを確認して、2000バイトを超えていないようであれば、次へ。

2000バイトを超えているようであれば、色数を落としてみるなどして、調整しましょう！

2000バイトを超えたからといって、必ず問題が生じる訳ではありませんが、2000バイト以内が望ましいのではないでしょうか！？

今回作成したバナーは、1825バイトでした。

次は、保存方法の選択画面が表示されたらファイルに保存を選択して、完了ボタンを押しましょう！

ファイル名を付けて、保存すれば、88×31ピクセルのバナーの完成です！！

こんな感じのバナーとなりました。

7.の工程で、テキスト色や適当な数字を変更しています。

デザイン的なことは別として、この方法で他のサイズのバナーも作ることができますよ！

最後に1つ質問しちゃいます。今回作成したバナーには、欠点が一箇所ありました（涙）

さてその欠点とは？

ヒントは背景色です。

1．の工程を見直してみましょう！！

文字サイズが変更になっているのは、気にしないでね。