ホームページ・ビルダーでWEBサイトを作ろう

ウェブアートデザイナーでバナーを作成しよう!

バナー『 banner』とは、旗、幟、横断幕などの意味があります。ホームページで自分のサイトを他の方がリンクしてくださる場合、リンク専用の画像があると便利ですね。ご自分のサイトの旗、つまりバナーを作成してみましょう。タイトルのロゴを作成した時に使用した「ウェブアートデザイナー」を使います。

バナーのサイズは、国際的な標準もありますが、ここは、個人のサイトでリンクをする時に使用するサイズが多いバナーを作りましょう。バナーサイズ88×31ピクセル!・88 x 31(Micro Bar)このサイズが一番多い。

バナーのサイズでよく見かけるのは、他には↓のサイズですね。

   ・200 x 40 ピクセルのバナー    ・32 x 32ピクセルのバナー  


「ウェブアートデザイナー」の起動

・【スタート】→【すべてのプログラム】→【IBMホームページ・ビルダー】→【ツール】→【ウェブアートデザイナー】

 


リンク用バナーの作成

1,テンプレートギャラリーを活用してバナー台作成

  
  出来たバナー台を名前を付けて保存

 

 

 

 

 


2,ツールバーのボタンの作成からバナー台

サンプルの中からバナー台の形状を選択し、次へで色を選択。

出来たバナー台もサイズが大きいので、その上で右クリック、オブジェクトの編集→ボタンの編集→情報でサイズ調整  出来たバナー台を保存

3,四角を描いてバナー台を作成

キャンバスに操作ツールバーより四角→好きな色で四角を書く。画像の上で右クリック。
オブジェクトの編集→情報タブで幅88、高さ31に指定する。(縦横比保持のチェックを外す)

サイズが決まったらルールバーより「ボタン効果」をクリック

ボタン効果の画面で凹凸や影の濃さを決めてOK。

ちょっと立体的になったでしょう。

このファイルを一度保存しておきます。

 

 

または、図形の編集で枠と塗りつぶしにチェックが入っているのを確認して線の色を目立つ色に指定してもいいでしょう。

一つ作ったらそれをキャンバスにたくさんコピーして、いろいろな色に塗りつぶしてたくさんのバナー台を準備しても。

 


バナー台に文字を

気に入ったバナー台を準備し操作ツールバーの文字より文字を配置します。

バナー台が小さいので苦慮します。(笑) 色・フォント を決めて作成してみました。 

文字もたくさんコピーしていろいろなバナー台に乗せて試作してみてください。

文字が長い場合は、文字を分けると配置しやすい。

メニューバー→【表示】→【グリッドの表示】でグリッド線をキャンバスに表示

この場合、赤い線の部分です。

【表示】→【拡大表示】を選んで細かい作業をする場合もあります。2倍表示から4倍表示まで選択できる。

 

 

いくつか作成時に、オブジェクトを綺麗に整列させたい場合は、メニューバー→【オブジェクト】→【整列】

7つの中から選ぶとキチンと整列します。

 

 

 

 

 

 

 

 


今度は、動くバナーを作りましょう。

 

そのための準備

ウェブアートデザイナーでバナー台を作成。
同じバナー台を3つ、コピーして準備。

文字、アイコン、写真の切り抜きなど好きなものをバナー台にそれぞれ乗せてみます。

乗せた時、文字等が見えなかったら右クリックで重なりを一番下にしたいものは、最背面に移動等を使って表示させます。

出来上がった3つのバナーを保存。

 

  

次へ「ウェブアニメーターで動くバナーを作ろう!」

 

▲↑へ

気分はゴムとびパソコンde遊ぼう(ホームページビルダーでWEBサイトを作ろう)