• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Re: pixel disparity between DW and PS [Branched from 4 yr old topic]

New Here ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

Having the same issue. My display is making things in photoshop look super small because of the hi resolution display. Ok, no problem, but shouldnt it still look the same in DW as well? 

TOPICS
How to

Views

158

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 01, 2021 Jun 01, 2021

Copy link to clipboard

Copied

You resurrected a very old discussion so I branched this to a new one for you.

 

It's all relative.  Hi resolution displays with 226 PPI are like an Olympic sized swimming pool compared to average displays with 96 PPI which are more like an inflatable kiddie's pool.   A 500 x 500 px image looks like a postage stamp in an Olympic pool but normal in a kiddie's pool.  So what can you do?  Increase magnification settings Ctrl +++.  Revert to normal magnification with Ctrl + 0 (zero).

 

Alternatively, use Illustrator to create vector graphics which are not resolution dependant.  Scalable Vector Graphics are math-based, not pixel-based.  So they can be rescaled to whatever size is required without any loss in quality.  SVG is ideal for icons, text, charts, drawings, comics, cartoon puppets, infographics and other flat colored images. 

Source: https://en.wikipedia.org/wiki/Scalable_Vector_GraphicsSource: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 02, 2021 Jun 02, 2021

Copy link to clipboard

Copied

LATEST

Not sure what you mean in Photoshop.

You can always zoom in and out on that.

If you are working on a file size of 50pixels by 50 pixels then its going to be small - Zoom in a bit to work on that.


In terms of making images for the web...

If you want to consider retina based displays in your images:

 

Photos:

Photos will obvisly be as is and you do want to optimise for web in photos but there are a few things you can do.

As a basic method if you just have the IMG element you can just look to have a double size of the image you want and then CSS or width height parameters on the image and it will scale down half - this will look sharper.

For true responsive images you take it a step further with use of the <picture> element and have images of different sizes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
With a CMS like Umbraco you can do these automated from one image and get a great output and content management experience.

In terms of graphics:

You would look to do the double image size and CSS in terms of a jpg or png but as Nancy has pointed out you would be looking to make SVG's for scalable graphics and in terms of Icons I even go further and make font icon sets for websites these days.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines