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

ホームページ作成って忙しいですね。文章を書いて画像を用意してと。（笑）
文章を書くだけだったら「word」ソフトで十分ですが、ホームページの場合は多くのソフトを使います。
少しは見栄えをよくしたいと思ったら、タイトルやボタンやアイコンなどをオリジナルなものにしたくなります。

タイトルのロゴを作成するのにホームページ・ビルダーの中にとっても便利なソフトがあります。
それは「ウェブアートデザイナー」。優れものです。

ホームページ・ビルダーでページを作成時に＜ロゴ作成ウィザード＞からもロゴは、作成出来ますが、 はじめから「ウェブアートデザイナー」で作成してみましょう。

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

・スタート→すべてのプログラム→IBMホームページ・ビルダー○→ツール→ウェブアートデザイナー
・または、ホームページ・ビルダーを起動中にメニューバーのツールからウェブアートデザイナーの起動をクリック

メニューバーとツールバー。ツールのアイコンにマウスを乗せると説明が表示されます。全部確かめてね。

ウェブアートデザイナーの画面構成です。操作ツールはペイント等でもおなじみですねオブジェクトスタックは、レイヤーみたいなものです。画像の重なりを変えたいときに使います。

左側のテンプレートギャラリーの素材からいろいろな素材を組み合わせて、キャンバスの中でロゴを作成します。

画像の元になる素材を「オブジェクト」と呼びます。 「図形」・「ロゴ」・「ボタン」・「フォトフレーム」等があります。また「イメージ」と呼ばれる自分の写真等も使えます。

キャンバスの上で様々なオブジェクトを重ね合わせてロゴ等の作品を作成します。

ロゴばかりでなく地図作製にも便利です。↓もウェブアートデザイナーで作成しました。

２．ロゴの作成（ロゴ作成ウィザードを使って）

ツールバーより【ロゴの作成】アイコンをクリック

１，文字の指定

ロゴ作成ウィザードにそって順番に文字の入力、フォントの種類やフォントサイズの指定。

細かくスタイルや方向等も指定できる。

指定したら次へ

２，色の選択

文字色を種類の中から選択。

今回はテクスチャの「water」を選んでみました。

次へ

３，縁取りの選択　　

囲み・反転等々あります。「なし」でもOK。

４，文字効果の選択

これもお好みで選んでみましょう。影を選びました。完了。
キャンバスに作成したロゴが完成。

５，ロゴの修正

作成したロゴを修正したい場合は、キャンバスのロゴの上でＷクリックすると「ロゴの編集」が表示されるのでその中のタブから再度好みに修正します。

 

 

作成したロゴだけでは、淋しいときは、ロゴの下に四角形の台やアイコン等を一緒にして賑やかにしてもいいですね。

下の例は、長崎の空とロゴを作成したあと猫のアイコンを横に置き、下に角丸の四角形を挿入し四角形に影をつけてみました。３つの部品から構成されています。

←このロゴは、プロパティは透明化にチェックあり、背景色はキャンバスの色。白色です。

３．文字を画像に

操作ツールバーの【Ａ】をクリックし、文字の色・フォント・サイズを決め、キャンバス上に文字を入力

文字を変更したい場合は、文字の上でＷクリック。

ロゴの編集が表示されるので再度設定し直します。

文字の行間・字間も設定できます。また縁取りや様々な効果も追加できます。

ぜひ試してね。

ロゴ作成ウィザードを使わなくてもこの文字の挿入で、ロゴは、作れます。
また、 テンプレートギャラリーのウェブアート素材でロゴを選択し文字を入れても同じように作成出来ます。

ロゴを作成する方法は、いろいろですが試してみて、自分に合った方法で作成してみてね。

同じ文字サイズでも色や効果やフォントの種類でイメージが違います。文字って面白い！

ロゴのサイズを変更したい場合は、キャンバスの上の文字の周りの四角をドラッグすると大きくも小さくもなります。

４、ロゴをホームページで使う（ロゴの保存）

Web用保存ウィザード を使ってホームページで使える形の画像に変換します。

キャンバスの上に多くの画像をいろいろ並べてもウェブアートデザイナーでは選択した部品を保存することが出来ます。

保存したいロゴを選択し（マウスでドラッグして囲むと選択できる）、【ファイル】→【 Web用保存ウィザード】をクリック

１，保存対象の選択

選択されたオブジェクトを保存する を選択して次へ。

２，保存形式の選択

ファイル形式を指定します。ロゴは通常「 GIF 」で保存 。

３，ＧＩＦ属性の選択

ここでロゴの背景色が、白っぽい背景色の場合は、そのまま。次へをクリック。

黒っぽい色の時は、背景色を挿入したいページの背景色に指定します。

ロゴを挿入したとき、ロゴの周りがギザギザしているのを防ぎます。

 

 

 

 

 

上の同じ画像をグレーの背景色の１に挿入しました。どうでしょうか？１と２の違いです。画像の周りのギザギザ見えますか？

1	プロパティは透明化にチェックあり、背景色はキャンバスの色、白色です。
2

２は保存するときに、プロパティの透明化チェック外し、背景色をこのグレーに指定
背景色のグレーとロゴの縁は同化してます。

４，保存方法の選択

「ファイルに保存」を選んで「images」フォルダの中にgifファイルで保存すればOK！

５，キャンバスも保存しておきましょう。

結構、後で、追加や修正したいことが発生します。
キャンバスの保存は、メニューバーから【ファイル】→【名前をつけてキャンバスを保存】をクリック。

保存場所は、homepageと別のフォルダでもＯＫ。
ファイルの拡張子は、「mif」。このファイルはサーバーにはアップしません。

＊バナー台や、写真、図形、ボタン、アイコン等と組み合わせても素敵なロゴが出来そうです。
たくさんトライしてみてくださいね。

　　

あとは、htmlファイルに【挿入】→【画像ファイル】→【ファイルから】から取り込めばＯＫですね。

各ページのトップに「長崎の空」と文字を記入した所に上の長崎の空のタイトルロゴを挿入しました。

またリンクを貼る画像にはそれぞれリンクを設定しましょう。画像に説明も入れましょう。

次へ（ウェブアートデザイナーで画像の加工）

▲↑へ