クリックしてもらえるバナーの作り方実践編5

このエントリーをはてなブックマークに追加

バナーの作り方実践編、これがサイトです。 今日は、矢印や角丸のツールと境界線について説明します。

シェイプで矢印をつくる

クリックしてもらうコツとして、矢印を入れたり、「続きはこちら」というような言葉を入れたりすることについては以前説明しました。 サンプルのバナーも写真だけだとボタンだと分かりにくいので、矢印を入れます。 矢印や、24時間限定の背景の角が丸い白枠のような形は、フォトショップの「シェイプ」を利用するといいです。 シェイプ ツールバーの中に「シェイプ」があります。 長方形や角丸長方形、楕円などを必要に応じて使います。 矢印の場合は、「カスタムシェイプツール」を利用します。 「カスタムシェイプツール」を利用すると、フォトショップの上部に下図のように表示されます。 シェイプの横の▼を押すと、形を選択することができます。もしシェイプの種類が全部出ていない場合は、「すべて」を選択してください。 シェイプ02 シェイプの色を変更する場合は、レイヤーの中のシェイプの赤枠部分をダブルクリックすると変更することができます。 シェイプ03 枠をつけたり、グラデーションをかけたりする場合は、実践編4で説明した「効果」を使います。 さて、最後にバナーの周りに薄いグレーで枠をつけます。 (サンプルバナーは少し色が薄すぎました)

画像の周りに枠をつける

ホームページを見ていると、バナーの画像周りをグレーで囲っているものが結構多いことに気付くと思います。 グレーは色をなじませる効果があるからです。 沢山の色が並ぶ場合(カラフルなバナーを並べる必要がある通販サイトなど)で、画像が喧嘩してなんか見づらい!というときに、ためしてみてください。 枠の付け方は色々ありますが、「境界線」を使う方法をご紹介します。 まず、画像の周りを「長方形選択ツール」で選択します。 その後、「編集」→「境界線を描く」 シェイプ04 下図のようなボックスが出ますので、「幅」「カラー」「位置」を決めてから「OK」ボタン。 シェイプ05 これで画像周りに1pxの枠ができました。 あとは、jpgで保存して完成です。 お疲れさまでした~。 特にネットショップでは、バナーを作ることが多いと思います。 「バナーを作る→反応を見る→反応が悪ければバナーを改善する」の繰り返しが大事です。 バナーを自分で作ることができれば、コストカットになります。 良いバナーを作りたい、でも予算がない、という方。ショップを立ち上げたばかりの方。 努力しだいですけども、バナー作りの難易度はそんなに高くないです。 全然できなかった方でも、必要なツールの使い方とポイントを伝授して、数か月で作れるようになったこともあります。 あきらめずにがんばってください! 個人さんや中小企業さんの場合、ショップの立ち上げ時は、ある程度売り上げができるまでは自分でやってトップダウンでやるのが一番いいですよ~。長い目で見たときにね。
このエントリーをはてなブックマークに追加

コメント

コメントはまだありません。

コメントの投稿

トラックバック: http://miraiyanet.com/day/blog/2011/03/10/bnr-2/trackback/

ホームページ制作&運用講座

ページトップへ