バナーを美しく作成するには？

匿名希望 1998/02/23(月) 00:11:50
バナーを簡単に美しく作成するには、どのようなソフトでどういう
手順で作成すればいいでしょうか。また、ファイル形式は何がベスト
でしょうか。

ALM [E-Mail] [HomePage] 1998/02/23(月) 00:53:23
　まずは大きなサイズで作成し、それを縮小する、というのがメジャーな方法では。

　ファイル形式は、画像の内容 (イラスト的/写実的) や、大きさ次第でしょうか。

　国内でメジャーなサイズ (200 * 40) 程度なら GIF をお勧めします。
　小さい画像では、JPEG より GIF の方がファイルサイズも小さくなることもありますし、JPEG 特有の「にじみ」もコントロールできます。
　要は、ケースバイケースです。

　と、言うことは、この手段を使う場合は、上述の機能を持ったグラフィックソフトが必要になります。

　「美しく」というのは……ソフトの問題ではなく、感性の問題ですから……私には何とも言えません。

とほほ 1998/02/23(月) 01:32:16
バナーはフォントの選択が難しいですね。私はPC98にバンドルされてい
た「ＦＡぽぽる」というものを利用しました。ソフト屋に行くと、いろ
いろなフォントが数千円程度で売られているようです。

あとは、ALMさんのおっしゃる通り、大きめに作成して縮小ですね。
縮小することにより、フォントの縁のギザギザを目立たなくします。
「アンチエイリアシング」という処理でしたっけ。私は、縮小に
Bidenというフリーソフトを使用しました。

あとは・・・・・個人のセンスでしょうね。自分が気に入ったバナー
を拡大してよく見てみて、センスを盗むというのもよいかも。

takagi7 [E-Mail] [HomePage] 1998/02/23(月) 11:48:00
>バナーを簡単に美しく作成するには、どのようなソフトで
どのレベルを美しくと判断すればよいのかわかりませんが、
小生は、PaintShop Pro 4.2Jを通常、利用しています。込み入った画
像処理をする場合は、PhotoShop 4.0Jを使用しています。

>どういう手順で作成すれば
PaintShop Pro 4.2Jについては、オンラインヘルプをみればすぐにで
きます。PhotoShop 4.0Jについては参考書（小生のＨＰの『ホーム
ページ制作』の書籍リストを見てください。）が必要です。

匿名希望 1998/02/23(月) 23:37:08
ＡＬＭさん、とほほさん、takagi7さんありがとうございました。
例えば400×160くらい（もっと大きいほうがいいのでしょうか）
でビットマップで作成し、Bidenとかで縮小し、それをJPEGかGIF
へ変換する、ということでよろしいのでしょうか。
また、ＡＬＭさんの言われているJPEGのにじみとは何でしょうか。
どのようなときに発生するのでしょうか。
重ね重ね申し訳ありませんが教えてください。
よろしくお願いします。

HIROPON [E-Mail] [HomePage] 1998/03/05(木) 02:19:56
　JPEG形式は通常、フルカラーの画像情報を「DCT方式」という方法で圧縮して保存します。この方法は簡単に言えば、人間の目に分からないように色の間引きを行ってデータを圧縮する方法です。そのため、自然画や写真のように色やコントラストの変化が穏やかな画像ではきれいに圧縮でき、また再現性が高いのですが、色の変化の激しい画像では圧縮率が落ちるだけでなく、無理な色の間引きによって汚い桝目上のムラが発生したり、細かい図形がつぶれてしまいやすいのです。これがＡＬＭさんの言われている「JPEGのにじみ」だと思います。

　バナーの場合、ロゴなんかはバックに埋もれないようにコントラストをつけますよね？こうした画像はまさに上の条件にぴったり当てはまってしまいますので、気を付けなくてはいけないわけです。

　GIF形式の場合は使われた色の情報をそのまま保持しているのでこうした問題は発生しません。それにアルゴリズム的に、JPEGに比べて展開も速いですし。

　あと、画像を縮小する時はドットを間引く普通の「縮小」ではなく「補間縮小」（もしくはそれに相当する機能）で縮小するようにして下さい。これは縮小したことによって重なり合ったドットの中間色を割り出し、その色に置換して縮小する機能のことです。フォトレタッチソフトの類なら普通に持っている機能だと思うので、問題ないとは思いますが。

　ちなみに私は800×160で作成した画像をDibas32を使って補間縮小、のち256色に減色して使っています。ただ、こうした手順を踏む場合、やはりどうしても細かい描き込みはつぶれてしまいますので、作成途中で時々縮小してみてどの程度のものまで再現できるのか確認しながら作業するとよいと思います。

ALM [E-Mail] [HomePage] 1998/03/06(金) 01:11:13
　どうも分かりにくい表現を使ってしまって申し訳ありません。
　「JPEG のにじみ」が意図するところは、HIROPON さんのおっしゃる通りです。と言うか、私ではここまで詳しく解説できません。

　試しに、例えば、「日の丸」のような境界のはっきりした画像を JPEG、GIF 両方の形式にしてみると、お分かり頂けると思います。
　JPEG では、境界線の周りに、受信の悪いテレビのゴーストのような物が生じてしまいます。
　それを消そうと画質を上げると、ファイルサイズが極端に増えてしまいます。
　このような画像では、圧倒的に GIF が適しています。

　反面、グラデーションでは JPEG が有利です。
　GIF の、「誤差拡散法」では、複数の色を市松模様のように配置し、中間色を表現しますし、「ディザなし」では色の境目がくっきり残ってしまいます。(Adobe Photoshop の話)
　当然、「誤差拡散法」の方が綺麗なのですが、複雑さが増せば増すほどファイルサイズも増加してしまいます。
　GIF は「ベッタリ単色」の時、最大の圧縮効果を発揮します。

　GIF の減色ですが、256色で終わりにせず、更に減色できるか試してみると、意外と少ない色数まで落とせることもあります。
※「落とせる」→「見た目がそれほど変わらない」
　市川ソフトラボラトリー DaisyArt 97 は 256色のみのサポートですが、Fractal Design Painter や Adobe Photoshop などはもっと少ない色数をサポートしています。
　特に、Adobe Photoshop ではパレットをカスタマイズできます。
　Photoshop に減色させてもいいのですが、人の目でパレットの似た色を統一していくと、より少ない色に減色できます。
　実際、「黒にしか見えないような色」が何色もあったりします。
　もちろん表示は、各モニターのガンマ値などにも左右されるでしょうが、そこまでフォローしようとは思いません。
　自分のモニターで綺麗に見えればＯＫ！……かな？
　パレットを操作できないソフトでも、マスクなどを利用すれば、同様の操作が不可能ではないでしょうが、余りに面倒なので、実際的にはムリでしょう。……バナーぐらいならやろうと思えばできるかな？
※ バナーではないが、「149色」に減色した例 ( 60 KB )
http://members.xoom.com/TN/goods/book01.gif

　大きい画像を小さく縮小する場合、できるだけ簡単な整数比で縮小した方が綺麗です。
　特に斜めの線などに差が出ます。
　どのくらい大きい画像から縮小するかは、ご使用のマシンのメモリーやモニターのサイズに照らし、作業しやすいぐらいが良いのでは。
　単純に考えれば、大きいほど情報量も多いのですから、仕上がりも綺麗なのでしょうが、縮小してしまえば、それほど変わりなかったりします。その後 GIF か JPEG になることを考えればなお。

　最後に一言。「どうせオリジナルの画質は誰も知らない」

モーグリ 1998/03/08(日) 09:51:56
バナーって、リンク用のバナーですよね。

いろんなページを回っていると、ほとんどのバナーが
縦31ピクセル、横88ピクセルになっているので、
その5倍の「縦155,横400」で作って5分の1に縮小してみては
いかがでしょう。

また、バナーはあまり色数を使わないことが多いので、
自由に減色ができるGIF形式の方が
（個人的には）いいと思います。

HIROPON [E-Mail] [HomePage] 1998/03/08(日) 16:45:39
　本題からはちょっとそれますが補足（蛇足？）をば。

　バナーの大きさはサイトのジャンル次第ってところがあります。モーグリさんの言われるように88×31のバナーは確かに多いですが、例えば私のところのようなＣＧメインのサイトでは、その人がどんな絵を描くのかを知らせる意味で、200×40の大きさのものが多いです。さらに巨大なのも見たことがありますが、さすがにこれはあまり使ってもらえないようです（そりゃ、そうだ( ^^ ;）。

　要はバナーを見た人に「このサイトを見てみようかな」という気にさせるのがバナーの１つの重要な役割ですから、そこそこ目立たなければなりません。88×31のバナーは、誰かのサイトのトップページに貼ってもらうような使われ方をするのなら最適ですが、逆にバナーリンク集に登録する場合などは見劣りしてしまいます。ホントは大・中・小と作っておけばいいんでしょうが・・・結構大変ですよね、これ( ^^ ; ; ; 。

匿名希望 1998/03/09(月) 18:45:53
[[解決]]
皆さん、初心者にもよく分かるご回答をたくさんいただき感謝しています。
バナーのみならず、画像の種類による特徴や、特にＪＰＥＧのにじみについて
よくわかりました。本当にありがとうございました。

[上に] [前に] [次に]