Go Back   MacRumors Forums > Apple Systems and Services > Programming > iPhone/iPad Programming

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 11, 2012, 01:45 PM   #1
pelsar
macrumors regular
 
Join Date: Apr 2008
Location: israel
hi rez screen shot for retina?

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)
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 11, 2012, 01:57 PM   #2
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
I use the "New Screenshot" functionality in the Organizer window and all my screenshots are 640px width.
Attached Images
  
__________________
dejo is offline   0 Reply With Quote
Old Dec 11, 2012, 02:28 PM   #3
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
I use the "New Screenshot" functionality in the Organizer window and all my screenshots are 640px width.
but whats the DPI (PPI)
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 11, 2012, 02:34 PM   #4
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
but whats the DPI (PPI)
Why is this important for you?

Ah, I see you made this statement in your OP:
Quote:
Originally Posted by pelsar View Post
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?
__________________
dejo is offline   0 Reply With Quote
Old Dec 11, 2012, 02:51 PM   #5
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 11, 2012, 02:54 PM   #6
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
How are you putting together the help file for the app? Are you using HTML pages? Something else?
__________________
dejo is offline   0 Reply With Quote
Old Dec 11, 2012, 03:00 PM   #7
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
How are you putting together the help file for the app? Are you using HTML pages? Something else?

yep html
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 11, 2012, 04:58 PM   #8
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
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.

Quote:
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.
__________________
dejo is offline   0 Reply With Quote
Old Dec 12, 2012, 02:14 AM   #9
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 12, 2012, 02:53 AM   #10
Wafflausages
macrumors 6502
 
Join Date: Jun 2010
Quote:
Originally Posted by pelsar View Post
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.
Wafflausages is offline   0 Reply With Quote
Old Dec 12, 2012, 04:33 AM   #11
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
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
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 12, 2012, 09:57 AM   #12
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
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

Quote:
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.
__________________
dejo is offline   0 Reply With Quote
Old Dec 12, 2012, 11:37 AM   #13
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
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
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 12, 2012, 03:00 PM   #14
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
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 640960 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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 12, 2012, 03:23 PM   #15
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
and why do i keep reading that this ideal?

iPhone4 640960 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?
__________________
dejo is offline   0 Reply With Quote
Old Dec 12, 2012, 03:52 PM   #16
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6

Last edited by pelsar; Dec 12, 2012 at 04:35 PM.
pelsar is offline   0 Reply With Quote
Old Dec 12, 2012, 05:15 PM   #17
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
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.
__________________
dejo is offline   0 Reply With Quote
Old Dec 13, 2012, 12:20 AM   #18
pelsar
Thread Starter
macrumors regular
 
Join Date: Apr 2008
Location: israel
Quote:
Originally Posted by dejo View Post
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?
__________________
MacBook Pro 1.83GHz Intel, 1.5GB 667MHz, Leopard 10.5.6
pelsar is offline   0 Reply With Quote
Old Dec 13, 2012, 12:59 AM   #19
dejo
Moderator
 
dejo's Avatar
 
Join Date: Sep 2004
Location: The Centennial State
Quote:
Originally Posted by pelsar View Post
...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.
__________________
dejo is offline   0 Reply With Quote
Old Dec 13, 2012, 09:51 PM   #20
Duncan C
macrumors 6502a
 
Duncan C's Avatar
 
Join Date: Jan 2008
Location: Northern Virginia
 
Quote:
Originally Posted by pelsar View Post
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.
__________________
Regards,
Duncan Champney, WareTo.
Check out our latest iOS app, Face Dancer, available for free on the App Store.

Last edited by Duncan C; Dec 13, 2012 at 09:58 PM.
Duncan C is offline   0 Reply With Quote
Old Dec 13, 2012, 11:35 PM   #21
ArtOfWarfare
macrumors 603
 
ArtOfWarfare's Avatar
 
Join Date: Nov 2007
Send a message via Skype™ to 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.

Last edited by ArtOfWarfare; Dec 13, 2012 at 11:41 PM.
ArtOfWarfare is offline   0 Reply With Quote
Old Dec 14, 2012, 12:17 PM   #22
Duncan C
macrumors 6502a
 
Duncan C's Avatar
 
Join Date: Jan 2008
Location: Northern Virginia
 
Quote:
Originally Posted by ArtOfWarfare View Post
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.
__________________
Regards,
Duncan Champney, WareTo.
Check out our latest iOS app, Face Dancer, available for free on the App Store.
Duncan C is offline   0 Reply With Quote
Old Dec 14, 2012, 02:37 PM   #23
ArtOfWarfare
macrumors 603
 
ArtOfWarfare's Avatar
 
Join Date: Nov 2007
Send a message via Skype™ to ArtOfWarfare
Quote:
Originally Posted by Duncan C View Post
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.
ArtOfWarfare is offline   0 Reply With Quote
Old Dec 14, 2012, 03:10 PM   #24
Duncan C
macrumors 6502a
 
Duncan C's Avatar
 
Join Date: Jan 2008
Location: Northern Virginia
 
Quote:
Originally Posted by ArtOfWarfare View Post
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.
__________________
Regards,
Duncan Champney, WareTo.
Check out our latest iOS app, Face Dancer, available for free on the App Store.
Duncan C is offline   0 Reply With Quote
Old Dec 14, 2012, 07:20 PM   #25
chown33
macrumors 603
 
Join Date: Aug 2009
Quote:
Originally Posted by ArtOfWarfare View Post
... 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.
chown33 is offline   0 Reply With Quote

Reply
MacRumors Forums > Apple Systems and Services > Programming > iPhone/iPad Programming

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Screen-shot your home and lock screen! BlackBook88 Picture Gallery 269 Nov 22, 2014 02:53 PM
What app is this screen shot from? rep4cleveland21 iPhone 14 Nov 19, 2013 09:57 AM
Screen shot ??! jredecop Windows, Linux & Others on the Mac 1 Nov 1, 2013 02:27 PM
Need help please re screen shot macgirl2013 Mac Basics and Help 2 Jan 24, 2013 07:36 AM
How do I take a screen shot? Big Stevie Mac Basics and Help 4 Oct 6, 2012 08:26 PM

Forum Jump

All times are GMT -5. The time now is 07:17 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC