Photoshop Resolution for Web Design?

I’m a programmer, not a designer, but I am trying to learn design as it would be very helpful. I am following a tutorial on PSD|TUTS+ and it doesn’t specify the resolution I should be working with. My progress so far does look a little less defined then the screen-shots, so I am wondering if I should be working at a resolution of 300?

Any ideas, or thoughts on the matter?


By default browsers display images at the native screen resolution i.e. one pixel in the image maps to one pixel on the screen. The browser ignores any resolution value defined within the image file.

You can of course override this behaviour by specifying a width and/or height value for the image, either as parameters on the <img> element or as CSS rules.

Unless you intend to reuse images at different sizes throughout your page or site there is little point in saving your images at a larger size than you intend to display them. The exception to this would be if you were targeting devices with a high resolution Retina display (e.g. iPhone4).

There are several reasons why the screenshots could look more defined than yours, especially if you have processed any of the images yourself. If you are using JPEGs then the level of compression will affect the appearance of the image as will the compression algorithm used by your software.

Source : Link , Question Author : Brandon , Answer Author : duncmc

Leave a Comment