What ppi to design with for retina displays?

Discussion in 'Design and Graphics' started by djsound, Aug 31, 2011.

  1. djsound macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #1
    K I have googled a bit but this is confusing....I am trying to design the cover art for my new podcast but...I dont know what ppi to make it at. I did it at 72 ppi....600x600 and when I look at it on my iphone 4 it still isnt perfectly crisp on the retina display. I think the retina display can show like 320 ppi .....anyone know settings for getting a good crisp retina worthy image on my iphone? thanks
     
  2. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
    #2
    well, a 100 dpi jpeg of 300x300 pixels will be 300 pixels wide on an iphone,
    a 300 dpi jpeg of 300x300 pixels will be... 300 pixels wide on an iphone.

    So, for websites (as with any screen media measured in pixels) it doesn't matter.

    Now in SVG, PDF etc.. that's a different matter.
     
  3. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #3
    K so how do you take advantage of the retina power? How do they make the icons so crisp?
     
  4. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
  5. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #5
    After reading that, I guess anyone who wants "quality" is s.o.l. Unless your making something that could be done as a vector. My podcast cover looks like a movie poster with abstract art and a lot of shadowing. No way it could be done with vectors so I guess I am stuck with Microsoft type quality.... I guess I bought a phone so my icons could be great quality and other things not great.
     
  6. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
    #6
    nope, you can design it right: you just have to get the size of the image (for example 260 pixels) and design the image (png, jpg) at exactly that pixelsize.
     
  7. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #7
    so still do it at 600 x 600 pixels but 320 ppi...from the start and I should be good? Thats kind of impossible I guess since I only have the image at 72 ppi @ 600x600. If I increase the ppi then image size will be a lot smaller ..oh well. Learned somethng for next time. Thanks :cool:
     
  8. atari1356, Sep 1, 2011
    Last edited: Sep 1, 2011

    atari1356 macrumors 68000

    atari1356

    Joined:
    Feb 27, 2004
    #8
    The "pixels per inch" or dpi is irrelevant.

    600 x 600 pixels is the same size on a screen whether it's 72dpi or 320dpi. So, 72dpi is fine.

    Just follow Apple's guidelines and make the image look great at 600 x 600... and have it be something that looks good when scaled down to smaller sizes.

    Apples guidelines on podcast images:

    Create a graphic for your podcast that is easy to recognize when scaled down to 50x50 pixels. Good art communicates the value of the podcast with a simple picture and a few words. Before you create your podcast art, go to the Podcast page in the iTunes Store, click on Top Podcasts, and note which art works best and why. We recommend a 600 x 600 pixel JPG for cover art. You can also use images at the episode level.

    As far as I can tell... the preview images for podcasts are automatically scaled down for the appropriate device by the iTunes store. Looking at podcast listings in the "iTunes" app on my iPhone 4, the images are all displayed at retina quality. My guess is that the iTunes store creates various thumbnails when you submit your image. Which means that they scale down your 600 x 600 image to create a 50 x 50 pixel thumbnail image that's displayed on a non-retina device, and probably a 100 x 100 thumbnail image (double the size) to be shown on retina devices. (plus other thumbnails sizes depending on the screen in iTunes)

    In short, don't worry about what it looks like when viewing it in the "Photos" app or another app on your iPhone 4... just make sure it looks good at 600 x 600 on your computer, and that it still looks nice if you shrink it down to 50 x 50 with your image editing software.
     
  9. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
    #9
    You're not getting it.
    PPI means pixels per inch.

    An image 800 pixels wide is going to be 800px wide at 300PPI, and 800px wide at 1200PPI.. You only have 800px.

    If you want to make a retina wallpaper for example, you save it at 640x960. The PPI setting can be ignoreer, set to 1, or set to 300, ti's all the same...
     
  10. djsound, Sep 1, 2011
    Last edited: Sep 1, 2011

    djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #10
    atari - most of those podcasts that you download are made in the "pre-retina" days and you can tell. They are good but not retina quality. I followed Apple's recommendations for podcasts and it gave me the "pre-retina" quality...just look at any lines that are 1 or two pixels....they blur....the retina quality images do not

    svp - i undertand that on a computer screen it displays at 72 dpi...but the retina is double that...so how could using a 72 dpi look ok on a retina? I dont think so. My image might not look so great because it was 612 x 612 ...not 640. So it had to stretch a bit?

    I just looked at the same image in gmail (where it does not stretch it to fit screen horizontally) and it looks perfect. ...vs. as a wallpaper or podcast image (where it DOES stretch it to fit screen horizintally). Thats where I was going wrong I guess. thanks guys! Apple needs to update thier recommendation from 600x600 to 640x640..
     
  11. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #11
    Actually, computer screens vary on the actual PPI (pixels per inch is more accurate the DPI). It also matters what screen resolution you are set to.

    PPI/DPI are terms of measurement when describing the output/display of an image. (or input, too, for example when scanning something in)

    Maybe an example would help...

    Using my MacBook Pro, I just created a graphic that is 500 pixels wide. When I measure it (using an actual ruler!), it is 3.875" on my screen at the native resolution. (1680 x 1050)

    Some rough math shows that I am viewing this image at 129 PPI (horizontal PPI only, just to keep this somewhat simple).

    If I change my resolution to 1024 x 768 (ugly on here!), now that image is 6.375" wide and approximately 78 PPI.

    Here are the actual PPI stats that I found online. Not sure how to verify them, as I only have a iPhone 3G. :eek:

    iPhone 3GS - 163 ppi

    iPad - 132 ppi

    iPhone 4 - 326 ppi

    Hope that helps!
     
  12. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
    #12
    Try it; save the 640x640 @ 72PPI And at 1200PPI And compare... PPI is irrelevant.
     
  13. hehedavid macrumors newbie

    Joined:
    Jan 14, 2008
    #13
    Don't worry about the device's pixel density. A pixel is a pixel.

    @72 DPI
    app - 640x960px
    icon - 114x114px
     
  14. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #14
    Apparently I am still missing something and it's starting to really bug me hehe. I made the image at 640 x 640 and at 72 ppi. Then I tested it by viewing it through my photo library on my phone. It still looks a tiny bit fuzzy....then I emailed it to my friend through gmail and when I open the gmail message on my phone it shows the attachment and it is PERFECTLY clear...and crisp. Id like to know what gmail is doing any different....I can not seem to get it crystal clear through photo gallery on the iPhone 4 ...it shouldn't be stretching it or anything since it is 640 ....correct?

    If anyone is interested, email this image to yourself and check it though gmail on your iPhone 4 ..you can really see int he top thin font that it will be crystal clear...VS. through your photo gallery.
     

    Attached Files:

  15. gullySn0wCat macrumors 6502

    Joined:
    Dec 7, 2010
    #15
    It looks fine to me. Obviously thin fonts will look bad at smaller sizes (you cannot have a line thinner than 1pixel...)

    Your possible solutions are:

    Use a larger font
    Use a phatter font
    Stop caring what it looks like in the photo gallery (that is not a real life viewing scenario anyway. Number of your listeners who will view this there:0)
     
  16. SvP macrumors 6502

    SvP

    Joined:
    Mar 31, 2009
    #16
    Looks good (you have it at the right size, ppi unimportant) so, perfect.
    The rest is font use and design sense, use less different sizes, use a fatter font etc, as gullySn0wCat said.
     
  17. djsound thread starter macrumors 6502a

    djsound

    Joined:
    Dec 4, 2006
    #17
    ya it turned out fine. once uploaded it was fine, i guess photo gallery stretches pictures or something
     
  18. gullySn0wCat macrumors 6502

    Joined:
    Dec 7, 2010
    #18
    Photo gallery anti-aliases them sometimes, which can look really bad.
     
  19. StrudelTurnover macrumors regular

    Joined:
    Feb 25, 2008
    #19
    This MSDN blog is fairly old now, but it does help explain why Apple championed 72ppi, how 96ppi came about on Windows, and why PPI/DPI still remains irrelevant when it comes to images on a screen. ;)
    http://blogs.msdn.com/b/fontblog/archive/2005/11/08/490490.aspx

    With fonts it matters a great deal, but that's a whoooooole nother thread!

    Unless you design typefaces or manufacture monitors, just don't worry about PPI and be happi. :D
     

Share This Page