62歳パソコン教師の日記 NO.177 (2000.6.24)


ホームページのリンクバナーは、 [Paint Shop] などのソフトを使えば簡単に作ることが出来ます。そのようなソフトがない場合は [ペイント] を使って作ります。リンクバナーの作り方のご質問が多いので、今日はこのご説明をいたします。

  1. 【ペイントを起動する】

    [スタート] →[プログラム] →[アクセサリ] →[ペイント] とクリックして、[ペイント] を起動します。

  2. 【キャンバスサイズを指定する】

    [変形] →[キャンバスの色とサイズ] とクリックします。

    [幅] 欄は [135]、[高さ] 欄は [30] と入力、→[ピクセル] と [カラー] にチェックを付け、→[OK] ボタンをクリックします。

    バナーのサイズに規定はありませんが、大き過ぎると枠に入り切らず、使って貰えないことがあります。 この程度のサイズ(135×30ピクセル)が標準だと思います。

  3. 【拡大表示の指定をする】

    [表示] →[拡大] →[拡大率の指定] とクリック、[400%] にチェックを付け、→[OK] ボタンをクリックします。 原寸大では細かいところまで描けませんから、拡大して作成しましょう。

  4. 【グリッドと実寸を表示する】

    [表示] →[拡大] とクリック、 →[グリッドを表示] と [実寸表示] にチェックを付けます。 [実寸表示] で確認しながら [グリッド] 上に絵を描きます。これで準備完了です。

  5. 【バナーを立体的にする】

    左斜め上から光りがあたっていると想定して、上辺と左辺のグリッド2列分(外側から1、2列目)を明るい色にします。下辺と右辺は暗い色にします。

    [カラーボックス] で色を選択、→[ツールボックス] で [直線] を選択します。線を引くにはドラッグします。

    右上角と左下角の明暗接合部分は、 [ツールボックス] で [鉛筆] を選択して、[実寸表示] を見ながら修正して下さい。立体的になりましたか?

  6. 【枠を付け立体的にする】

    バナーの背景色を、[6] の内側2列分(外側から3、4列目)を塗ります。

    その内側1列分(外側から5列目)を明暗を [6] と逆にしてを塗ります。

  7. 【背景色を塗りつぶす】

    では、中の部分に色を付けましょう。[ツールボックス] で [塗りつぶし] を選択します。→[カラーボックス] で色を選択して下さい。 →色を付ける部分のどこでも結構ですからクリックします。色が付きましたね。

  8. 【絵を描く】

    [ツールボックス] で [鉛筆] を選択、→[カラーボックス] で色を選択、→[実寸表示] を見ながらドットをクリックして描きます。

  9. 【文字を入れる】

    文字を入れるには、[表示] →[拡大] →[標準に戻す] とクリックして、原寸表示に戻さなければいけません。次に、[変形] →[背景色を不透明にする] のチェックを外します。

    [ツールボックス] で [テキスト] を選択します。 →文字を入れる部分をドラッグしてエリアを指定します。 →[書式バー] が表示されます。表示されない場合は、[表示] →[書式バー] とクリックして下さい。

    [書式バー] で書体、サイズを指定します。色の指定は [カラーボックス] で行います。→キーボードから文字を入力します。

    文字の位置を修正する場合は、各辺の中央にマウスポインタを合わせ、両方向矢印に変ったらドラッグします。

    文字を確定した後に文字の位置を修正する場合は、 [ツールボックス] で [選択] をクリック、→ドラッグして文字を選択します。 その状態でマウスポインタを合わせると四方向矢印に変りますから、ドラッグして移動します。

  10. 【ファイルを保存する】

    完成したら、[ファイル] →[名前を付けて保存] とクリック、→[保存する場所] 欄にホームページ用フォルダを指定、 →[ファイルの種類] 欄は [GIF] を指定、→[ファイル名] 欄に [banner] と入力、→[保存] ボタンをクリックします。→「この形式に保存すると、カラー情報のいくつかが失われる可能性があります。続行しますか?」と表示されます。→[はい] をクリックします。→[banner.gif] が保存されます。
以上の手順で作成したバナーを「SALTY]の「リンクページ」に載せました。[8] の [絵を描く] は省略しましたが、右端のバナーがそうです。

複数のバナーを作成して、アニメGIFソフトで順番に表示させる1個のファイルにすると、動きのあるバナーを作ることも出来ます。

※【新しい色を作成する】

[カラーボックス] の中にお好みの色がない場合は、メニューバーの [色] →[色の編集] とクリックすると、[色の編集] ダイアログボックスが表示されます。 →[基本色] の中から、作りたい色に近い色をクリックして [色の作成]ボタンをクリックします。

右側に [カラーマトリックス] が表示されましたね。 [色/純色] 欄に選択した色が表示されていますね。 では、[カラーマトリックス] の中をクリックします。クリックした個所の色が [色/純色] 欄に表示されます。

右端の縦に細長いボックスの横にある黒い左向き三角をドラッグして明るさを調整します。出来上がった色が [色/純色] 欄に表示されます。

では、[色の追加] ボタンをクリックします。→左側の [作成した色 ] 欄に入ります。その色をクリックしてから [OK] ボタンをクリックします。→[ペイント] の [カラーボックス] の左端にその色が表示されましたね。これで使用可能となりました。

但し、[GIF] 形式で保存する場合は色数が限定されますから、微妙な色は変色して正しく保存されません。

[ペイント] の詳しい使い方は、バックナンバーの 9, 13, 48, 50, 69, 91,1 43 をご覧下さい。