Skip to main content
Inspiring
July 9, 2020
質問

デザインデータを書き出したら文字がにじんでみえます

  • July 9, 2020
  • 返信数 1.
  • 6658 ビュー

ウェブデザインで、Adobe Photoshop CC(2018)を使用しています。

作成したデザインをJPEG画像として書き出したのですが、高DPIのパソコン(Surface)でブラウザー上にドラッグして確認すると、画像がぼやけてみえます(特に文字がにじんでみえます)。

こちらはパソコンの設定が悪いのか、Photoshopで高DPIスケーリングに対応するための設定が必要でしょうか?

 

・作成したデザイン(ウェブ用で、1400px x 5000px など。72dpiでドキュメント設定)

 →ドキュメントを高めの350dpiで設定しても変わらず

 

・書き出しは最高画質にしています

 →3種類の書き出し方法を試したのですが駄目でした(クイック書き出し/JPG指定して書き出し/従来のウェブ用保存書き出し)

 

画像があまり鮮明に見えないのでデザインが劣化して見えます。

どうにか解決する方法はありませんでしょうか。

 

よろしくお願いします。

 

 

 

このトピックへの返信は締め切られました。

返信数 1

Yamonov
Legend
July 9, 2020

HiDPIではないモニタで見たときにはぼやけていないのでしょうか。

通常、RetinaやHiDPI機に対応する場合はピクセル数を縦横2倍にして対応するかと思います(解像度は無関係です)。

大きく作るのは作成時からです。後からPhotoshopで変えてもボケます。文字レイヤーが残っていれば文字はボケませんが。

あとはCSS等使って使用モニタを判定し大きいものを表示させたり、画像表示サイズを固定して表示させるだけです。「HiDPI WEB」「Retina WEB」等で検索すると出てきます。

--Yamonov
fannrei作成者
Inspiring
July 11, 2020

お返事ありがとうございます。

 

HiDPIではないモニタで見たときにはぼやけていないのでしょうか。

はい、この場合ぼやけていません。

 

Photoshop内は当然ぼやけていないですが、作成したJPGをブラウザで確認した時の話です。

また周りに確認しても、高DPIで作成したものはぼやけているらしいです。

こんなものだとみんな思っているそうですが...どうにか少しでも綺麗に見えるほうほうがないかと思いました。。

 

fannrei作成者
Inspiring
July 11, 2020

ぼやけている問題>

 

高DPI向けにはメディアクエリなどの機能で画面解像度に適した出し分けをすることが多いので、最近のCMSでは解像度がデカい画像を入れておいて、あとはCMSにお任せするパターンも増えてきたと思います。

 

なお、自分でHTMLを書く場合は以下のページが参考になります。

 

  • HTML 5.1のsrcset・sizes属性とpicture要素の使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA
    https://ics.media/entry/13324/

 


ありがとうございます。

説明が下手で大変恐れ入ります。

 

書き出した画像がぼやけてるのではなく、

キャンバスで、1280px x 5000 でウェブサイトのデザインをしていて、

ウェブサイト全体を1枚のJPGに書き出し、お客様確認にデザインチェックを出したときに、

お客様がJPG画像を高DPIのパソコンのブラウザでみたときに文字が滲んでみえるという状況です。

 

もちろんコーディング際はRetina対応していますので問題ないです。

文字も文字としてコーディングしているし問題ないです。

デザイン確認の際の話です。