ペイントを使ってホームページのバナーを作ってみよう

ペイントを使ってホームページ用のバナーを作成する手順を紹介します。
まず、作成するバナーのサイズを決める必要があります。
今回は、横幅400ピクセル、高さ75ピクセルのサイズでバナーを作成することにします。

横幅に近いサイズに画像を縮小します。

「ペイントを使って写真を加工してみよう」を参考に横幅より少し大きいサイズまで、写真を縮小します。
ここで、問題があります。サイズは400ピクセルなのに対して、ペイントでの縮小指定はパーセントしか使えません。よって、現在の写真サイズから何%のサイズに縮小したらよいのかを計算する必要があります。

※一般的な市販のソフトであれば、わざわざ計算する事無く、400ピクセルと指定することで簡単にサイズを調整できます。この手順が煩わしいと感じたら、ペイントより高性能なソフトを利用するようにしましょう。

現在の写真のサイズは、メニューの「変形」にある「キャンバスの色とサイズ」をクリックして表示される
幅と高さから知る事ができます。

今回の例で扱う写真の場合は、幅3264ピクセル_高さ2448ピクセルとなっています。

写真を縮小する比率は、おおよそ以下の式で計算できます。
目的の横幅（400ピクセル）÷現在の横幅サイズの1%分の値（ピクセル指定：32.64）＝縮小する比率
よって今回の例題では、以下のようになります。

400÷32.64＝12.254901960784313725490196078431

ペイントでは、小数点が扱えないため12%になります。
しかし、実際に12%で縮小すると400ピクセルより短くなってしまいます。
（小数点まできちんと計算すると３９９．９９９９９９９９〜と400ピクセルに限りなく近くなりますが、どのみち400ピクセル未満ですので、意味がありません。）
ですので、13%で縮小するようにして、余分な部分を消去するようにしましょう。

余分な部分を削除する方法

メニューの「変形」にある「キャンバスの色とサイズ」を使うと、左上を基準とした指定のサイズにキャンバスを切り抜くことができます。

「キャンバスの色とサイズ」をつかって、写真をバナーのサイズ（例：400x75ピクセル）に
整える作業を行います。

このまま切り抜きをすると、写真の上部しかバナー画像に表示されません。
今回の写真を例にすると、空と建物の一部しか納まりません。

そこで、写真をベストポジションに移動させる必要が出てきます。
まず、マウスの座標をたよりに切り抜かれる位置を確認します。
マウスの座標は、画面右下に、（幅、高さ）で表示されます。

マウスポインタの位置から、バナーのサイズがペイント上ではどれくらいになるか暗記してください。

写真を動かします。メニューの「編集」から「すべて選択」を選んでください。写真の周囲が点線で囲まれます。

マウスで写真を上に動かしてください。実際に動かすときは、暗記したバナーの位置がたよりになります。

写真を切り抜きます。メニューの「変形」にある「キャンバスの色とサイズ」で、
幅400高さ75に設定して「OK」ボタンを押してください。
バナーのサイズに写真が切り取られます。

文字を入れる

ここでは、以下の写真のように文字を入れる方法について解説します。

文字を入力するには、ツールボックスの「テキスト」ツールを使用します。

テキストツールを選んだら、ツールボックスの下にある背景指定で、
下段のアイコン（背景を透明にする）を選んでください。

文字を入れる領域を指定する

文字を入れたい場所で、円を描くときと同じ要領で、マウスを斜めにドラッグして
文字を入れる領域を指定してください。

文字を指定する

書式バーで、文字の種類と大きさを選べます。書式バーが表示されていない場合は、
表示から「書式バー」をクリックしてチェックを入れてください。

今回は、以下に指定にしてください。
フォントを「MSゴシック」
サイズを「18」

また、描画色を、白にしておいてください。

点線で描かれた領域の中を一回クリックして、文字入力カーソルを表示させてください。
そのあと「PKC倶楽部カルチャースクール」と入力します。

点線が残っている間は、文字の入力内容や文字の種類・大きさを変更できます。
また、領域をドラッグすることで、文字の移動もできます。
文字入力をキャンセルしたい場合は、ESCキーを押してください。

領域の外をクリックすると、テキスト入力が終了します。
文字が写真に定着して、修正できなくなりますので注意しましょう。
※この場合も、ペイントを終了させるまで、編集→「元に戻す」で元に戻せます。

以上、ペイントでのバナーの作成方法となります。