極意（13）オリジナルのバナーを極める
2014年のことですが、あるお客さまとの商談の中で、サイドメニューに貼るリンクバナーを作成してくれないかとの依頼がありました。筆者はWebデザイナーではないので、一旦は、その依頼をお断りしましたが、バナーぐらいは作成できなとWebクリエイターとは言えないのではないかと反省して、何とか作成する手段はないものかとネット検索した結果、その要求に応えられる素晴らしいツールを見つけました。
そのツールが「簡単バナー」と言うツールです。そのツールを使って現在までの間で作成したバナーの数々を、言わば筆者のバナー作成の始末記みたいなレポートに仕上がっています。
例によって、下記のバナーの全てにはリンクが張られています。クリックして実際のページがご覧戴けます。
初めて作成したバナー
![[check]](image/face/check.png)
使用ツール
「簡単バナー」
特徴
バナーの背景に画像を使用しています。
デメリット
複雑な画像だとテキスト文字が目立たず見難いことになる。
背景に画像を使用しないバナー
使用ツール
「簡単バナー」
特徴
前記の欠点を補う意味で画像使用を止めて、単色でグラデーションをつけた背景色にしてみました。
デメリット
リンクバナーとしてはオンマウス化していないとイマイチ？
オンマウス化で完璧なバナー
使用ツール
「簡単バナー」
「JTrim」:オンマウス画像の裏画像作成用に使用
特徴
オンマウスの表画像の他に、「JTrim」のカラー補正機能で薄くした画像を２枚目の裏画像として設定しました。また、左記のように「簡単バナー」の機能で背景色のみを別の色を設定したり等々オンマウスに特化した画像作成です。
基本２色のシンプルなバナー
使用ツール
「簡単バナー」
特徴
シンプルに白抜き文字の単色で表画像を作成し、裏画像として色を逆転した２枚目の画像のセットでオンマウス画像を作成しています。
アニメーション化したバナー
使用ツール
「簡単バナー」
「PhotoScape」：GIFアニメーション作成用に使用
特徴
前記のオンマウス画像２枚でGIFアニメーションを作成しています。
デメリット
常にアニメーションしているので煩い感じは否めない。
オンマウスした時のみアニメーションするバナー
使用ツール
「簡単バナー」
「PhotoScape」：GIFアニメーション作成用に使用
特徴
前記の欠点を補正すべく、オンマウスした時にアニメーションが動くように、表画像は静止画、裏画像にGIFアニメの２枚のオンマウス画像を設定しています。
上記の関連記事はお役に立ちましたか？
- 下記に投票して戴けると嬉しく思います。