Retina resolution best method?

Todd Clary shared this question 6 years ago
Answered

I'm creating my iOS app's custom assets in Photoshop using an iOS 5 gui for retina display. The images are, of course, very high resolution. When I bring into JIM the .png files I've created in PS, they are considerably larger the the preloaded iPhone widgets. I am resizing and rescaling and am concerned I'm going to lose consistency and make mistakes doing it this way.


Since the assets I'm designing have to retina resolution shouldn't the widgets in JIM be as well? Am I missing something??


Help!

Comments (7)

photo
1

Safari, the web browser embedded in iPhones and iPads resize the components automatically from old resolution to the retina resolution. Of course there is loss of quality but it's more comfortable to prototype at 320x480 than in retina resolution. That's why we built the iPhone and iPad widgets that way.

photo
1

Thanks for the reply :)


I just want to make sure my process is the best one. If I design my app's graphics for the retina and then bring them in they're huge and in order for me to use them in JIM I need to rescale them


If at the end of my prototyping I'm collecting these assets to hand off to a programmer, aren't I inhibiting things? I mean, if I have to ultimately give my programmers full retina resolution graphics, don't I need to use those that I create? (I save them as png's in Photoshop and then drag and drop them into JIM.)


...as I write this, it occurs to me that my misstep may be in my expectation of JIM beyond its intent. That is, collection and providing for a programmer (or anyone else) the full compliment of design assets for a project. JIM is ONLY intending to demonstrate, correct?


That's still perfectly fine because it does a brilliant job :) I just want to make sure I'm not doing something redundant or missing an important step of function.


Thanks for your continued clarification!

photo
1

Yes, Justinmind is to demonstrate design and interactions and run user tests. It's not intended to be a deliverable of design assets.

photo
1

*smacks forehead*


Okay, now I understand :) I think I entered into it sort of like I work in Adobe InDesign where at the end of a project, all the assets are collected and compressed, etc., etc.


Absolutely still in love with the product and it's living up to itself 100%!


Here's what I'm going to do: Since I have to create the high-resolution assets anyway, I'm going to continue doing so in Photoshop, but then write a new Action which will copy the asset, down-sample it and export it to a new folder from which I'll pull assets into JIM. That way I don't double my work.


Thanks for helping me figure this out!

photo
1

You are welcome!

photo
1

In version 5.6 you can use retina assets in your prototype and prototype anything in retina resolution. Then, in order to visualize it correctly both on devices and emulators, you just need to go to Simulate - Simulation settings and set the 'Scale' property to 50%

photo
1

When you do this as you instruct in the last paragraph, the simulation resizes to half on the screen but the iphone 5s shell that comes with the software stays at 100%. Am I missing something?


36c42e67bc5f4499aec8eca9e4c6023e