ＨＰ用のアイコンが縮小するとつぶれてしまう

質問

ＨＰを公開しているんどえすが、
メニューの横にアイコンを作成しました。

作成はＦｉｒｅｗｏｒｋｓ8で
画像サイズ２００×２００ピクセルで解像度は７２dpiです。

それをgifで保存してメニューの横に配置しまして、
幅×高さ２５ピクセルまで縮小しました。

そしてweb上に公開すると小さい文字などがつぶれてしまい困っています。
他のＨＰをみてみたのですが、
小さいアイコンでもきれいに文字がでているものもあります。

小さいアイコンをこれからも作ることが多いと思いますので、
小さいアイコンをうまく作る方法をご存知の方教えてくださいm(_ _)m

回答No.1

noname#96725 · ベストアンサー

こんにちは。
>メニューの横にアイコンを作成しました
出来合いのものに満足せずにご自分で作られるのですね。HP作りを楽しんでいらっしゃる。

>画像サイズ２００×２００ピクセルで解像度は７２dpiです。
>幅×高さ２５ピクセルまで縮小しました。
>小さい文字などがつぶれてしまい

200角を25角まで縮小しても印象が大きく変わらずOKなのは、写真画像の内でも簡単でおおまかな形でしかも直ぐに判るほどの特徴的なシェイプのものを近接撮影したような種類のものです。

例えば細目の横線・縦線などでしたら200角を180角にしただけでも完全に消えてしまうほどです。

対策；
１）細過ぎる線、微細過ぎる形を含むものをアイコンにしない。
２）64ピクセル角程度のカンバスを作って、その中で形がきちんと判別出来る程度の作画をして、それを32ピクセル程度のアイコンに縮小する。

そのあたりのコツを習得するには、小さくてもきれいに文字が出ているアイコンをプリントスクリーンボタンで画像ソフトに取り込み、そのアイコンを切り抜いて逆に200ピクセル角にまで拡大してみて下さい。それでどのような原画を作れば良いかが判ります。

原画とアイコンの関係が想像出来るサイト；
http://b3a4s4s.web.fc2.com/09rest/download.htm

回答No.3

taikon3

＞これはなぜなのでしょうか？
縮小のアルゴリズムの限界を超えちゃってるから。
バイクキュービック法とかニアレスト法とかありますが、どれも限界がありますので。

そーいうもんだ、ということであきらめてね

ボケたらシャープ掛けるとかコントラスト上げるとかしてお茶を濁すしかありません。

お礼

ご回答ありがとうございます。

では小さいアイコンというのはみなさんどういう風に作られているのでしょうか？

よろしければ教えてください。

回答No.2

taikon3

最初から２５ｘ２５ピクセルで作ってください

htmlで縮小表示したら潰れるのは当たり前です。

Photoshop上で作製して、画像解像度で縮小して小さいデータにしてください

html（ＨＰ上ではタグで縮小表示の指定をしない）これ、基本です。

キレイに表示されてるＨＰがありましたら、それのソースを開いて画像はどのように表示されてるか、画像を保存してどのサイズで作られてるか確認してくださいな

お礼

ご回答ありがとうございます。

最初から25×25ピクセルの72dpiでつくろうとしたのですが、
そうすると線を引くだけでもぼやぼやの線になってしまいつくることが不可能でした。

ですので仕方なく大きめのサイズでつくって縮小する方法しかありませんでした。ソフトはFireworksでやっております。

また大きいサイズで作った後、小さくしようとそのままFireworks上で縮小してもぼやぼやになってしまいこれも使用不可能の状態でした。

これはなぜなのでしょうか？