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