Design For The Web
Lately there has been some discussion, both online and within the studio, regarding the preparation of psd's for the web developer, down to designing for the web. During some of the articles that I have read, which do contain some fantastic points for the design to developer hand off, I keep coming across one frightening misconception for someone voicing designing for the web to have. It seems that, even within the design community, many people think that the resolution that a Photoshop document should be set to is 72dpi (I dare you to try and find this setting within Photoshop). The problem with this being that dots per inch (dpi), have nothing to do with the web and viewing information on a screen. Dpi is a printing term and relates to the maximum number of dots per inch that the printer is able to place on the paper. A printers numbers—dpi—have nothing to do with the number of pixels in an image. A design that is intended for the web should be set to a resolution of 72ppi, pixels per inch—these pixels will be translated directly into screen pixels. Screens display information in pixels and not dots.
Another point that has come up recently, with relation to designing for the web, is the colourspace of the document. Most people will know, at the very least, that the web is viewed in RGB and not CMYK, which is another print term, and relates to the 4 different inks that are used to achieve the colours within the final printed version, Cyan, Magenta, Yellow and Black. What it seems some people are not aware of, is that any old RGB wont do the same job (Photoshop is usually defaulted to Adobe RGB 1998). When working on a design, or images for the web, the colourspace within Photoshop should be set to the sRGB profile. This profile is being endorsed by the W3C, Intel and Panton to name a few and is the standard for web graphics. The result of not using sRGB can be seen when 'exporting for web' where you should notice that the images no longer have the same rich, vibrant appearance that they had within the Photoshop document.
For more reading on colourspace setup for the web in Photoshop, including a little bit of a how to visit Rumbling Skies. His write up was easy to understand and make sense of. More on preparing a document for the web can be found in Noupe's latest article (Note Noupe's incorrect use of dpi). To dig deeper into the dpi/ppi conundrum check out the article on Pictureline (yes it's old, you would think we would have gotten it by now), complete with an example of 72dpi on the web. If you would like more on dpi/ppi there is a little on Frugal as well.
Add your thoughts