制作レポート�A 

ここからは画像処理のレポートです。それまでレタッチソフトというものをほとんど使ったことがなく，始めてPhotoDraw2000の画面を見たときは「何か使いにくそうなソフトだな〜」と思いました。実際，今もよく分からない点がたくさんあるんですが。とりあえず，以下の説明を読んでもらえると，このＨＰ程度のものは作れます。

�@ 背景画像の作成（１） 

たとえば，トップページの画面左端に，黄緑色の帯を背景にしたメニューを入れたい，としましょう。最初は，この方法がわかりませんでした。画面に表を作って（罫線のサイズは０に設定），その表の左端の列に色を塗ることはできても，表の外側にまで色を塗る方法がわからなかったからです。で，他のHPなどを研究した結果，ようやく「色つきの壁紙を背景に使えばいい」ということに気づいた次第です。無料サイトからフリー画像を入手することもできますが，PhotoDrawを使って自分で作ることもできます。たとえば，下のようなの。

手順は，次のとおりです。（このHPのトップページでは，左端に黒い帯をつけた壁紙を使いました）

�A 背景画像の作成（２） 

このHPには，右の例のような２色のグラデーションになった背景が多用されていますが，これもすべて自分で作りました。右の画像を例にとって，手順を説明してみます。

（１）PhotoDraw で，細長い四角形を描く。 （２）その四角形に「塗りつぶし―グラデーション（２色指定）」で適当な色を組み合わせて塗る（パターンは適当なのを選択。右のパターンは上から下へ色が変化するもの）。 （３）その四角形を「切り抜き―型抜き」で型抜き（余白を削除）する。 （４）あとは，上記�@の（３）以下の手順と同じ。FrontPageの画面で「書式―背景」を使って右の画像を選択すると，画面全体にグラデーションの入った背景が貼り付けられる。

�B タイトルロゴの作成 

このHPの各ページのタイトルロゴ（右の例のような文字）は，すべて PhotoDraw で１つずつ作成して FrontPage の画面に貼り付けたものです（このページのロゴも同様）。作り方の手順は，次のとおりです。

（１）PhotoDraw の白紙画面に，「テキスト―テキストの挿入」でタイトル文字を入力する（ロフォントは適当に設定）。 （２）「塗りつぶし」で文字に適当な色を塗る（グラデーションの指定も可）。 （３）「輪郭―プレーン」で，文字に囲み線を入れる（線の太さとスタイルも適当に設定）。 （４）文字の下にアンダーラインを引く（色・太さ・スタイルも適当に設定）。 （５）SHIFTキーを押しながら文字とアンダーラインを両方選択し，「配置―グループ化」で文字とアンダーラインを一つにまとめる。 （６）「切り抜き―型抜き」で，タイトル文字とアンダーラインを型抜き（余白を削除）する。 （７）「配置―配置―サイズ」で，画像の大きさを調節する。 （８）「ファイル―用途別に保存―Webページ―Webページの背景が透けて見えるようにする―Webページの背景に画像を並べて使う」で，名前をつけて画像ファイルを保存する。 （９）FrontPage を開き，その画像ファイルを貼り付ける。（画像の大きさは FrontPage の画面上でも調整可）

【注意】 （８）で，普通は「(A)Webページの背景が透けて見えるようにする」を選択しますが，出来上がったWebページを印刷したいのであれば，「(B)背景色で塗りつぶす」を選択して，背景色を白に設定します。(A)で保存すると，印刷したとき余白が真っ黒になってしまう（FrontPageの画面では背景色が透けて見えるが，印刷すると黒くなる）ためです。

�C 写真を使ったミニアイコンの作成

たとえば「かぶせ釣り事典（対象魚編）」のコーナーでは，見出しの文字の代わりに右のような小さな写真を使って，この写真にハイパーリンクを設定しています。この写真は，PhotoDraw で写真を開き，「切り抜き―手動トレース」で輪郭をなぞって型抜きします（自動トレースは精度が悪いので，手動がベター）。あとは，上記�Bの(6)以下の手順と同じです。

�D ぼかし画像の作成

トップページに，輪郭をぼかした画像を入れています。右の見本で説明すると，まず PhotDraw で写真を開き，「切り抜き―型抜き」で写真を楕円形に型抜きします。次に「輪郭―ぼかし」で適当なぼかし（この写真の場合は60％）を入れれば完成です。ここで注意！右の見本を見て，「変だな？」と思う方もおられるでしょう。そう。背景が透けていなくて，白くなっている！ --- これは，PhotDraw の限界です（サポートサービスで確認済み）。普通は，上記�Bの(8)の手順で gif形式のファイルとして保存すれば，余白に透過処理を施すことができる（上の例で言うと，楕円形の周囲の余白が背景色のピンク色になる）のですが，ぼかし処理をした写真をgif形式で保存すると，ぼかしが消えてしまいます。そこで仕方なく，PhotoDraw で作成したぼかし写真を（ファイル形式を変えないで）そのまま FrontPage の画面に貼り付けます。これならぼかしは残りますが，今度は（gif形式でないため）透過処理ができていません。だから上の写真のように，余白が白く残ってしまうわけです。このHPのトップページは，本当は背景色を使いたかったのですが，そうするとぼかし写真の余白が白く残ってしまうので，仕方なく背景色を白にした，というわけです。

�E 視覚効果の設定

トップページのさまざまな視覚効果は，「挿入―コンポーネント」で行います。使ったのは，次の３つです。

(A)については簡単なので省略。(B)は，同じ大きさの画像を重ねて，効果（このHPのトップページのタイトル画像の場合は「ディゾルブ」）を設定します。(C)は，トップメニューにある下のようなボタンです。

  ← 市販のマニュアルにも必ず説明がありますが，一応触れておきます。「挿入―コンポーネント―ホバーボタン」を開き，効果の種類（このボタンは「グロー」）や背景色・効果色・音などを選びます。次の３点に注意。

(1) ホバーボタンにターゲットフレームの設定をすることはできない。

(2) ハイパーリンクでページを表示した後にフォントの色が変わる設定をすることはできない（この例で言うと，フォントは黄色から他の色には変わらない）。

(3) ホバーボタンの背景を透明にすることはできない。（ホバーボタンの背景とページ全体またはセルの背景を同色にすれば，同じ効果が得られる）

← リンクバナーの作成も，結構手間どりました。文字をできるだけ大きくしないと見づらくなる点に注意。このバナーは，イシダイの写真・文字・外ワク（四角形）の３つをグループ化（それぞれに色を設定）したものです。最後に，イシダイの画像だけをチヌの画像に置き換えたバナーをもう１つ作り，両者の画面を重ねてバナー広告マネージャでイシダイとチヌの絵がチカチカ切り替わる形にしてアップしたのですが，「リンクバナーが取り込めない」というご指摘が相次いで到着。どうやら，バナー広告には「名前をつけて画像を保存」コマンドが使えない（？）らしいのです（本当の所はよくわからない）。で，画面切り替えなしのバナーに差し替えました。