close

Enter

Log in using OpenID

[タイトルバナー]の作成

embedDownload
ホームページ復習ノート No38
2008.02.26 日
ウエブアートデザイナーで作る[見出し(タイトルバナー)]
フアイルの中で[見出し]は、大変大きな役割を持っています。ビルダーでは見出しとし
て[ロゴの作成]が出来ますが、単にロゴだけでなく、枠を決めて作る見出し(タイトルバ
ナー)の方が、インパクトも強くフアイルの印象度を強めます。見出しは、色々なソフ
トを使って作成出来ますが、今回はホームページビルダーの[ウェブアートデザイナー]
を使って作成する方法を説明します。ホームページのタイトルを決めた後色々と試作品
を作成して見てください。タイトルの他にも[背景色]などを含めたフアイル全体像との
バランスなども考慮しながら進めてください。
尚、画像を背景にした[見出し]については、セミナーでも取り上げた三上久美子さんの
レシピを参考にしてお試し下さい。
図1
①
ホームページビルダーを起動してメニューバーの[ツール]→[ウエブアートデザイ
ナーの起動]をクリックします。
②
白い画面(キャンバスと呼びます)が表示されますが、この画面が小さい場合はメニ
1
ューバーの[編集]→[キャンバスの設定(下から二番目)を選択してクリックしてく
ださい。
[キャンバスの設定]画面が表示されます。今回は 720×120 ピクセルのタイトルを
③
作りますのでキャンバスの[幅]を 800、[高さ]を 480 としてください。数字を書き
込むと画面が大きくなります
★
ご自分が作る大きさを決めてください。720×120 は例示です。
④
左サイドの[操作ツールバー]の中から[四角(右列の上から三番目)] をクリックして
マウスでキャンバス上に長四角の枠を作ります。(図 1 参照)
図2
⑤ キャンバス上に書かれた長四角の枠を[右クリック]して、表示された画面の[オブジ
ェクトの編集](一番上にあります)を選択します。
(註) オブジェクトの編集の左頭にアイコンが表示されていますが、これと同じアイコ
ンが上段のツールバーの中にあります。これをクリツクしても結果は同じです。
⑥
オブジェクトの編集を選択すると[図形の編集]画面が表示されます。ここには左側
から[線][線の色][塗り潰しの色][影][情報]という項目が並んでいます。最初に[情報]
を選択します。[位置とサイズ]で[幅]を 720、[高さ]を 120 とします。位置の XY 座
標は関係ありません。
*[縦、横比保持のチェックをはずします。][透明度は 0 のままとします]
2
⑦ 次に[塗り潰しの色]を選択します。(図 2 参照)。ここには色の種類として左側から[単
色][グラデーション][テクスチャー]の三種類がありますのでお好きな種類を選択
してください。因みに[グラデーション]を選択すると[autumn]から[yellow04]まで
多数のパターンが表示されますのでここからパターンを選択します。選択したパタ
ーンをクリツクするとキャンバスの背景色が指定の色に変わります。オリジナルな
背景を希望する時は、一覧の下にある[その他]を選択してください。ここをクリツ
クすると[グラデーションの作成]画面が表示されます。この画面の上段に[色の設
定]があり、左側が[始点色]、右側が[終点色]です。此処をクリツクして色を選択し
て調整します。色が決まったら、左サイドにある[形状]からお好きなパターンを選
択してください。
[OK]を押すと選択した色と形状が表示されます。
⑧ 次は[文字の挿入]です。(図 3 参照)左サイドの[操作ツールバー]の中の[A]を選択する
と下に二つの四角(上は全景色、下は背景色)が表示されますので、上の四角を押し
て文字色を決め、下の[フオントフエイス]の三角ボタンを押してお好きな書体を選
択、更に[フオントサイズ]の三角ボタンでサイズを決めます。
下にある[B]は太字、[I]は斜体字の表示に使います。
3
図3
⑨ 上の設定に従い文字を書き込みますが、これを編集する場合は文字列を右クリック
してください。表示された画面の[オブジェクトの編集(一番上)]をクリックします。
そうすると{ロゴ編集}画面が表示されますので、この画面の[フオント名][サイズ]
を設定し、この後必要に応じて[縁取り][効果]を操作して編集してください。
4
⑩
出来上がったバナーの保存はメニユーバー[フアイル]→[Web 用保存ウイザード]を
使って行います。(ツールバーのアイコンからも結果は同じです)。
⑪ [Web 用保存ウイザード]が表示されます。上段にある[選択されたオブジェクトを
保存する]に○を付けます。[指定]ボタンを押します。次へ進みます。
⑫ [オブジェクトの選択]画面が表示されます。この画面で[オプションで重なっている
ものをまとめて表示]に○を付けて次に進みます。
⑬
保存形式では[GIF]を選択して次へ進みます。次の画面もそのまま次に進みます。
⑭
[ホームページビルダーに貼り付ける][フアイルに保存する]の中からフアイルを選
択して完了ボタンを押します。
保存方法として[保存する場所][ファイル名]を書いて保存します。この場合ファイル名
は英数半角でお願いします。この保存した gif を貼り付けてすべて完了です。
★ マイドキュメントの中に専用のフオルダ(名前は作成するホームページの名前など)を作
り、html フアイル、使用する画像などと一緒に保存してください。
★ おわかりにならない点がありましたらご遠慮なくお問い合わせください。
文責 今井
5
Author
Document
Category
Uncategorized
Views
5
File Size
656 KB
Tags
1/--pages
Report inappropriate content