How to change thin image to fat image in iPhone SDK?

How do I maintain pixel perfection when scaling the layout of a mobile app design?

• I have some problems with scaling the design for android/ iPhone app projects (Photoshop). Here are my hazy points: 1. I've designed an android app I in MDPI size and need to scale it up to HDPI (1.5X), XHDPI (2X), XXHDPI (3X), XXXHDPI (4X) to fit all screen sizes.  Am I supposed to go Photoshop: Images --> Image size and change it to %200 and so on? ----------------------------------------------------------------------------------------- 2. After scaling, Some shapes aren't pixel perfected and some are, I don't know why is this. What's the reason just some shapes become anti-aliased and how to pixel-fitting all anti-aliased shapes to look crisp?  Is the only way using "Direct select tool (A)" and nudge, making the whole process manually? It's so troublous. What's the rule of "Align Edges" option in this concept? Is there any way to apply this option on all current shapes with one click or something near that? ----------------------------------------------------------------------------------------- 3. What to do with texts after scaling? I can't select text with "Direct select tool (A)" for manual pixel-fitting at least. What's the workflow to avoid texts being unaligned from pixels and align them in case they'd be? ----------------------------------------------------------------------------------------- 4. If we forgot to enable "Align Edges" before drawing a shape, Does it affect on currently drawn shapes? It behaves strange an do not fix anti-aliasing. See blow example: Initial shape (it's built up of tiny squares merged to a single shape with Ctrl+E): The shape After Free Transform with saved dimension ratio (with "Align edges" disabled): Free Transformed shape with "Align Edges" enabled: As you see after scaling the shape, The edges became blurry and even with enabling "Align Edges" squares just moved up a little but edges weren't being aligned really. ----------------------------------------------------------------------------------------- 5. Do the patterns behave like vectors and shapes? For example, if I define a pattern from top shape (squares) and apply that pattern to a layer, Could I scale up the layer without being worried about decreased quality? Although I had issues with scaling the pattern in the layer style (not scaling the whole layer), And the squares in the pattern had blurry edges in any pattern scale except %100! ----------------------------------------------------------------------------------------- 6. Actually, I combined a set of tiny square together instead of making a pattern for the above reason, I wasn't sure whether patterns are vectors and causing blurry edges or not, However I got the same result as be saw in the top images. (Does creating a smart object instead of merging the squares make changes?) How could I resize the shape without getting messed up result with tiny squares? ----------------------------------------------------------------------------------------- 7. What about bitmap images in the scaling workflow; Sometimes there are bitmap images used in our UI mockup (i.e. To demonstrate slideshow), If the image was big enough itself to cover the largest document, but we resized it to use in the smallest document (MDPI for Android), Does it regain its quality after scaling up the document or it loses its early quality information and initial dimensions after being resized yet is saved in a PSD file? ----------------------------------------------------------------------------------------- 8. Is It useful to convert primary bitmap image to a smart object so the smart object getting resized during scaling the document? Is there any difference in this case with normal bitmap image resizing?   Sorry it became prolix :) Thanks in advance

• Answer:

  Check out this Reddit thread, it helped me understand how to scale things easily for mobile: http://www.reddit.com/r/graphic_design/comments/1ulhbp/trying_to_wrap_my_brain_around_android_design/ The only size you really need to redraw or use pixel-hinting for is the 1.5x (HDPI) for Android screens. I'm actually curious how common the 4x (XXXHDPI) resolution is... (http://www.androidpolice.com/2013/07/25/xxxhdpi-spotted-in-4-3-source-prepare-your-eyeballs-for-android-in-4k-resolution/).