DPI, PPI and Photoshop style presets

Disclaimer: This is one of those blog posts where I might be totally missing the ball, but let’s try and swing for the fences anyway.

Yesterday I tweeted that I was re-doing all the presets in my Photoshop Style pane to 150dpi.

The reason behind doing this was that I found out there were inconsistencies in the application of Style presets across different Macs. But I also noticed these inconsistencies on my own Mac. Eventually I think to have found that your style presets have a property regarding the DPI they were created at. Meaning, if you would double up the DPI of your file, some of the styles in the Style preset would double up when re-applied.

After tweeting, I got into a conversation with Josh Bryant about DPI’s, PPI’s and the likes, which prompted me to write down what I thought about it.

Is PPI the same as DPI?

In an absolute and factual sense, no. PPI is not the same as DPI. But in practice – if you approach it relatively, they act the same. If you print an image with a higher resolution – eg. 300DPI compared to 150DPI – it will be physically smaller. If the physical resolution – or the amount of physical PPI – of a screen is larger, an image with the same dimensions will look smaller.

Physical PPI?

There are two types of PPI: logical PPI and physical PPI.

Logical PPI is the amount of pixels per inch that software claims a screen provides. At current, I believe this is 72PPI for Mac and 96PPI for Windows. And this is all you have to know about logical PPI, because it seems to me that this value has no actual use anymore.

Physical PPI is another story. Physical PPI is the actual pixels per inch that a screen provides. Granted that pixels are square (screw you, video formats) if you take the width of a screen in pixels and divide it through the width of the screen in inches, you get the physical PPI of your screen.

Examples:

  1. A 24″ 1920×1200 screen is roughly 20.4 inches wide; 1920 / 20.4 = 94 PPI.
  2. An iPhone 3G has a screen 2.024 inches wide; 320 / 2.024 = 158 PPI.
  3. An iPhone 4 has a screen 1.965 inches wide; 640 / 1.965 = 326 PPI.

The point

The DPI resolution of an image has nothing to do with the resolution at which it is displayed. A physical pixel is a physical pixel, the image has no control over this.

Yet the point that I started out with was rebuilding my Style presets from a 150DPI file, so I could apply the same styles on a 300DPI file and photoshop would recalculate the distance of the Drop Shadow’s etc. (1px would become 2px)

The reason for this increase is because DPI and PPI are the same in a relative sense. Back to why I was actually rebuilding my Style presets. I switch around a lot between design for a screen and design for an iOS device. Being able to just change the resolution of my current PSD and having the Style presets work with me correctly saves a bit of a hassle.

Sidenote: Why 150DPI? Because both 150DPI and 300DPI are commonly used. Because 300DPI is close to retina (in case you’d ever want to print it) and because somewhere in between 150DPI and 300DPI is where normal screens are going. You could go for 72DPI and 144DPI, or 96DPI and 192DPI (although I’d much rather go for 128DPI and 256DPI, seeing as that is nerdier)