lschena wrote:

 

I know that the viewing of sites on the internet is at 72 dpi,

Not the case.

What you view on your screen is viewed at screen resolution. It's different for every screen.

Forget dpi for web images. 72dpi, 300dpi, whatever. Doesn't matter. It's irrelevant and meaningless for web images.

DPI is a print measurement. It only matters when you're printing.

All that matters for web images is the physical dimensions of the image (height x width of image - measured in pixels) and the correct file compression for the image (JPG or PNG or GIF).

1000px x 1000px image printed @ 300dpi will be 3.333 inches x 3.333 inches (and sharp).

1000px x 1000px image printed @ 100dpi will be 10 inches x 10 inches (but lower quality than @ 300dpi due to less dots per inch).

1000px x 1000px image on screen will be 1000 px x 1000px on every screen (DPI doesn't come into it).

When you insert an image on a web page, it's best for image quality and file download time to insert the actual image at finished dimensions.

http://www.scantips.com/no72dpi.html

lschena wrote:

 

Same thing when I bring in the logo at the top left, I place it here, re-size it to be a little smaller, and it loses it sharpness. Here is the file so you can maybe see what I mean. Thank you.

The key with web images is to start with a high quality original, resize it once, smaller, in Photoshop to its final 100% size (for the web page) then Save for Web with the correct compression (file format).

Avoid resizing slightly to be a little smaller. It'll always give smudgy, fuzzy results.

Aside from what Don said: fluid layouts using media queries, relative positioning and sizing, jQuery or even a dynamic backend using PHP help a lot to build a page/ site that fits multiple screen resolutions/ devices. If you don't mind my saying so: You are probably wasting your time trying to build this pixel perfect in PS and making everything an image doesn't help. It's always gonna work against you one way or the other. And Don has a point in that if they really want a fixed resolution without scrolling, it's for them to decide at which resolution to build it, but then of course you will have to tel lthem that it's gonna look great on the boss' new laptop, but will be utterly unusable on a tablet or mobile phone and will likewise show a lot of empty space around on large screens. You can't have it both ways. Despite making progress by leaps and bounds in recent years, web design is till like pulling teeth and requires to compromise. And of course beyond building a dummy and prepping the images PS should not be involved beyond a certain point. Move over to Muse and Dreamweaver to build the actual page when the time is right.

Mylenium