Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Retina Display ~ How to save images

LarsLars Posts: 183Registered Users @ @
edited July 2010 in iOS SDK Development
I'm trying to understand how to best save my images for the new Retina Display. I use Adobe Illustrator for my work. Should I be do either of these to save my images, or something else?

1) Resize the vectors images by 200% (so a 320x480 is now 640x960), reset my crop marks and save the image as a PNG. Should the image be 72DPI still?

2) Create a new document at 320x480 with a 300 DPI and move my images into that, then save the image as a PNG.

Also, I typically use the "Save for Web & Mobile Devices" options, which I believe is 72DPI. Should I stop doing that?

Thanks for your help. If you don't work in Illustrator, still share your thoughts as I'm sure they are universal to the problem.

Larry
Post edited by Lars on
·

Replies

  • LarsLars Posts: 183Registered Users @ @
    edited June 2010
    Okay, maybe there are no illustrator guys on here, but what are you guys doing it? Are you just ignoring the new iPhone and not updating for it? Are you waiting to see how your app will look on the iPhone first before making changes?

    What are you guys thinking about the new display?
    ·
  • Duncan CDuncan C Posts: 9,095Tutorial Authors, Registered Users @ @ @ @ @ @ @
    edited June 2010
    Lars wrote: »
    I'm trying to understand how to best save my images for the new Retina Display. I use Adobe Illustrator for my work. Should I be do either of these to save my images, or something else?

    1) Resize the vectors images by 200% (so a 320x480 is now 640x960), reset my crop marks and save the image as a PNG. Should the image be 72DPI still?

    2) Create a new document at 320x480 with a 300 DPI and move my images into that, then save the image as a PNG.

    Also, I typically use the "Save for Web & Mobile Devices" options, which I believe is 72DPI. Should I stop doing that?

    Thanks for your help. If you don't work in Illustrator, still share your thoughts as I'm sure they are universal to the problem.

    Larry

    Lars,

    You should double your pixel count in both dimensions. I doubt if DPI matters, but to be safe, double that figure, you want twice as many pixels in height and width, displayed in the same space.
    Regards,
    Duncan C
    WareTo

    widehead.gif
    Animated GIF created with Face Dancer, available for free in the app store.

    I'm available for one-on-one help at CodeMentor
    ·
  • SnappySnappy Posts: 27Registered Users
    edited June 2010
    I've just been reading more about this on the developer forums and the verdict seems to be that images are doubled in pixels as Duncan says, but they stay at 72 dpi.

    I'm going to wait for now. Because 2 sets of images are needed (one normal, one high-res) the file size of my app would be crazy. I was already worried about the size of it before this came along.
    ·
  • MarkCMarkC Yorkshire, EnglandPosts: 1,963iPhone Dev SDK Supporter, Registered Users @ @ @ @
    edited June 2010
    I'll wait to see what the apps look like on the new device before committing to updating the images with the @2x versions.

    If the upscaling of existing apps is anything as good as the upscaling some Bluray players do on old DVD's, no-one will notice lol. I'm sure Apple will have done their homework - they don't want a quarter of a million apps looking like crap on their new baby.
    neon_images_framed.jpg
    ·
  • LarsLars Posts: 183Registered Users @ @
    edited June 2010
    Thanks for the reply guys. I'm actually happy enough with how the majority of the graphics came out, but it's really clear which text was part of an image and which was drawn directly on the new phone. I don't think it is a killer, but I will update certain images with upcoming releases, overall though I am happy to see it's not an emergency to upgrade.

    btw, I'm sure others have seen this but they do have a good 50 minute review of this on the WWDC free documents and they go right along with what you guys are saying ~ 72DPI at double the pixels counts.

    Thanks again!
    ·
  • mkenneymkenney Posts: 76Registered Users
    edited June 2010
    I duplicated my Art Boards and then doubled the size. Seemed to work well. You should be able to ignore the DPI since its really just a frame of reference unless used for printing. How I remind myself is that the web is 72DPI in theory yet if you take a 72x72 pixel image to different display sizes/resolutions etc, the graphic will measure different on each of them. Please correct me if I'm thinking wrong, happens a lot!
    Mark<br />
    <br />
    <a href="http://itunes.apple.com/us/app/bugwar/id378346209?mt=8&uo=4"; target="itunes_store" target="_blank">bugWar by MechDog</a><br />
    <a href="http://itunes.apple.com/us/app/mytip/id346952226?mt=8&uo=6\" target="_b
    ·
  • JasonRJasonR San Diego, CAPosts: 1,587Registered Users @ @ @ @
    edited June 2010
    For an unrelated reason, I was saving my vector graphics as PDFs, and using them instead. I don't have my iPhone4 yet, but my business partner who does says the PDFs look great on the Retina Display, and I did not have to change a thing. Just another option if you already using vector graphics.
    My development blog: <a href="http://jrinn.com" target="_blank">http://jrinn.com</a>;
    ·
  • aldcorn@live.comaldcorn@live.com Posts: 554Registered Users
    edited July 2010
    Take a look at this video from iTunes U

    WWDC 2010 Session Videos

    Session 134 - Optimize your iPhone App for the Retina display
    ·
Sign In or Register to comment.