web banner - confusion with pixels, ppi, etc

[abrinkley]

Hi adobe family,

I'm trying to design a web banner for work, given the dimensions 300x600, and I'm having trouble deciphering "actual size". If I make a new document with those dimensions at my screen resolution (219, I'm on a 21.5 in 4k mac) it comes out pretty small. But when I use those same dimensions to create a page in InDesign its about 3x the size.

And if I change the resolution to the default 72, its wayyyy smaller. When I make a 1in canvas at that size its 1/3 of an inch on my screen.

I'm confused, how do I do this.

[JJMack]

For the Web its not about PPI its all about the number of Pixels.  PPI is not anything a display can adjust they use their PPI. PPI is meaningless when it come to the web. Printer on the other hand can adjust their spots so for printing both PPI pixel size and Number of pixels are important.   I normally just change PPI Pixels size to change the size a printer print the pixels I get from my cameras.  I do not interpolate the image pixels.   For the web you need to interpolate your camera pixels to reduce the number of pixels so the image will fit on  a display.

Image on a display will be displayed with the displays ppi resolution they will be a different size on different resolution displays.

[macpawel]

Yes, JJMack is right,

Don't worry, about your resolution. If you need prepare web banner important is it's pixel size not resolution.

Typical screen resolution (but any modern screen is higher) is 72 ppi. You can use it, but you can also use any resolution you want. Important is pixel dimensions.

pawel

[D Fosse]

To Photoshop, all that matters is 300 by 600 pixels. This is displayed so that one image pixel is represented by exactly one screen pixel. This is what 100% means in Photoshop.

Your iMac has a screen resolution of 4096 x 2304 pixels. That means the 600-pixel-wide document will occupy a little more than 1/7th of your screen width. To be precise, 1:6826. Go ahead, find a ruler and measure it out.

Ppi doesn't matter on screen. The image can be 72 ppi, 1000 ppi or 1 ppi - they all display identically, according to pixel dimensions only. The image pixels align to the screen pixel grid. Try it.

When printing on paper, no such pixel grid exists, so one has to be invented. That's what ppi is. Pixels per inch is a print parameter only.

InDesign, however, is a vector-based application. It thinks fundamentally different from Photoshop. It doesn't know what a pixel is, much less a screen pixel. It just works in physical print dimensions, which is sent to screen according to a standard formula for screen density. That's how a screen size is determined.

You should also read through this (short) thread:

https://forums.adobe.com/thread/2463330

[Conrad C]

This can work from InDesign, because more recent versions of InDesign have been upgraded to support authoring for HTML/CSS-based publishing formats like EPUB. But it's definitely still quirky, so you have to do it just right.

First, it's a good idea to make sure the InDesign unit of measure is set to pixels.

When you export from InDesign to JPEG or PNG, you must set Resolution to 72ppi.

This is the only way for pixel dimensions entered in InDesign to maintain those pixel dimensions in any other program.

Do not set it to the actual resolution of your display, or any other resolution.

Setting it to 72 ppi is counterintuitive since we all know 72 ppi displays almost don't exist today, but that's what's quirky about how InDesign does this. If you set it to another ppi value, what InDesign seems to do is assume the document is in inches and multiply that by the ppi value you entered, so that if you entered 219 ppi for a 300 x 600 px document, I would expect the image to open in Photoshop as a 913 x 1825 ppi image.

(Advanced: You can kind of see what InDesign did if, in Photoshop, you choose View > Print Size, which adjusts the magnification based on the ppi value in the image. When I do this in Photoshop for images exported from InDesign at 72 ppi, 219 ppi, or any other ppi value, they all appear at the same size.)

abrinkley  wrote

And if I change the resolution to the default 72, its wayyyy smaller.

If it's way smaller in Photoshop but the Image > Image Size command says it's a 300 x 600 px image, then there is nothing wrong with the image, it's just being displayed smaller on the Retina display of a 4K iMac. In Photoshop, setting magnification to 200% should make it closer to the size that a 300 x 600 px image would appear in a web browser.