0

I created multiple layouts for a whole website with 150dpis. I sent the layout to the developer and when I got the site back it was horrible.

The fonts were very big. The images too. The sizes are 30% bigger than what I had designed.

A friend told me this was related to dpi. Now I have to redo the whole site so that the developer can redo his work.

Does anyone have a solution so I can automatically adapt the layout I created to the actual sizes?

  • Hi. Welcome to GDSE. DPI/PPI settings are ignored by web browsers. It's irrelevant. The only thing that matters is the dimensions of the image/page in pixels. My guess as to what probably went wrong is that when you designed the web page, you were not viewing or designing your site at 100%. Web browsers display raster images at the native screen resolution of the device they are being viewed on - at 100% generally, except where system zoom might be set in the computer's display settings. You really need to speak to your web developer I think, as I can only guess what the problem is. – Billy Kerr Sep 28 '18 at 13:03
  • @BillyKerr Actually if you change the image resolution in Photoshop the font size for texts will change (if the unit is pt) and it could cause some confusion if a dev uses that value as a reference. Although it should have the opposite effect - with higher DPI the font size value gets smaller. – Luciano Sep 28 '18 at 13:13
  • 1
    Yes @Luciano, that could be part of the problem, but it doesn't explain bigger images than expected. The OP needs to speak to the web developer, as we're only guessing here, I think. – Billy Kerr Sep 28 '18 at 13:15
  • Hello! Thanks for repplying so fast. I checked and as you mentioned I did make a mistake and used pt instead of pixels for the fonts. I’ll talk further with the developer and will try to find out why the images are also so big. – Mel Sep 28 '18 at 13:40
  • 2
    Might be worthwhile noting here, I gave up using Photoshop for website mockups a while ago. If you (and your developer) have a CC account, you should already have access to Adobe XD - it's pretty simple software and not too difficult to learn, or if you are on a Mac, you might consider using Sketch. – Billy Kerr Sep 28 '18 at 13:59
1

The problem is that you have no clear idea how to define stuff for web pages. You need to define all your work in pixels.

The fonts were very big. The images too. The sizes are 30% bigger than what I had designed.

Here we have one example. You wanted to use PPI from 150 to 72 which would double the size, but you say the size is 30% bigger, not 100%.

Your friend is wrong in some sense. PPI is irrelevant for screens.

On Photoshop you simply need to define your project in pixels.


Appendix:

When you export something in Illustrator the problem is Dialog Box of Doom.

enter image description here

When you prepare a document in pixels, the assets need to be exported, at the native resolution. In this case, the native resolution assigned is... 72 PPI.

This 72 PPI are irrelevant... except for illustrator, so your friend is right if you were working in Illustrator.

  • if I see what you are saying we couldn't have a 30% increase in size, when we are talking about a 100% increase in dpis. But the thing is, I used pixels for my ruler. Only text I used points. But meanwhile the problem remains that Photoshop is a lot of the mark regarding sizes. The developer told me to make a simple test. Upload a psd to dropbox and then open the file in the browser, full screen, with a 100%! And there it is, the bigger layout with huge images and text. If I scale it down to 66% then everything looks fine (there it is the 30%). Any idea how can this happen? – Mel Sep 29 '18 at 18:02
0

You seem to be designing your Photoshop document at the wrong resolution. Websites will be viewed on a screen, and standard screen resolution is 72ppi.

You should be able to scale it all proportionally by going Image > Image Size... and changing the resolution from 150 to 72ppi there.


SIDE NOTE: For the sake of semantics — DPI stands for Dots Per Inch and refers to the physical printing process. When designing for screens, resolution is measured in PPI, which stands for Pixels Per Inch.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.