Creating a 300dpi png in photoshop


Question

Ive creating an email footer in Photoshop. The footer is 650px W x 300 px H. I want to set the resolution of the footer to 300dpi so that the text is readable at a smaller size, but when i do so the size of the canvas area doubles.

I will be exporting this as a .png, is there any way to get a 300dpi 650x300px footer without it becoming 1300x600px ?

1
0
10/24/2015 8:21:00 PM

First, you don't need 300ppi for a email footer. Already at 150ppi it should be much clearer than 72ppi for example.

Second, you're mixing the units. When you speak of pixels, it includes already the ppi information in itself. What I mean is it's not the right unit when speaking of resolution. You should use imperial or metric units for size when speaking of resolution + size (eg. inches, millimeters, etc.)

For example, a 650x300 pixels at 72 ppi = 9.029" x 4.167"... and at 300ppi the size will be the same (9.029" x 4.167") but the number of pixels will be increased to 2709 x 1250 pixels because there's more information in your image. That's why you kind of need to ignore the pixels as dimension when you need resolution, unless you shrink inline your image 2-3x in your code.

Third thing is... you can save with a higher resolution but you can't "save for web" it and optimize it as much as a normal web image. You can use the "save as..." instead if you need to keep that resolution information. By default the "save for web..." will remove that resolution information and convert it to the pixel size. That's why your image is bigger. Unfortunately your PNG saved with a "save as..." will be heavier than "save for web".

Finally, don't forget that some clients might not interpret your resolution either and will show the image using the pixels information only, eg. bigger. You'll need to make tests with this or make sure you specify a size for the image.

I think for an email footer, it's safer to simply find another way to increase your text size instead and adjust your layout. Maybe have a look at the anti-aliasing of your text to put them to sharp for example. This way your footer banner will look the same for everybody. Some people have their email client set to "text-only".

1
10/25/2015 12:52:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^