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

エクスプローラー ,
Jul 08, 2020 Jul 08, 2020

リンクをクリップボードにコピー

コピー完了

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

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

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

 

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

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

 

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

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

 

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

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

 

よろしくお願いします。

 

 

 

キーワード
Windows, 問題またはエラー, 読み込みと書き出し

表示

1.5K

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
replies 10 件の返信 10
勇敢なヒーロー ,
Jul 09, 2020 Jul 09, 2020

リンクをクリップボードにコピー

コピー完了

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

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

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

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

Yamonov

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
エクスプローラー ,
Jul 11, 2020 Jul 11, 2020

リンクをクリップボードにコピー

コピー完了

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

 

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

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

 

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

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

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

 

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Adobe Most Valuable Participants ,
Jul 11, 2020 Jul 11, 2020

リンクをクリップボードにコピー

コピー完了

ぼやけている問題>

 

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

 

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

 

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

 

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
エクスプローラー ,
Jul 11, 2020 Jul 11, 2020

リンクをクリップボードにコピー

コピー完了

ありがとうございます。

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

 

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

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

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

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

 

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

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

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

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Adobe Most Valuable Participants ,
Jul 11, 2020 Jul 11, 2020

リンクをクリップボードにコピー

コピー完了

なるほど。

そうであれば、クライアントの確認ファイルは、PDF(Photoshop PDF)でお渡しした方が良いかなと。

 

PDFで文字はPhotoshopで入力していればラスタライズされませんので、にじんで見えることはないと思います。

 

ちょっと意図が違いますかね?

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
エクスプローラー ,
Jul 13, 2020 Jul 13, 2020

リンクをクリップボードにコピー

コピー完了

そうですね。

ちょっと意図が違います。

画面でどう映るか(幅など、ファーストビューなど)の確認のためでも、JPGで確認が必須になります。

通常は問題ないですが、高DPIのパソコンの場合はきれいに見れないのが悩みでした。

色々ご提案ありがとうございます m(__)m

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
勇敢なヒーロー ,
Jul 13, 2020 Jul 13, 2020

リンクをクリップボードにコピー

コピー完了

>作成したJPGをブラウザで確認した時

 

HiDPI対応にはPhotoshopでピクセル数を2倍程度に拡大して書き出す必要があります。

HiDPI/Retinaでは、数ピクセルのまとまりを1px扱いの大きさとして表示するからです。

 

Photoshopで、テキストレイヤーが全て残っている前提でしたら

ファイル>書き出し>書き出し形式で左上の「サイズ」でx2を選択して書き出す

と、テキストレイヤーが残っていれば文字部分は二倍の解像度で書き出されます。前述した通りです。

 

で、書き出される画像サイズは、元が1280pxなら2560pxのサイズになります。

 

これ、WEBブラウザに画像を直にドラッグ&ドロップではHiDPIの確認はできません。HTMLとセットで、imgタグでwidthを1280として表示させなければ、実際のサイズの確認はWEBブラウザではできません。ブラウザでウインドウサイズにリサンプルされてボケますし、クリックして実寸表示させると今度は2560px幅で、つまりボケた状態で100%表示されるためです。

 

ですので、画像のみでHiDPIの確認は不可能です。HTML等とセットにしてクライアントに渡してください。

 

 

Yamonov

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
勇敢なヒーロー ,
Jul 13, 2020 Jul 13, 2020

リンクをクリップボードにコピー

コピー完了

あるいは、Adobeの用意している共有機能+Xdを使ってリンクを送る方法もありますね。

https://helpx.adobe.com/jp/xd/help/share-designs-prototypes.html

Xdに1280pxサイズ横幅固定で貼り付け、共有タブで共有リンクを生成し、先方にURLを送れば、HiDPI&通常DPI環境への対応が一度でできます。

Yamonov

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
エクスプローラー ,
Jul 13, 2020 Jul 13, 2020

リンクをクリップボードにコピー

コピー完了

一番最初のご提案は考えたことがありますが、2560pxだとブラウザからはみ出るし、実際の見た目を確認するのが難しいです。コーディング後は確認しますが、基本的にデザインOK後にコーディングに回しますので..

 

2つ目のご提案は使ったことがないので、試してみますね!!

ありがとうございます!

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
勇敢なヒーロー ,
Jul 14, 2020 Jul 14, 2020

リンクをクリップボードにコピー

コピー完了

最新

>2560pxだとブラウザからはみ出るし

そうです。そのためにHTMLとセットにして、imgタグで幅を元のサイズ1280pxで指定してやります。HiDPI環境で画像のみをブラウザにドラッグしても、ブラウザ側で画像サイズを適当に変えられてしまうため正しい確認はできません。

 

で、後の方の提案は上記をAdobe Xdに貼り付けることで自動でコードを書かせて、ブラウザ上できちんと確認する方法の一つとして提案したものです。

 

どちらにしてもHiDPIでボケないものを作るには2倍での書き出しは必須ですよ。

Yamonov

いいね

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines