極意(31)ツール「簡単バナー」を極める

「簡単バナー」で作るバナーの作成方法には、人それぞれの方法がありますが、
筆者だったら「こうやって作る」的な種明かしをしてみたいと思います。

前提条件として、バナーの大きさは 200x80px のサイズで作成するものとします。
ツールをインストールして始めて起動した時、その大きさのキャンバスが開きます。

もし別の大きさのバナーを作成する場合には、アイコンが並んだツール群の最左端の
「バナーの大きさを変更します」をクリックしてキャンバスの大きさを変更して下さい。
そしてバナーの背景に画像を挿入し、その上にテキスト文書を挿入してバナーを作成します。


先ず、背景に画像を挿入する

  • (1) アイコン「新規作成」をクリックして新規キャンバスを開く
  • (2)「背景」タブをクリックする

画像の説明

  • (3)「画像使用」をクリックする
  • (4)「参照」をクリックして挿入すべきPC内の画像を参照する

画像の説明


次にボタン仕様を設定する

  • (5) アイコン「バナーのリペイント」をクリックして、前記で挿入した背景画像を確認する
  • (6) 「バナー枠」タブをクリックする

画像の説明

  • (7) 「ボタン化2」タブをクリックして、枠の幅=5ぐらいの値を設定、その他適宜。
  • (8) アイコン「バナーのリペイント」をクリックして、ボタン化の結果を確認する

画像の説明


バナー上に文字を入れる

前記の「バナー枠」処理で、立体的なボタンが作成されていることが確認できます。
次に、そのボタンの上にテキスト文字(最大5行まで)を挿入する。

  • (9)「文字」タブ~「文字列1」とクリックして、1行目の文字列を入力する
  • (10)「フォント」タブに切り替えて文字列1の文字サイズ・色・太字等を指定する
  • (11) アイコン「バナーのリペイント」をクリックして、文字設定結果を確認する

画像の説明

  • (12)「文字位置」タブをクリックして、バナー上の文字列1の表示位置を微調整する
  • (13) アイコン「バナーのリペイント」をクリックして、文字位置結果を確認する

画像の説明

2行目以降のの文字列を入れる場合、前記 (9)~(13) の処理を行数分繰り返す。


作成したバナーの保存について

前記までで作成したバナーを左から4ツ目のアイコン「ファイルに保存します」をクリックしてピクチャーフォルダ等に保存します。その際、保存ファイルの拡張子を以下の基準で選択して下さい。

  • (1) 作成したバナーをホームページ等にアップロードする場合、拡張子は gif、jpg、png を選択
  • (2) バナーの編集作業を継続して行う場合、一時保存としての拡張子は kb2 を選択すること。
  • (3) 拡張子 kb2 以外のファイルは、簡単バナーでのその後の編集処理はできません。


背景画像のサイズについて

バナーの背景に挿入する画像は、キャンバスに挿入される際にキャンバスの大きさに自動的に縮小されます。従って、元の画像の大きさには余り神経を使う必要はないのですが、一つだけ守って戴く必要があるのが、キャンバスの大きさの相対的な大きさ(縦横比)になっている必要があります。

具体的には、以下の表の横幅・高さの組み合わせ表を参考に画像を作成する必要があります。縦横比が合っていない画像だと挿入した画像が歪みます。

倍数横幅(px)高さ(px)
1.020080
1.5300120
2.0400160
2.5500200
3.0600240


「簡単バナー」の使用上のコツ

当ソフトは、直感的な感覚で分かり易い操作方法となっております。使ってみれば直ぐ分かりますので、詳しい説明は野暮といった感じですが、一つだけ注意をして欲しいことがあります。

アイコン「バナーのリペイント」(前記の⑤のボタン)の使い方です。設定画面内にいろいろの設定がありますが、設定結果を反映させるボタンとしてアイコン「バナーのリペイント」があります。このボタンを押し忘れると設定の最新結果が更新されません。とにかくバナーの編集をしたら、このボタンを押すことを心掛けて下さい。

それと「簡単バナー」を使ってみての筆者の感想ですが、バナー作成に特化したツールとしては確かに易しくてこれ以上のツールはないと感じています。今回、背景に画像を配置してのバナー作りでしたが、一番難しかったのがテキスト文字の配色でした。とかく背景に埋もれてしまって目立たないテキスト文字をいかに読めるような色にするかに大部分の神経を使いました。


ちなみにhaik環境では?



戻る

上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 6  
    役に立たなかった 0  


コメント記入欄