iOS hi rez screen shot for retina?

[pelsar]

our help file requires screen shots of the application, however as far as i can tell (and i've tried, the iphone screen shot system as well as 5 different screen shot apps), they all come out at 72ppi with a 320 width.

for a proper graphic for retina I understand i need a width 640 x ht 920 at 326ppi

any ideas how to get a hi rez screen shot of the retina screen (iPhone 4)

 

[dejo]

I use the "New Screenshot" functionality in the Organizer window and all my screenshots are 640px width.

 

[pelsar]

I use the "New Screenshot" functionality in the Organizer window and all my screenshots are 640px width.

but whats the DPI (PPI)

 

[dejo]

but whats the DPI (PPI)

Why is this important for you?

Ah, I see you made this statement in your OP:

for a proper graphic for retina I understand i need a width 640 x ht 920 at 326ppi

Who told you the graphics need to be 326ppi? Do you understand what PPI is, especially in terms of the device displaying the image?

 

[pelsar]

Why is this important for you?

Ah, I see you made this statement in your OP:

Who told you the graphics need to be 326ppi? Do you understand what PPI is, especially in terms of the device displaying the image?

actually no (pixels per inch)...i'm a very experienced graphic/web designer that got sucked in to doing the help file for the app. I set it up and the client came back saying the graphics were not retina graphics -he then did some screen shots, i opened them in photoshop and they were 72dpi, he told me "no good".

so i started my research and "here i am" i learned about the 2@ business and assumed that for the help file screen shots i'll be needing something beyond 72dpi...or am i wrong?

 

[dejo]

How are you putting together the help file for the app? Are you using HTML pages? Something else?

 

[pelsar]

How are you putting together the help file for the app? Are you using HTML pages? Something else?

yep html

 

[dejo]

actually no (pixels per inch)...i'm a very experienced graphic/web designer that got sucked in to doing the help file for the app. I set it up and the client came back saying the graphics were not retina graphics -he then did some screen shots, i opened them in photoshop and they were 72dpi, he told me "no good".

Did you ask him why 72dpi was no good and what he would like instead? I guess you could change the image's DPI without affecting the resolution, if you really needed to. Still not sure how the DPI of an image matters in an HTML page.

so i started my research and "here i am" i learned about the 2@ business and assumed that for the help file screen shots i'll be needing something beyond 72dpi...or am i wrong?

Adding an "@2x" to the image filename only works for images using Apple's UIImage control and won't automatically adjust for images within an HTML page.

 

[pelsar]

Did you ask him why 72dpi was no good and what he would like instead? I guess you could change the image's DPI without affecting the resolution, if you really needed to. Still not sure how the DPI of an image matters in an HTML page.


Adding an "@2x" to the image filename only works for images using Apple's UIImage control and won't automatically adjust for images within an HTML page.

His contention is that 72 dpi on the iphones higher density screen isn't good enough.

and this is where i get confused....if its higher density (2x - the screen) and i have an iPhone screen shot at 640 width at 72 dpi...does the iphone show that image at its screens optimum quality?

 

[Wafflausages]

His contention is that 72 dpi on the iphones higher density screen isn't good enough.

and this is where i get confused....if its higher density (2x - the screen) and i have an iPhone screen shot at 640 width at 72 dpi...does the iphone show that image at its screens optimum quality?

I dont know if this makes any sense to me.... The only way to know dpi is by hardware. The density of pixels on a screen or the amount of dots on a printed page. Anyways, as long as the picture on the phone is equal or greater than the phones resolution no pixel is really duplicated to scale the screen which would be optimal quality.

 

[pelsar]

how about this

do you see any difference between links on 7 and 8?


http://everyth1.www77.a2hosting.com/help/

the first is from the original graphics (@2) made in to a png uploaded and made to fit via a width option in the uploading box

the second is a screen shot at 72dpi 460 width, uploaded with with the width modified while uploading to fit the screen

 

[dejo]

His contention is that 72 dpi on the iphones higher density screen isn't good enough.

Maybe point the client to the following article, especially the section on "Proof that Video Systems do NOT use dpi": Say No to 72 dpi

and this is where i get confused....if its higher density (2x - the screen) and i have an iPhone screen shot at 640 width at 72 dpi...does the iphone show that image at its screens optimum quality?

Guess that depends on how the image is displayed and whether it's scaled at all.

 

[pelsar]

Maybe point the client to the following article, especially the section on "Proof that Video Systems do NOT use dpi": Say No to 72 dpi


Guess that depends on how the image is displayed and whether it's scaled at all.

thanks for your time.....the client says both images are good, which means i know have to teach him (and myself) with the help of your link why the dpi is irrelevant

 

[pelsar]

i dont understand why this is so difficult...yet

i've been reading and reading and still dont get it:

all i need to know is what are the photoshop specs that fit the iphone and why:
photoshop does not have ppi it has dpi
the iphones language is ppi

pixels and points are the same in photoshops image dialog box

what is the optimal photoshop specs for the iPhone? and why do i keep reading that this ideal?

iPhone4 640×960 326 ppi
and my 640 x 960px at 72dpi seems to work just fine...(is 72dpi = 326ppi in photoshops dialog box?)


and how does it correlate to photoshops image dialog box of dpi?

 

[dejo]

and why do i keep reading that this ideal?

iPhone4 640×960 326 ppi

Where are you reading this?

Do you realize that 326ppi is the spec for the iPhone 4/4S/5? That is, any image, no matter what the resolution, will be displayed at 326ppi, because that's the spec of the display on those iPhones.

However, I really think you are worrying about something that makes no difference. Ignore DPI and PPI. Just make sure your screenshots are as hi-res as possible and you should be good to go.

Question: where is this HTML help file going to be displayed? Within the app itself?

 

[pelsar]

Where are you reading this?

Do you realize that 326ppi is the spec for the iPhone 4/4S/5? That is, any image, no matter what the resolution, will be displayed at 326ppi, because that's the spec of the display on those iPhones.

However, I really think you are worrying about something that makes no difference. Ignore DPI and PPI. Just make sure your screenshots are as hi-res as possible and you should be good to go.

Question: where is this HTML help file going to be displayed? Within the app itself?

I've been reading all over the web.... I actually dont care..its my client for reasons that are unclear wants to know the pixel density and format for each screen...i have no idea what to answer him

the help file will be "outside the app" and linked from the app to a webpage

you cleared up one thing: all images are displayed at 326ppi, thats what the hardware does.

so how does a 72dpi photoshop file display at 326ppi and still be sharp?

 

[dejo]

so how does a 72dpi photoshop file display at 326ppi and still be sharp?

Video systems do not use dpi. Make sure you've read and understand the section covering this from the "Say No to 72 dpi" page I linked to.

 

[pelsar]

Video systems do not use dpi. Make sure you've read and understand the section covering this from the "Say No to 72 dpi" page I linked to.

yes i read that and it makes sense...especially his picts with different dpi on screen

so i go to "google" and i ask politely: where can i discover the ppi of a psd file?
and i get this article:
http://bjango.com/articles/ppiisatag/

The two names, PPI and DPI, mean essentially the same thing


which puts me back to square 1.

my impression is that an iphone 4 screen shot which when I open in psd opens its 2x screen at 460px wide on my non retina laptop, is essentially saying its pixel density is 2x but opens at "1x" on my screen, because my screens pixel density is simply "less" than the retina and inorder to show the same amount of information, i.e. the same amount of pixels with information it has to double its size on my non retina screen
thats makes sense to me, is that it?

 

[dejo]

...and i ask politely: where can i discover the ppi of a psd file?

Ignore PPI. It's the same wild goose chase as DPI.

 

[Duncan C]

yes i read that and it makes sense...especially his picts with different dpi on screen

so i go to "google" and i ask politely: where can i discover the ppi of a psd file?
and i get this article:
http://bjango.com/articles/ppiisatag/

The two names, PPI and DPI, mean essentially the same thing


which puts me back to square 1.

my impression is that an iphone 4 screen shot which when I open in psd opens its 2x screen at 460px wide on my non retina laptop, is essentially saying its pixel density is 2x but opens at "1x" on my screen, because my screens pixel density is simply "less" than the retina and inorder to show the same amount of information, i.e. the same amount of pixels with information it has to double its size on my non retina screen
thats makes sense to me, is that it?

Here's the deal. DPI stands for dots per inch. It's a printing term, having to do with the number of halftone dots printed onto a page.

PPI stands for pixels per inch. It tells you the pixel density of an image when displayed at a certain size (in inches or cm)

What really matters with computer image files is pixel DIMENSIONS. How many pixels do you have in height and width. The more pixels, the more detail you can store.

When you have an image with large pixel dimensions, you can display it at a large size, like on a poster, and it still looks sharp.

File formats like Photoshop files include a resolution "hint" that suggests the resolution in PPI. However, that hint doesn't have much meaning. You can still display it larger or smaller, which would change the pixels per inch (PPI). If you display the image in a larger space, the exact same image is displayed at a lower number of pixels per inch.

Images look the best when displayed with each source pixel mapped to a screen pixel. This means ignoring the PPI setting in the image and saying "A pixel is a pixel, no matter how small." Then you display the image at the native resolution of the screen, and more pixels take up more screen space. That's how most images are displayed on computers.

 

[ArtOfWarfare]

Why aren't we using all SVGs yet?

Why are screenshots captured as PNGs instead of SVGs? I'm typing from my iPhone right now and I can't see any part of my screen that has a bitmap graphic on it... I suspect the MR logo, though its a PNG, probably has an SVG version somewhere. Can't we replace that with an SVG (IDK which browsers support them yet, but it seems to me that there's probably some way of resorting to the PNG when an SVG isn't available.)

SVGs would trash all this silly non-understanding.

More on topic: get the retina screenshot you want, then change the metadata on the picture to say the DPI/PPI is whatever you want. Or points per inch, because Apple wanted to add in yet another pointless measurement that's easy to mix up.

 

[Duncan C]

Why aren't we using all SVGs yet?

Why are screenshots captured as PNGs instead of SVGs? I'm typing from my iPhone right now and I can't see any part of my screen that has a bitmap graphic on it... I suspect the MR logo, though its a PNG, probably has an SVG version somewhere. Can't we replace that with an SVG (IDK which browsers support them yet, but it seems to me that there's probably some way of resorting to the PNG when an SVG isn't available.)

SVGs would trash all this silly non-understanding.

More on topic: get the retina screenshot you want, then change the metadata on the picture to say the DPI/PPI is whatever you want. Or points per inch, because Apple wanted to add in yet another pointless measurement that's easy to mix up.

SVG is good for some things, but not for others.

It stands for "Scalable Vector Graphics". Vector graphics are lines, curves, etc.

The iPhone is a raster device. (As are almost all computer displays.) The contents on the screen are rendered as a raster bitmap, not vector. There isn't really a meaningful way to capture a screenshot as a SVG file, since the screen is not vector. You'd have to somehow intercept the Quartz/Core Graphics/OpenGL vector drawing primitives as an iOS app draws to the screen and record those as vector actions. It would be really, really hard to do that in a way that works across all the different ways programs can draw to the screen, and then what do you do when the program draws pixels, not vector graphics?

SVG is good if your content is line drawings. It's not appropriate for bitmaps, however.

 

[ArtOfWarfare]

SVG is good for some things, but not for others.

It stands for "Scalable Vector Graphics". Vector graphics are lines, curves, etc.

The iPhone is a raster device. (As are almost all computer displays.) The contents on the screen are rendered as a raster bitmap, not vector. There isn't really a meaningful way to capture a screenshot as a SVG file, since the screen is not vector. You'd have to somehow intercept the Quartz/Core Graphics/OpenGL vector drawing primitives as an iOS app draws to the screen and record those as vector actions. It would be really, really hard to do that in a way that works across all the different ways programs can draw to the screen, and then what do you do when the program draws pixels, not vector graphics?

SVG is good if your content is line drawings. It's not appropriate for bitmaps, however.

Almost all icons start out as vector drawings, correct? If Apple were to start supporting SVGs outside of WebKit, we could export icons as SVGs instead of PNGs and build our apps with those. The only bitmaps would be pictures that come from the camera - and I'm pretty sure SVG allows raster images to be mixed in. Next, Apple would need to make it so taking a screenshot grabs the vector and color data instead of raster data. Something like that.

I'm amazed Apple decided to go the route of pixel doubling and introducing "points" rather than ditching pixels and going full on vectors when they decided to start making "retina" screens.

 

[Duncan C]

Almost all icons start out as vector drawings, correct? If Apple were to start supporting SVGs outside of WebKit, we could export icons as SVGs instead of PNGs and build our apps with those. The only bitmaps would be pictures that come from the camera - and I'm pretty sure SVG allows raster images to be mixed in. Next, Apple would need to make it so taking a screenshot grabs the vector and color data instead of raster data. Something like that.

I'm amazed Apple decided to go the route of pixel doubling and introducing "points" rather than ditching pixels and going full on vectors when they decided to start making "retina" screens.

Adding more support for vector artwork and vector icons would be cool. However, these devices are raster devices. It does not make sense to "go full vector." That would a soup-to-nuts rewrite of the entire display model for iOS. That would be huge, both for the OS internals and for app developers.

 

[chown33]

... and I'm pretty sure SVG allows raster images to be mixed in.

You should look at the resulting data in more detail. Seriously. At least do a couple of thought experiments, after familiarizing yourself with what an SVG representation actually looks like.

First, SVG is XML, which is fundamentally a text-based format. There are compressed representations, but support for them is not universal (nor universally required).

Second, a raster image is fundamentally a series of pixels with a color, possibly a different color in each pixel. So a simple alternating pixel pattern, like 0xFFFFFF 0xEEEEEE would have to be represented as a series of unit-length vectors that alternate between two colors. Any translation of the rasterized pattern back to a more vector-like representation requires some pretty clever de-rasterization heuristics.

Exercise #1: Take one line of 60 pixels alternating between two colors, and write out the SVG XML representation of it. Compare that to the PNG representation of the same 60 pixels (you are free to use any recognized PNG compression mechanism).


Next consider a rasterized linear gradient, at an angle of 30 degrees from the vertical. The color changes at every raster line, and also shifts horizontally from line to line. Again, how would you de-rasterize that back to a vector representation that specifies a gradient, angle, and colors?

Repeat the analysis on a radial (circular) gradient. You either have to encode a series of vectors, or de-rasterize back to the parameters for the radial gradient.