Highlighted

Major pixel disparity between Dreamweaver and Photoshop, WHAT GIVES??

New Here ,
Oct 03, 2017

Copy link to clipboard

Copied

I've been wrestling with this for one year (ever since I had a work-commissioned machine). The pixel size of my Dreamweaver (and all browser stuff) is different from the pixel size of my Photoshop AND Illustrator?!?! So a 500x200px web graphic (png, jpg or gif) made in Photoshop or Illustrator is teeny and then looks stretched and blurry in Dreamweaver and all browsers.

I've gotten around it by exporting web images 2x the pixel size and then coding the dimensions smaller in the html. But this of course doesn't work for backgrounds.

See, look at 700px in photoshop (screenshot below, image bottom) versus 700px in dreamweaver (screenshot below, image top) -- you can see how that image background is blurry but the text on top is clear:

And here's how the dreamweaver html with background looks in browser (super crisp html text, terrible blurry background image):

It's the same for both Photoshop and Illustrator. They both have "Smaller pixels" i.e. are a different resolution than Dreamweaver.

Views

242

Likes

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

Major pixel disparity between Dreamweaver and Photoshop, WHAT GIVES??

New Here ,
Oct 03, 2017

Copy link to clipboard

Copied

I've been wrestling with this for one year (ever since I had a work-commissioned machine). The pixel size of my Dreamweaver (and all browser stuff) is different from the pixel size of my Photoshop AND Illustrator?!?! So a 500x200px web graphic (png, jpg or gif) made in Photoshop or Illustrator is teeny and then looks stretched and blurry in Dreamweaver and all browsers.

I've gotten around it by exporting web images 2x the pixel size and then coding the dimensions smaller in the html. But this of course doesn't work for backgrounds.

See, look at 700px in photoshop (screenshot below, image bottom) versus 700px in dreamweaver (screenshot below, image top) -- you can see how that image background is blurry but the text on top is clear:

And here's how the dreamweaver html with background looks in browser (super crisp html text, terrible blurry background image):

It's the same for both Photoshop and Illustrator. They both have "Smaller pixels" i.e. are a different resolution than Dreamweaver.

Views

243

Likes

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
Oct 03, 2017 0
LEGEND ,
Oct 03, 2017

Copy link to clipboard

Copied

Unfortunatly your images are not showing, but from reading your question it sounds like you are -

a: using a hi-dpi display, and/or your system or program settings are different for Ps, ill  than they are for Dw.

or

b: you are inserting background images then stretching them to fit, (Dw is not hi-dpi aware).

Could you tell us your system settings for the monitor, and visit the forum to post images of the problem.

Likes

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
Reply
Loading...
Oct 03, 2017 1
Adobe Community Professional ,
Oct 03, 2017

Copy link to clipboard

Copied

Please save us all from asking 20 questions.  What's the URL to your website where images are "blurry?"

We can discern fairly quickly what's actually going on from your online code and images.

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 03, 2017 0
Adobe Community Professional ,
Oct 03, 2017

Copy link to clipboard

Copied

Photoshop is a raster image app not to be confused with Illustrator which is a vector graphics app. 

I suggest you adjust the UI settings in Photoshop Preferences to make it easier for you to see your work.  After adjusting the UI scale, restart Photoshop.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Oct 03, 2017 1