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 -~----------~----~----~----~------~----~------~--~---
