（以前書いたこの記事の内容に不満があったため全面的に書き直しました。写真に文字入れする場合にも役立つ情報だと思います。 2015/03/01）
webサイトで、小さなバナーなのに文字がしっかり読めるものがあります。小さなバナーに多くの文字が入っているのに、なぜ読めるんだろう。自分で作るとぼやけてしまい、文字がクッキリと見えない。そんな不満を抱えていませんか？
今日は、小さなバナーなのに文字がクッキリ見えるようにする方法を紹介します。
先ずは、下の三つのバナーをご覧下さい。サンプルは本館のタイトル「ネコ肉球４個分の幸せ」です。10文字と長いタイトルなので、文字がクッキリ見えるかどうかのサンプルとして適していると思います。
いかがでしょうか。小さな文字もクッキリ見えると思います。マウスのジョクダイヤルを回して拡大表示してみて下さい。「バナー3」も驚くほどクッキリと表示されているはずです。
実は、上の三つのバナーはまったく同じものです。表示の仕方を変えているだけです。
ただし、表示方法を変えただけではこのようにクッキリしたバナーを作れるわけではありません。
このようにきれいなバナーを作り、表示する方法を以下で具体的に説明します。
小さなバナーの文字をクッキリ表示する方法
１．バナーをきれいに作る方法
バナーは、背景と文字で構成されます。背景は単色の場合もあれば、写真が使われることもあります。このバナーにクッキリした文字を入れるには、以下の方法を採ります。
(1) officeで文字入れする
上のサンプルバナーはWordの「ワードアート」を使って文字を書き、それをPowerPointのスライドにコピーし、png型式で保存しました。わざわざPowerPointを使っている理由は、png型式で保存が簡単にできるからです。好みの問題でしょうが、管理人はいつもこの流れでやっています。
Wordの「ワードアート」を使って文字入れすると、さまざまな効果を加えることができます。
(2) 文字入れしたバナーはpng型式で保存する
JPG型式の写真の上に文字を挿入し保存するとき、そのままJPGで保存すると文字がボケてしまいます。文字入れした場合はPNG型式で保存します。
(3) 文字入れ後は縮小しない
画像に文字を入れをしてpng型式で保存し、後で画像のサイズを縮小しようとすると文字がボケます。あまり小さく作るとやはりボケてしまいます。これを避けるため、最初からある程度の大きさで作ります。
たとえば、上のバーナーのサイズは、「590px x 99px」です。どのくらいの大きさが良いかはいろいろな条件に影響されるので一概には言えません。幅500pxくらいで作っておけば無難でしょう。仕上がりのファイルサイズが50kb程度なら良いのではないでしょうか。本当は、20kb以下を目指したいところです。
２．バナーをきれいに表示する
上の方法で作ったバナーを表示してみると文字がクッキリ見えていると思います。
これは、web上で小さく表示しているからです。
このサイトの記事欄では、基本的に幅570pxの画像を使っています。上のバナーのサイズは「590px x 99px」なので、そのまま表示すると枠からはみ出てしまうくらいの大きさになっています。そこで、小さく表示されるように設定します。アスペクト比に従い、縮小表示します。管理人は、以前は比例計算していましたが、最近はIrfanViewの「リサイズ/サンプリング」で縦横のサイズを調べています。
横幅を指定すると高さが表示されるので、その値をタグに書き込みます。例えば、幅60pxでは高さが10pxになります。画像の貼り付けタグは以下のようにします。
以上です。
以下は以前の記事です。参考程度にご覧下さい。あくまでもjpgにこだわるのであれば有効な方法かも。
以下は一般的なバナーサイズとして、幅120pxで作ったものです。ソフトは「彩彩畑」を使っています。
下は、幅80pxにしたものです。
バナーいっぱいに文字が書かれていて、何とか読めますが、拡大してみると、文字が汚い印象を受けます。
次に、下のバナーをご覧ください。
やはり、幅120pxのものと80pxの二種類です。
違いが分かりますか。下のバナーは、文字がずっと小さいのに鮮明に見えます。文字の背景もきれいです。
これは、画像縮小ソフトの問題ではなく、そもそもの作り方が違います。
余分な部分を切り取り、幅60pxで作ったミニバナーが、下のバナーです。小さなバナーの中に「ネコ肉球４個分の幸せ」の10文字をしっかり読むことができます。
作り方
さて、作り方です。
Photoshopのロゴの作り方のチュートリアルを見ていて気づいたのですが、綺麗なロゴを作るには、最初にキャンパスサイズを4000px× 3000pxなどの巨大なサイズに設定しているということです。
この設定で作っていき、保存。あとで好きなサイズに小さくします。
縮小ソフトをいろいろ試したのですが、Irfanで縮小したものと大きな差を見つけることはできませんでした。
JTrim、PictBearの高品位縮小プラグイン、このブログでもご紹介した「縮小専用。」など、高品質で縮小できると言われていますが、Irfanによる縮小も同様に高品質でした。
上のバナーは幅3000pxのキャンパスで作っています。
