バナーの文字入れ方法
ここではWindows初期搭載ソフト「ペイント」でできるバナーの文字入れ方法を紹介します。
作り方がわからない、うまくできないという方は基礎的ですが、参考にどうぞ。
|
|
[0] 準備

まずは文字入れ用のバナーを用意し、「ペイント」を起動してください(アクセサリ内)
「ファイル」>「開く」を指定し、バナー台を開きます。
まず一度、そのままの状態で「ファイル」>「名前を付けて保存」を指定し、「ファイルの種類」を「24ビット ビットマップ」に変更し保存しなおしてください。
※JPG/GIF画像のままだと利用できないカラーがあるためです。
これで現在バナーは [バナー.bmp] という保存形式になっています。
|
|
[1] 文字入れ1
それでは文字入れしていきたいと思います。
まず、下の図にあるようにメニューから「文字入れツール」を選択してください。
「文字入れツール」を押すとメニュー下に2つ絵が現れますので、下の「背景透過」を選択してください。

|
|
[2] 文字入れ2
次に文字の色を決めたいと思います。

上図内(1)のカラーボックスから文字色を決めてください。
※カラーボックスに無い複雑なカラーを使いたい場合
(1)カラーボックスの中から一つ色をダブルクリックし(何色でも構いません)、「色の編集」という小窓を出してください。
(2)色の作成のボタンを押すと(3)の画面が表示されますので、そこから自由に色を選びOKしてください。
|
|
[3] 文字入れ3
文字色を決めたら、いよいよ文字を入れていきましょう。
まずはバナーの上、文字を配置したい場所をクリックしてください。
バナーの上に青い枠が表示されます。これが文字の入る場所です。
枠が小さいと文字が入りませんので、下図の様に文字が入る程度まで枠を広げましょう。

枠を広げたら入れたい文字を打ちます(下図例では「MICROBIZ」)
(枠に文字が入りきらなかった際は、もう一度枠を広げて打ち直してください)
文字が打てたら下図のように文字をドラッグしておきましょう。

|
|
[4] 文字入れ4
ここからはフォントを決めたいと思います。
文字をドラッグしたまま、下図のように「表示」から「書式バー」を選択してください。

【書式バー】

表示された書式バーを使って、フォント、文字の大きさなどを決めていきます。
「フォント名」「フォントサイズ」をクリックするとドロップダウンバーになりますので、お好みに合わせて選択してください。
※フォントサイズは通常最低値が8となっていますが、バーに直接書きこむことで変更は可能です。
【フォント見本一例】

※フォントはフォントサイト様で無料配布されているのもあるので探してみてくださいね。
※例の右フォントは BitmapMania 様から抜粋。
ペイント向きのビットマップ文字が多く、可愛いのでバナー作りにお奨めです。
|
|
|
[5] 文字入れ5
フォントもフォントサイズも決まったら、あとは細かい配置だけです。

青い枠を広げ、狭めるのがペイントでの文字の配置方法です。
よって、図のように点・右下(赤)を枠を広げてから、点・左上(黄)で枠を狭めます。
右から左に文字を動かす時は、上記の逆順で動かしてください。
枠自体を動かすことも可能ですので、ドラッグ&ドロップで細かい微調整を行ってください。
この時点で色なども変えたい場合は変更し、完成の形まで微調整を行ってください。
間違って固定してしまった場合も、「編集」>「元に戻す」でやり直せます。
|
|
[6] 保存
それでは、完成したバナーを保存しましょう。
bmp形式のままでは、WEB上に掲載するには容量が大きすぎます。
[JPG/GIF/PNG]の三種の保存形式の変更し、画像を軽くしてから使います。
「ファイル」>「名前をつけて保存」より
「ファイルの種類」を「JPG/GIF/PNG」のどれかの拡張子で保存します。
JPG / 4.343KB
GIF / 3.918KB
PNG / 5.019KB
使っている色数が少ない上、元々がGIF画像な分、GIFとPNGは綺麗に出ましたが、JPGは少しだけ劣化してしまいました。
全体的に大した差がでなかったので、ここは好きな拡張子を使っていいと思います。
【例2】
上のバナーではあまり変化が掴めなかったので、色の多いバナーで変化をしっかり見てみましょう。
元のbmp画像(別ソフトで綺麗なGIFにしています)
JPG / 3.661KB / 劣化大
GIF / 6.950KB / 点描化
PNG / 10.428KB / 容量重い
通常保存すると、こういう変化が見られます。
PNGは綺麗ですが、バナーの10KB越えはできる限り避けるのが無難でしょう。
どれも一長一短ということで、自分がいいと思ったものを使うことをお奨めします。
|
|
|
以上、バナーの文字入れ方法は如何だったでしょうか。
文字入れ3の辺りから判りにくかったかとは思いますが、言葉で理解するより、 実際に動かせばわかることも多いかと思いますので、何事もチャレンジしてみてくださいね。
|