リンクをクリップボードにコピー
コピー完了
ウェブデザインで、Adobe Photoshop CC(2018)を使用しています。
作成したデザインをJPEG画像として書き出したのですが、高DPIのパソコン(Surface)でブラウザー上にドラッグして確認すると、画像がぼやけてみえます(特に文字がにじんでみえます)。
こちらはパソコンの設定が悪いのか、Photoshopで高DPIスケーリングに対応するための設定が必要でしょうか?
・作成したデザイン(ウェブ用で、1400px x 5000px など。72dpiでドキュメント設定)
→ドキュメントを高めの350dpiで設定しても変わらず
・書き出しは最高画質にしています
→3種類の書き出し方法を試したのですが駄目でした(クイック書き出し/JPG指定して書き出し/従来のウェブ用保存書き出し)
画像があまり鮮明に見えないのでデザインが劣化して見えます。
どうにか解決する方法はありませんでしょうか。
よろしくお願いします。
リンクをクリップボードにコピー
コピー完了
HiDPIではないモニタで見たときにはぼやけていないのでしょうか。
通常、RetinaやHiDPI機に対応する場合はピクセル数を縦横2倍にして対応するかと思います(解像度は無関係です)。
大きく作るのは作成時からです。後からPhotoshopで変えてもボケます。文字レイヤーが残っていれば文字はボケませんが。
あとはCSS等使って使用モニタを判定し大きいものを表示させたり、画像表示サイズを固定して表示させるだけです。「HiDPI WEB」「Retina WEB」等で検索すると出てきます。
リンクをクリップボードにコピー
コピー完了
お返事ありがとうございます。
>HiDPIではないモニタで見たときにはぼやけていないのでしょうか。
はい、この場合ぼやけていません。
Photoshop内は当然ぼやけていないですが、作成したJPGをブラウザで確認した時の話です。
また周りに確認しても、高DPIで作成したものはぼやけているらしいです。
こんなものだとみんな思っているそうですが...どうにか少しでも綺麗に見えるほうほうがないかと思いました。。
リンクをクリップボードにコピー
コピー完了
ぼやけている問題>
高DPI向けにはメディアクエリなどの機能で画面解像度に適した出し分けをすることが多いので、最近のCMSでは解像度がデカい画像を入れておいて、あとはCMSにお任せするパターンも増えてきたと思います。
なお、自分でHTMLを書く場合は以下のページが参考になります。
リンクをクリップボードにコピー
コピー完了
ありがとうございます。
説明が下手で大変恐れ入ります。
書き出した画像がぼやけてるのではなく、
キャンバスで、1280px x 5000 でウェブサイトのデザインをしていて、
ウェブサイト全体を1枚のJPGに書き出し、お客様確認にデザインチェックを出したときに、
お客様がJPG画像を高DPIのパソコンのブラウザでみたときに文字が滲んでみえるという状況です。
もちろんコーディング際はRetina対応していますので問題ないです。
文字も文字としてコーディングしているし問題ないです。
デザイン確認の際の話です。
リンクをクリップボードにコピー
コピー完了
なるほど。
そうであれば、クライアントの確認ファイルは、PDF(Photoshop PDF)でお渡しした方が良いかなと。
PDFで文字はPhotoshopで入力していればラスタライズされませんので、にじんで見えることはないと思います。
ちょっと意図が違いますかね?
リンクをクリップボードにコピー
コピー完了
そうですね。
ちょっと意図が違います。
画面でどう映るか(幅など、ファーストビューなど)の確認のためでも、JPGで確認が必須になります。
通常は問題ないですが、高DPIのパソコンの場合はきれいに見れないのが悩みでした。
色々ご提案ありがとうございます m(__)m
リンクをクリップボードにコピー
コピー完了
>作成したJPGをブラウザで確認した時
HiDPI対応にはPhotoshopでピクセル数を2倍程度に拡大して書き出す必要があります。
HiDPI/Retinaでは、数ピクセルのまとまりを1px扱いの大きさとして表示するからです。
Photoshopで、テキストレイヤーが全て残っている前提でしたら
ファイル>書き出し>書き出し形式で左上の「サイズ」でx2を選択して書き出す
と、テキストレイヤーが残っていれば文字部分は二倍の解像度で書き出されます。前述した通りです。
で、書き出される画像サイズは、元が1280pxなら2560pxのサイズになります。
これ、WEBブラウザに画像を直にドラッグ&ドロップではHiDPIの確認はできません。HTMLとセットで、imgタグでwidthを1280として表示させなければ、実際のサイズの確認はWEBブラウザではできません。ブラウザでウインドウサイズにリサンプルされてボケますし、クリックして実寸表示させると今度は2560px幅で、つまりボケた状態で100%表示されるためです。
ですので、画像のみでHiDPIの確認は不可能です。HTML等とセットにしてクライアントに渡してください。
リンクをクリップボードにコピー
コピー完了
あるいは、Adobeの用意している共有機能+Xdを使ってリンクを送る方法もありますね。
https://helpx.adobe.com/jp/xd/help/share-designs-prototypes.html
Xdに1280pxサイズ横幅固定で貼り付け、共有タブで共有リンクを生成し、先方にURLを送れば、HiDPI&通常DPI環境への対応が一度でできます。
リンクをクリップボードにコピー
コピー完了
一番最初のご提案は考えたことがありますが、2560pxだとブラウザからはみ出るし、実際の見た目を確認するのが難しいです。コーディング後は確認しますが、基本的にデザインOK後にコーディングに回しますので..
2つ目のご提案は使ったことがないので、試してみますね!!
ありがとうございます!
リンクをクリップボードにコピー
コピー完了
>2560pxだとブラウザからはみ出るし
そうです。そのためにHTMLとセットにして、imgタグで幅を元のサイズ1280pxで指定してやります。HiDPI環境で画像のみをブラウザにドラッグしても、ブラウザ側で画像サイズを適当に変えられてしまうため正しい確認はできません。
で、後の方の提案は上記をAdobe Xdに貼り付けることで自動でコードを書かせて、ブラウザ上できちんと確認する方法の一つとして提案したものです。
どちらにしてもHiDPIでボケないものを作るには2倍での書き出しは必須ですよ。