I am designing a web site for a compnay in which their coder will slice up the pages and use all the elements that way. Everything this I read and tuts I follow say to desing it at 72 ppi, however, when i zoom in to the relative screen size the site will be looked at, all the text and graphical elements are blurry/fuzzy.
Would it be best to make the file say at 300 ppi, and let the coder save out his slices at 72 ppi? I know that the viewing of sites on the internet is at 72 dpi, but all sites I see are clean and crisp even when zooming in tightly on a product image (say for example Apple's Ipad Site) I don't understand why all the tuts I follow on this subject say to design the site at 72, but obviously this is not good when all the elements are not clean and sharp when the file is viewed at the relative screen size that they will see on the internet?? I made a graphical element for example of small boxes as a lthin line looking thing, and when I zoom in on the file, the boxes are very fuzzy. 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.
Any advice here would be very helpful??
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.
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.
As John said, browsers think in pixels. That's all that matters. All elements must/ should be designed 1:1 to the final sizes at which they will be used. The rest doesn't really matter, though you can obviously improve perceived sharpness on small elements by aligning them to the pixel grid or using non-antialaised drawing and layer styles. Everything else is looking for a solution that doesn't exist. There will always be limitations and you will lose color fidelity and sharpness, be it just for the image compression.
650 pixels is an odd choice for the width of a site. Are you certain that this is the size expected by the client and your developer?
Elements may appear fuzzy because you simply made a tiny web page... or because you have excessive JPG compression. I'd either save the logo and buttons with less JPG compression or use Fireworks to produce PNG8 with alpha transparency.
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.
Europe, Middle East and Africa