Lee & Matt, The iPhone screen is exactly 2" wide, with 160 pixels per inch, which gives you exactly 320 pixels of screen width in portrait mode. No more, no less.
Even though DPI stands for Dots Per Inch, it is common to refer to LCDs as having DPI rather than PPI. I have seen specifications from Samsung and Philips that refer to the amount of individual dots/pixels on an LCD as DPI. The two terms are interchangeable when it comes to screens and LCDs. Apple's own spec sheet on their website states the iPhone's LCD is 480x320 dpi. Dots/Pixels same thing. This is the world of screen resolutions. Print is another subject and is not viewed/approached/worked with in the same absolute terms as screen dpi/ppi. Apple is not making any reference to print in any of their specifications released thus far when speaking of 160dpi for the iPhone. They are simply telling you exactly what you need to know to make graphics for the iPhone's screen, which if you laid a ruler across it's screen, you could count 160 tiny pixels/dots per inch. There is no mystery, no magic, no conversions to be done. DPI/PPI really mean nothing when doing graphics for computer screens. Zero. There is no place in html or CSS that references inches. It's all based upon pixels, and not pixels-per-inch. Two images 300 pixels wide will display exactly the same side by side even when one was done at 72 dpi and the other done at 160 dpi. Why? Because they are both 300 pixels wide and that's what the computer screen and LCDs go off of. You make an image a certain pixel width and whatever device shows your image will show your image at that devices dpi resolution, when zoom is set to 100%. As a side note, yes, if you print your image at whatever dpi the screen is, it 'should' be the same physical size as the device's screen. That depends on the quality/accuracy of the screen device and the printer being used. So if you find you are having difficulty visualizing the final size of graphics, since your computer screen will show them physically larger, do all your iPhone graphics at 160dpi and print them out at the same resolution and start poking away with your index finger to see if you have big enough buttons and enough space between. A 320x480 rectangle done in photoshop at 160dpi should print out to be exactly 2"x3". Just make sure you choose 160dpi when creating the new image. Don't convert it to 160 when ready to print or ready to save or you will be messing up all your hard work. Work at the resolution/dpi/ppi as your final output. Always. -=Randy On 7/20/07 6:09 PM, "Lee Cardona" <[EMAIL PROTECTED]> wrote: > > Hi Matt, > My measures are those from Apple for the iPhone screen. So 480-by-320- > pixel resolution at 160 dpi. However use of 160 dpi as used here by > Apple I think is a misuse of the term dpi in a general sense. I think > they are only trying to give you a hint to the print resolution you > would need to reproduce a 1:1 printing of what the screen shows > native. > > If you check out this wikipedia page you will see the term dpi is > often misused: http://en.wikipedia.org/wiki/Dots_per_inch > > As Mike points out pixels are pixes. This wikipedia page expands more > on this: http://en.wikipedia.org/wiki/Pixels_per_inch > > > > On Jul 20, 2:34 pm, Randy Walker <[EMAIL PROTECTED]> wrote: >> Just remember that for print, dpi matters because there will be a conversion >> of sorts to inches. For the screen it doesn't. >> >> A 4" wide image done at 600dpi will look 4" wide on paper, but be HUGE on >> your screen. That's because your printer can accommodate 600 pixels per >> inch and your screen cannot. The image would have a 2400 pixel width and >> since your computer screen can ONLY show the dpi it was designed for, the >> image appears much larger so it can display all of the pixels. The printer >> would be told to use 600 pixels per inch, but your screen is a fixed dpi of >> probably 72 ~ 96 pixels per inch (or 160dpi for iPhone) so when it tries to >> show you the image at 100%, it's wider than your screen. >> >> When working on websites, don't even think inches at all. You can't do a >> photoshop mockup of a site at huge resolutions because the client wants >> posters of it, and then hope to shrink it down for the site. All of your >> graphics will get blurry. The opposite is also true; can't start at website >> resolutions and hope to print posters of it, it will become very pixelated >> with no smooth curves. Always work at the final dpi/resolution of your >> project (print or screen) and your prints will look great and your sites >> will look identical to your photoshop mockups. You cannot have one >> Photoshop file that will make both print and the site look good. One of >> them will suffer. If the final output is print, do it at least at 600dpi >> and realize the images will look humungous on your screen. If the final >> output is for screen (of any dpi) then dpi doesn't matter because 300 pixels >> wide will always show up on any screen as 300 pixels wide. If you were to >> sit 5 monitors/LCDs with different dpi next to one another, then the graphic >> would appear larger/smaller. You don't have any control over that. >> >> Since we are talking iPhone, as I mentioned before, just create an overall >> screen-shot mockup of your app that is the exact same pixel dimensions as >> the iPHone. It will physically 'look' larger on your screen, so you have to >> think in terms of percentage. Ie.the title in my title bar can't be too >> wide because it would overlap the back button I have on the left. Etc. You >> don't need to know how many pixels wide that is, it doesn't matter just use >> your eye. If your title looks about 50% the width of your 320 pixel wide >> photoshop mockup, it will look identically 50% the width of the iPHone >> screen when viewed on the iPhone. (*as long as you have entered the >> viewport meta tags correctly to ensure your site displays correctly) >> >> Dpi increases the clarity for print, not for screen. If you have a 2400 >> pixel wide image and try to scrunch it down to display at only 300 pixels >> wide, the screen device will have to adjust and try to compensate, dropping >> pixels, merging pixels etc.. It will not look exactly like the image done >> in your image editor. Fonts are a different beast and a different >> conversation. >> >> Quite the contrary: this is a time when you shouldn't think about pixels and >> inches at all. That is why you are confused about it all. The iPhone has >> no clue what inches are. It only understands pixels. Just so you don't >> confuse yourself anymore, do all of your iPhone graphics at 160dpi and be >> done with it. Yes, it will look bigger on your computer screen. That's >> because each one of your computer screen's pixels are physically bigger than >> the iPhone's, and there are less of them per inch. If you load in some of >> the buttons pulled from the iPhone disk image (do a search on it if you >> don't have it, can't recall where I found them) into your Photoshop mockup, >> you can clearly see how big a button should be when viewing at 100%, how >> tall rows should be etc. so they still are touchable on the iPhone. >> >> Work at 100% zoom in Photoshop so each pixel in your image can sit nicely in >> its own pixel on your screen. Viewing at 50% zoom means the computer has to >> scrunch 4 pixels from your image into one pixel on the screen. >> >> Hope that all makes sense. Good luck. >> -=Randy >> >> On 7/20/07 5:33 AM, "Matt Rehkopf" <[EMAIL PROTECTED]> wrote: >> >> >> >>> I think where I get hung up is on pixels vs. inches. Pixels are fine >>> for desiging how the page will look, but it is not for how it will be >>> touched. On screen, the 320x356 size image looks like there is more >>> room to touch because it is larger than the physical size of the >>> iPhone screen (2" x 3"). But if you go on pixels alone, you could >>> create buttons that look large enough on screen but are too small to >>> touch when seen on the iPhone. It feels like we need to accomodate >>> both the visual size of the design (pixels) as well as the >>> touchability of areas when we design (inches). >> >>> Also, I had someone else tell me the dpi also increases the clarity of >>> items on screen. So, a designer could opt to use a small font (5pt) >>> that she would never use for a 72 dpi monitor because it will appear >>> clearer and therefore more legiable. >> >>> Sorry if I am sounding ignorant on dpi and resolution (I am an IA >>> after all and not a designer), but it seems like this touchable >>> browser screen is the first time where we need to be concerned about >>> both pixles and inches. >> >>> *My visual input device (eye) is measured in pixles, but my pysical >>> input device (finder) is measured in inches.* >> >>> On Jul 20, 1:41 am, Randy Walker <[EMAIL PROTECTED]> wrote: >>>> I agree. >> >>>> Also when working on the graphics on your computer, make sure to view the >>>> file at 100% zoom, ie.in Photoshop. That way every pixel will get it's own >>>> pixel on the screen and there won't be any blurriness or jaggies etc. I >>>> have seen people load a large graphic into Photoshop and then shrink down >>>> the image window so it looks about the size they want it to look. Or zoom >>>> out to like 50% or 66.6%. Or upload a larger dimensioned image to the >>>> server and have the browser rescale it down, thinking it will look 'better' >>>> somehow because of the 'higher resolution.' Do not do any of those things. >> >>>> The graphics will naturally appear larger on your computer screen than on >>>> an >>>> actual iPhone if the screen is less than 160dpi, which most monitors/lcd's >>>> are. So, on your computer, a 300pixel wide image done at 72dpi will look >>>> identical (will be identical) to a 300pixel wide image done at 160dpi and >>>> they would both take up the same amount of real estate on your screen(s) >>>> because both are 300 pixels wide. >> >>>> Dpi really comes into play when dealing with graphics for scanning/print. >>>> Ie.scanning a 4" wide picture at 600dpi would print out an almost identical >>>> 4" replica. Scanning the same 4" wide image at 72dpi would look horrid >>>> when >>>> reprinted at the same size. >> >>>> You can simply create a 320x356 (for portrait with the top toolbar in >>>> place) >>>> image at whatever dpi you like, and as long as it's viewed at 100% scaling >>>> on your computer monitor, you can get a gist of how big percentage-wise >>>> each >>>> individual graphic element should be for your design. >> >>>> There are countless articles/tutorials online that go into much more depth. >> >>>> -=Randy >> >>>> On 7/19/07 8:26 AM, "Michael Geary" <[EMAIL PROTECTED]> wrote: >> >>>>>> From: Matt Rehkopf >> >>>>>> I have been wondering about what actual resolution size to do >>>>>> design comps in. Are your pixel measurements based on 72 dpi >>>>>> or the iPhone's 160 dpi? >> >>>>> Pixels are pixels. DPI doesn't even enter into the equation. >> >>>>> A 320x480 bitmap at 72 DPI is the exact same image as a 320x480 bitmap at >>>>> 160 DPI, or 300 DPI, or any DPI. >> >>>>> If you create two bitmap images with the same pixel dimensions and >>>>> content, >>>>> but two different DPI settings, save those to .bmp or .png format, and >>>>> then >>>>> do a binary compare of the two files, you'll find that the files are >>>>> identical except for a number in the header. >> >>>>> That's all "DPI" is, a number in the file header that image processing >>>>> programs may use for things like determining print size. But it doesn't >>>>> change the image content at all. >> >>>>> You could create your comps with any DPI setting and it wouldn't make any >>>>> difference, as long as the number of pixels is correct. (I'm not saying to >>>>> use 320x480 - obviously you need to use the smaller sizes posted earlier >>>>> that take toolbars into account.) >> >>>>> -Mike- Hide quoted text - >> >>>> - Show quoted text - > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en -~----------~----~----~----~------~----~------~--~---
