HPを公開しているんどえすが、
メニューの横にアイコンを作成しました。
作成はFireworks8で
画像サイズ200×200ピクセルで解像度は72dpiです。
それをgifで保存してメニューの横に配置しまして、
幅×高さ25ピクセルまで縮小しました。
そしてweb上に公開すると小さい文字などがつぶれてしまい困っています。
他のHPをみてみたのですが、
小さいアイコンでもきれいに文字がでているものもあります。
小さいアイコンをこれからも作ることが多いと思いますので、
小さいアイコンをうまく作る方法をご存知の方教えてくださいm(_ _)m
No.1ベストアンサー
- 回答日時:
こんにちは。
>メニューの横にアイコンを作成しました
出来合いのものに満足せずにご自分で作られるのですね。HP作りを楽しんでいらっしゃる。
>画像サイズ200×200ピクセルで解像度は72dpiです。
>幅×高さ25ピクセルまで縮小しました。
>小さい文字などがつぶれてしまい
200角を25角まで縮小しても印象が大きく変わらずOKなのは、写真画像の内でも簡単でおおまかな形でしかも直ぐに判るほどの特徴的なシェイプのものを近接撮影したような種類のものです。
例えば細目の横線・縦線などでしたら200角を180角にしただけでも完全に消えてしまうほどです。
対策;
1)細過ぎる線、微細過ぎる形を含むものをアイコンにしない。
2)64ピクセル角程度のカンバスを作って、その中で形がきちんと判別出来る程度の作画をして、それを32ピクセル程度のアイコンに縮小する。
そのあたりのコツを習得するには、小さくてもきれいに文字が出ているアイコンをプリントスクリーンボタンで画像ソフトに取り込み、そのアイコンを切り抜いて逆に200ピクセル角にまで拡大してみて下さい。それでどのような原画を作れば良いかが判ります。
原画とアイコンの関係が想像出来るサイト;
http://b3a4s4s.web.fc2.com/09rest/download.htm
No.3
- 回答日時:
>これはなぜなのでしょうか?
縮小のアルゴリズムの限界を超えちゃってるから。
バイクキュービック法とかニアレスト法とかありますが、どれも限界がありますので。
そーいうもんだ、ということであきらめてね
ボケたらシャープ掛けるとかコントラスト上げるとかしてお茶を濁すしかありません。
ご回答ありがとうございます。
では小さいアイコンというのはみなさんどういう風に作られているのでしょうか?
よろしければ教えてください。
No.2
- 回答日時:
最初から25x25ピクセルで作ってください
htmlで縮小表示したら潰れるのは当たり前です。
Photoshop上で作製して、画像解像度で縮小して小さいデータにしてください
html(HP上ではタグで縮小表示の指定をしない)これ、基本です。
キレイに表示されてるHPがありましたら、それのソースを開いて画像はどのように表示されてるか、画像を保存してどのサイズで作られてるか確認してくださいな
ご回答ありがとうございます。
最初から25×25ピクセルの72dpiでつくろうとしたのですが、
そうすると線を引くだけでもぼやぼやの線になってしまいつくることが不可能でした。
ですので仕方なく大きめのサイズでつくって縮小する方法しかありませんでした。ソフトはFireworksでやっております。
また大きいサイズで作った後、小さくしようとそのままFireworks上で縮小してもぼやぼやになってしまいこれも使用不可能の状態でした。
これはなぜなのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 Windowsのアイコンの整列が変になりました 2 2022/06/24 00:02
- フリーソフト アイコンとして保存アプリが不調 2 2022/04/16 06:39
- Chrome(クローム) googleアカウントのアイコンをローマ字または漢字で表示させたい 2 2023/05/06 22:25
- その他(IT・Webサービス) Yahooの地図の文字サイズ、googleの地図の画面分割 1 2022/05/21 12:31
- Chrome(クローム) パソコンのブラウザについて 2 2023/08/08 23:59
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- Excel(エクセル) Excelでこういうカードの作り方 枠線の引き方や、挿入画像の拡大縮小など わかる方教えてください、 2 2022/05/03 21:22
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- ホームページ作成・プログラミング 保存したホームページのファイルは何をしている推測できますでしょうか。 1 2023/08/18 15:50
- その他(パソコン・スマホ・電化製品) 圧縮ファイル解像について 7 2023/07/31 08:42
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のピクセル、KB、データ量...
-
10cmって何ピクセルですか?
-
VBの画面サイズについて
-
500ピクセルって何ミリ?
-
ビットとピクセルの違い
-
フォトショップ画像の縦横比率...
-
エクセルで拡大縮小せずA4め...
-
フォトショップ 指定したサイ...
-
相互リンク用のバナーサイズ
-
エクセルからペイントにコピペ...
-
1ピクセルって何センチ?
-
EPSやPSD画像を一括でリサイズ
-
ピクセルは同じなのにdpiが違う...
-
3m角の印刷に必要な画像サイズ
-
写真の画像のピクセルを大きく...
-
画像のpx値(X座標、Y座標)を知...
-
ピクセルやドット等の単位の大...
-
DVDに書出し時被写体のエッジが...
-
画像を劣化させないでリサイズ...
-
エクセルのピクセルは何センチ?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
10cmって何ピクセルですか?
-
500ピクセルって何ミリ?
-
画像のピクセル、KB、データ量...
-
エクセルのピクセルは何センチ?
-
VBの画面サイズについて
-
フォトショップの画像で、縦横...
-
1ピクセルって何センチ?
-
エクセルで拡大縮小せずA4め...
-
1cmは何ピクセルか
-
フォトショップ画像の縦横比率...
-
JPEGの容量が大きくなる原因は...
-
画像のピクセルの縮小による解...
-
4cmの画像をパソコンで作成した...
-
エクセル2003の高さ、幅の...
-
イラストレータでピクセル指定...
-
フォトショップ 指定したサイ...
-
写真について 縦4cm×横3cmって...
-
エクセルでセルの幅や高さを数...
-
ビットとピクセルの違い
-
Illustratorで書いた線が出力後...
おすすめ情報