とのさまFXのバナーができるまで(バナープラスによるバナー作成方法)

バナープラスを使って、実際にバナーを作る工程をアップしてみたいと思います。

ちなみに、このページは画像をゴリゴリ置いているので、激重だと思います。
ほんとすみません・・・。

お題は、とのさまFXのバナーです。
tonosamafx-mainbanner

このサイトのヘッダーバナーを作る時に考えたのは以下の2点です。

  • 一目で「FXサイト」であるということがわかるデザイン
  • 「とのさま」というキャラクターを前面に押し出したデザイン

要は、出オチですね。(キッパリ)

では、デザインしてみます。

キャンパス設定

キャンパス(画像サイズ、枠線等)の設定をします。

私の場合は、次の「画像設定」で画像背景を設定することが多いので、ここで設定するのは画像サイズぐらいです。

ここでは、THE WORLDや賢威(コーポレート)で使う「幅950 × 高さ200px」を設定します。

bannerplus1

画像設定

画像を設定します。

クレジットカードやFXのような金融系の素材はジャンル「ゴージャス」の中に含まれています。

まずは、背景を選びます。燃える気合の赤でいきます。

ドラッグ&ドロップで置いて、

bannerplus2

「フィット」⇒「幅」ボタンでサクッと横幅にフィットして背景が設定できました。

bannerplus3

次は、クリップアートから「いかにもFX!」というチャート素材を選んで配置します。

「こういう画像が欲しいなー」と思った時に、その素材が収録されているのもバナープラスの嬉しいところです。

bannerplus4

回転させて角度を変えたり、反転させるのも簡単です。
今回は、両サイドに配置した時のバランスを考えて、左のチャート画像を反転させてみました。

そしてメイン(?)のとのさま画像を置きます。

バナープラスでは、外部の画像ファイルを読み込みんで使うことができます。
サイト作成時に必要な商品画像や、他の画像サービスから購入した画像を使ったバナー作成も可能です。

bannerplus5

このままだと、なんか寂しい感じがする上に、イマイチとのさまが悪目立ちしているので、画像を大きくしつつ、やや透明度を上げてとのさまの存在感を薄くしてみます。

外部取り込みした画像も透明にできるので、表現の幅が広がりますね。

タイトルを入れるために、中央左側を少し空けておきます。

bannerplus6

うん、なんか天に召された人が見守ってるみたいな図になって、余計悪目立ちしてる気がするけど、気にしない。

文字を設定

 
文字設定で、タイトルとキャッチコピーを設定します。

bannerplus7

私がバナープラスで特にいいなと感じているのは、実はこのフォント装飾だったりします。

  • フォントはPC内蔵のものを読み込むため、自分で追加すれば好きなだけフォントを増やせる
  • 膨大な文字装飾のパターンから、好みのデザインを選択できる
  • 装飾後の文字詰め・文字送り(※)が可能
    ※文字詰め・文字送り:文字の間隔を詰めたり離したりすることで、文字列のグループが分かりやすくなるようにしたり、見た目のバランスを調整すること

GIMPでは、装飾するにも、どういう装飾にしたいかイメージして、その実現方法(文字を重ねたり、影レイヤーを入れたり、グラデーションを入れたり・・・)を考えて文字飾りをしなければなりませんでした。

また、文字送り(文字の間隔調整)をした後でレイヤーを組み合わせたり、装飾をしてしまうと、文字列の変更ができませんでした。

バナープラスなら、装飾を選んだ後で文字列を変更することも、文字送り・文字詰めを修正することもできます。

そんなこんなしながら、タイトルとキャッチコピーを選んで、バナーデザインの完成です。

画像を出力

あとは、画像を出力するだけです。

画像の形式(JPEG、PNG)と、JPEGの場合は画質を調節できます。

画質をちょっと落とすだけでも、画像サイズは結構変わるのでここでは初期値の「95%」のまま出力します。

というわけで、初期値でバナー生成ボタンを押すだけですね。
あとは、適当なファイル名を付けて保存すれば、バナーの出来上がりです。

bannerplus8

というわけで、とのさまFXのバナーができましたー!

tonosamafx-mainbanner

伝わるか不安なので画像付きでダラダラ書きましたが、本当に簡単ですよー。

おまけ:バナープラスと一緒に使いたい便利ツール&サイト

バナープラスはよくできたソフトですが、さらにバナー作りを便利にするためのツールやサイトいくつかご紹介します。

GIMP

バナープラスでは、そのシンプルさと引き換えに、複雑な画像処理(画像の切り抜き等)はできません。

そんな時に便利なのが、無料で使えるフォトレタッチソフト「GIMP」です。
公式サイトhttp://www.gimp.org/

フォトレタッチといえば「Photoshop」が有名ですが、クラウド利用で月額が必要だったり、買い切りでもかなり高額です。

GIMPは、無料で利用できる上に、非常に高機能です。

このソフトを使えば、突然Twitterで、

こんなコメントを見つけた時に、スッと、

こんな気の利いた返しをすることができます。

もちろん、バナープラスを使うことで、

こんな合わせ技も使えます。いやー、ほんとTwitterは楽しいですね。(違)

Google Chrome拡張「MeasureIt!」

「このサイドバーに合うバナーのサイズって何ピクセルぐらいだろう?」
そんな悩みに即答できるのが、Google Chromeの拡張「MeasureIt!」です。

Chromeウェブストア MeasureIt!

インストールしておけば、目盛りアイコンをクリックするだけで、ブラウザ上でサイズを計測できます。

measureit

カラムやサイドバーの幅はCSSから調べることもできますが、比率で設定されていたり、全体サイズから割り戻すのも面倒ですので、この拡張は非常に重宝しています。

素材サイトの皆様

バナープラスは外部の画像も読み込むことができますので、自分が気に入った画像があれば、それを読み込んで使うのもよいでしょう。

以下は、私がよく使うサイト(有料・無料問わず)です。

Illust AC イラスト・無料
いらすとや イラスト・無料
足成 写真・無料
ゆんフリー写真素材集 写真・無料
ぱくたそ 写真・無料
ペイレスイメージズ 写真/イラスト・有料
PIXTA 写真/イラスト・有料

例えば、最近興味で太陽光のサイトを作りましたが、PIXTAに良い画像があったので、それを購入してバナープラスに読み込ませて作ってみました。

test

なんとなく、良い感じじゃないですか?(THE 主観)

ベースとなる素材はバナープラスに十分そろっていますので、あとは必要最低限の画像を外から拾ってきて組み合わせることで、自分のイメージしたバナーをサクサク作ることができます。

バナープラスとともに、こういったサイトも便利に活用して、自分も愛着が湧いて、訪問者にも愛されるサイトをどんどん作っていきましょう!


バナープラス公式
 
 

コメントを残す

サブコンテンツ

このページの先頭へ