Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing for iPhone 4 Retina Display: Techniques and Workflow

The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail — twice the detail horizontally, and twice vertically. For developers only using Apple’s user interface elements, most of the work is already done for you.

For those with highly custom, image-based interfaces, a fair amount of work will be required in scaling up elements to take full advantage of the iPhone 4 Retina display. Scaling user interfaces for higher detail displays — or increasing size on the same display — isn’t a new problem. Interfaces that can scale are said to have resolution independence1.

In a recent article, Neven Mrgan described resolution independence2: “RI [resolution independence] is really a goal, not a technique. It means having resources which will look great at different sizes.” If it’s a goal, not a specific technique, then what techniques exist? How has Apple solved the problem in iOS?

Fluid Layouts Link

While apps that take advantage of Apple’s native user interface elements require a lot less work when designing for the Retina display, we’re here to talk about highly custom, graphic-driven apps that need a fair amount of work to take full advantage of the Retina display.

While not strictly a resolution-independent technique, using a fluid layout3 can help an app grow to take advantage of a larger window or screen by adding padding or by changing the layout dynamically. A lot of Mac, Windows and Linux apps use this method, as do some websites.

This is partially how Apple handled the difference in resolution from iPhone to iPad — a lot of UI elements are the same pixel size, but padded to make use of the extra screen real estate. The status bar is a good example of this. It works because the pixel densities of the iPhone 3GS and iPad are similar (163 ppi vs 132 ppi).

Screenshot4
Full view5

Fluid layouts work when the change in density is minor, but aren’t any help with the iOS non-Retina to Retina display transition (163 ppi to 326 ppi). The image below demonstrates what would happen if an iPhone app was simply padded to cater for the higher resolution display of the iPhone 4. Buttons and tap areas would be the same size in pixels, but half the physical size due to the higher pixel density, making things harder to read and to tap.

Screenshot6
Full view7

Just-in-time Resolution Independence Link

Another approach to handling widely different resolutions and pixel densities is to draw everything using code or vector-based images (like PDFs) at runtime. Without trying to stereotype anyone, it’s usually the approach engineering-types like. It’s clean, simple and elegant. It lets you design or code once, and display at any resolution, even at fractional scales.

Unfortunately, using vector-based images tends to be more resource-hungry and lacks pixel level control. The increase in resources may not be an issue for a desktop OS, but it is a considerable problem for a mobile OS. The lack of pixel level control is a very real problem for smaller elements. Change an icon’s size by one pixel, and you will lose clarity.

Screenshot

Neven emphasizes in his article8 that:

“…it is simply not possible to create excellent, detailed icons which can be arbitrarily scaled to very small dimensions while preserving clarity. Small icons are caricatures: they exaggerate some features, drop others and align shapes to a sharp grid. Even if all icons could be executed as vectors, the largest size would never scale down well.”

Although here he is talking exclusively about icons, his description is apt for most UI elements. The decisions involved in scaling are creative, not mechanical. Vector-based elements aren’t suitable for all resolutions, if you value quality.

Ahead-of-time Resolution Independence Link

The best quality results — and the method Apple chose for the iPhone 3GS to iPhone 4 transition — comes from pre-rendered images, built for specific devices, at specific resolutions: bespoke designs for each required size, if you will. It’s more work, but pre-rendering images ensures everything always looks as good as possible.

Apple chose to exactly double the resolution from the iPhone 3GS to the iPhone 4, making scaling even easier (different from the approach of Google9 and Microsoft10 — notice that this article is not relevant to the latest version of Microsoft’s mobile OS — proving yet again that controlling the entire stack has huge advantages).

Screenshot

Currently, there are three iOS resolutions:

  • 320 × 480 (iPhone/iPod touch)
  • 640 × 960 (iPhone 4 and iPod with Retina display)
  • 768 × 1024 / 1024 × 768 (iPad)

In a few years, it seems highly likely that the line-up will be:

  • 640 × 960 (iPhone/iPod touch with Retina display)
  • 1536 × 2048 / 2048 × 1536 (iPad with Retina display)
  • Some kind of iOS desktop iMac-sized device with a Retina display

There are significant differences between designing iPhone and iPad apps, so completely reworking app layouts seems necessary anyway — you can’t just scale up or pad your iPhone app, and expect it to work well or look good on an iPad. The difference in screen size and form factor means each device should be treated separately. The iPad’s size makes it possible to show more information on the one screen, while iPhone apps generally need to be deeper, with less shown at once.

Building Designs That Scale Link

Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution.

When it comes to building UI elements that scale easily in Adobe Photoshop, bitmaps are your enemy because they pixelate or become blurry when scaled. The solution is to create solid color, pattern or gradient layers with vector masks (just make sure you have “snap to pixel” turned on, where possible). While a little awkward at times, switching to all vectors does have significant advantages.

Before anyone mentions it, I’m not suggesting any of the methods are new; I’m willing to bet that most icon designers have been working this way for years. I’ve been using vector shapes for ages too, but the Retina display has changed my practice from using vector shapes only when I could be bothered, to building entire designs exclusively with vector shapes.

I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles using the Rounded Rectangle Tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).

Screenshot11
Full view12

More complex objects get drawn in Adobe Illustrator to the exact pixel size, and then pasted into Photoshop as a shape layer. Be careful when pasting into Photoshop, as the result doesn’t always align as it should — it’s often half a pixel out on the x-axis, y-axis or both. The workaround is to zoom in, scroll around the document with the Hand Tool, and paste again. Repeat until everything aligns. Yes, it’s maddening, but the method works after a few attempts. Another option is to zoom in to 200%, select the path with the Direct Selection Tool, and nudge once, which will move everything exactly 0.5px.

Screenshot13
Full view14

Even more complex objects requiring multiple colors get drawn in Illustrator to the exact pixel size, and then pasted into Photoshop as a Smart Object. It is a last resort, though — gradients aren’t dithered, and editing later is more difficult.

If you need to use a bitmap for a texture, there are three options: use a pattern layer, a pattern layer style, or build a bitmap layer at the 2× size and turn it into a Smart Object. I prefer to use pattern layer styles in most cases, but be warned: patterns are scaled using bicubic interpolation when you scale the entire document, so they become “softer.” The solution is to create two versions of each pattern, then to manually change pattern layer styles to the correct pattern after scaling — a little tedious, but totally do-able approach.

Screenshot15
Full view16

Scaling Up Link

At this point, your document should be able to scale to exactly double the size, without a hitch.

Screenshot

I have a Photoshop Action set up that takes a History Snapshot, then scales to 200%. That means, previewing at the Retina display’s resolution is only a click away. If you’re feeling confident you’ve built everything well, you should be able to scale up, edit, then scale down and continue editing without degradation. If you run into trouble, a Snapshot is there to take you back. Using one document for both resolutions, means not having to keep two documents in sync — a huge advantage.

Screenshot

A word of warning: layer styles can only contain integer values. If you edit a drop shadow offset to be 1 px with the document at 2× size, and then scale it down, the value will end up as 1 px because it can’t be 0.5 px (a non-integer value). If you do require specific changes to the 2× version of the Photoshop file, you’ll have to save that version as a separate file.

Exporting, Exporting, Exporting Link

Now for some bad news: exporting all the images to build an app can be extremely tedious, and I don’t have much advice here to assist you. As my documents act as full screen mockups, they’re not set up in a way that Photoshop’s Slice feature is any use. Layer comps don’t help either — I already have folders for each app state or screen, so switching things off and on is easy.

The best export method seems to be: enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

The problem is amplified when saving for the Retina display, where there are twice as many images and the 1× images must match the 2× images precisely.

The best solution I’ve come up with so far:

  • Build your design at 1×
  • Use Copy Merged to save all the 1× images
  • Duplicate the entire folder containing the 1× images
  • Use Automator to add @2x to all the filenames
  • Open each @2x image and run the “Scale by 200%” Photoshop action. This gives you a file with the correct filename and size, but with upscaled content
  • Scale your main Photoshop design document by 200%
  • Use Copy Merged to paste the higher quality elements into each @2x document, turn off the lower quality layer, then save for the Web, overwriting the file.

In some cases, Photoshop’s “Export Layers To Files” can help. The script can be found under the File menu.

Mac Actions and Workflows Link

All the Actions and Workflows that I use myself can be downloaded from the blog post link below. The Automator Workflows can be placed in your Finder Toolbar for quick access from any Finder window, without taking up any space in your Dock.

Download: Retina Actions and Workflows.zip17

Screenshot

Fortunately, Apple chose to exactly double the resolution for the iPhone 4, and for using ahead-of-time resolution independence. As complex as the process is now, things would have been far worse if they had chosen a fractional scale for the display.
(rs) (ik) (vf)

Footnotes Link

  1. 1 http://en.wikipedia.org/wiki/Resolution_independence
  2. 2 http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
  3. 3 http://en.wikipedia.org/wiki/Web_design#Layout_types
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2010/11/lockscreen.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2010/11/lockscreen.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2010/11/phone-app-fluid.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2010/11/phone-app-fluid.png
  8. 8 http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
  9. 9 http://developer.android.com/guide/practices/screens_support.html
  10. 10 http://msdn.microsoft.com/en-us/library/bb278110.aspx
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2010/11/complexshapes.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2010/11/complexshapes.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd-consume.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd-consume.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2010/11/Retina-Actions-and-Workflows1.zip
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

  1. 1

    Nice one Marc,

    Good article, What are you going going todo now after the MacApp store?

    0
    • 2

      The Mac App store will be interesting. I think it’ll be a huge success, but quite a few of our apps probably wouldn’t pass Apple’s approval process. It looks likely that we won’t have many (or any) apps listed on the Mac App store.

      There’s also some issues regarding app updates that affect iOS apps, too (more info about the app update issue here).

      0
  2. 3

    Very useful info here. Great article! We have seen these on many apps for the phone/pad. Hopefully it will encourage ppl to get things done the right way. Thank you

    0
  3. 4

    Michael Burgstahler

    November 17, 2010 5:52 am

    Umm … why not do the UI design in Fireworks?
    We did this for our app Favorelli this year and were caught cold by the Retina display in April.
    Thanks to Fireworks’ unique merging of pixel-perfect control of _vector_ drawings, we were able to scale up s.th. like 800 UI ressources in 5 hours flat!

    Of course, not every UI element can be done completely in Fireworks. But still, this thing is a lifesaver!

    0
    • 5

      Fireworks is the way to go!

      0
      • 6

        Just finished enlarging around 120 UI elements for the 4G (well I did it few time before in the last 4 years – each time the screen resolution Doubled mainly for windows mobile and android).
        I do keep my graphics source in a single fireworks file with slices for export, when all your graphics are originally in vector, you don’t need to compromise on image quality and crispness, most images just scale to 200%, without any need to actually fix anything (in few cases an object size need to change in pixel or 2 to be actually 200%).
        For sure fireworks is the way to go (else you want to compromise on image quality)

        0
        • 7

          Michael Burgstahler

          November 18, 2010 6:27 am

          If only Adobe would stop to “innovate” the shit out of Fireworks.
          We’re still happily clicking along in good ol’ Fireworks 8. After this version, it went downwards and to Bloat Street (Creative Suite).
          Adobe could do us a favor and REFINE this stuff rather than EXTEND!

          0
          • 8

            Totally agree. CS5 is a waste of money. It has not changed the way I work at all and has slowed down my machine.

            If Adobe released CS6 as a faster, leaner upgrade, then I would be interested in upgrading. How much more crap can they cram into these apps before people move away.

            0
    • 9

      See thats a good point. Fireworks is perfect for building apps design because its by nature works with vectors. Im danish and in Denmark you see no designer using fireworks!!

      0
      • 10

        ehhh – not quite true Bo – I use Fireworks more then just occasionally ;)

        0
        • 11

          I’m a danish designer doing app design with FW – I think FW is excellent when it comes to exporting + the 9 slice scaling is awesome !

          0
      • 12

        Justin Roberts

        April 20, 2012 10:47 am

        Im in Denmark and only use Fireworks. Mind you i’m Australian not Danish. Fireworks is definitely a much more practical application to use for UI design. I’ve had a few issues here as other designers I need to work with can only use Photoshop. However, once I show them how much easier Fireworks is to use they change their tune ;)

        0
  4. 13

    Mike van Hoenselaar

    November 17, 2010 5:55 am

    This is a great post that lays down a easy path to walk for beginner iPhone and iPad designers. We are designing (mobile) websites for a long time but designing for the iPhone and iPad was completely different for us. It sure needed a lot of extra thinking and effort. Thanks again Marc for sharing this great article.

    Wat do you think of Apple TV apps ;-)? Another resolution to make apps for.

    0
  5. 14

    “Neven emphasizes in her article that:”
    Whoops, Neven is not a woman, but I’m guessing that’s a typo.

    0
  6. 16

    Jamie Brightmore

    November 17, 2010 6:31 am

    “Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution.”

    We are currently building our first iPhone app and have found that exporting at the correct pixel size, i.e, 320 × 480 (iPhone/iPod touch) & 640 × 960 (iPhone 4 with Retina display), at 72dpi gives you exactly the same results when previewing the app on the device.

    Any thoughts on this?

    0
    • 17

      Yes this is correct, we recently finished building an app for a large retailer using the very method you describe. 72ppi is the way to go.

      0
      • 18

        Jamie Brightmore

        November 17, 2010 7:15 am

        Thanks for confirming that. There seems to be a fair amount of confusion regarding this, even Apple’s documentation doesn’t give any answers as to the actual recommended export resolution.

        0
        • 19

          This often leads to confusion. Think of it this way: You have to produce your artworks with the amount of pixels the display can handle, e.g. 640 × 960.
          The ppi value is important to know about, but not crucial for your images themselves. It is only a spec of the display. Exporting images with a different ppi setting won’t affect anything as long as your image matches the correct pixel dimensions.

          0
          • 20

            Claude is correct, I used to think this mattered, but after a year of designing for iOS I have realized that the ppi setting doesn’t matter when exporting. all that matters is the number of pixels. Dpi makes a difference in print because you can print at different dots per inch, making the image larger or smaller.

            The iPhone and iPod Touch have specific number of pixels that cant be changed, and no matter what you set the ppi to, its still going on to the same number of pixels. as long as your document size is correct, it won’t make any difference what your pixels per inch is set to.

            0
          • 21

            Jamie Brightmore

            November 18, 2010 4:22 am

            Sure, this is what we realised. Thanks for the responses.

            Bizarrely, both my comments have got -1 (?) despite the fact I brought this point up and it should help others to understand resolution!

            1
    • 22

      Yes true, even if you design on the respective ppi’s let’s say 163 or 326 ,when all are exported as pngs or implemented on the actual app, *the ppi is ignored. so its also a nice way to just be in 72ppi and be sure that most graphics are shape layers and have snap to pixels on + scale styles. so when you upsale, its pretty neat ^^. *my new workflow*

      0
    • 23

      Thank you for this! I have been trying to figure this resolution thing out. The question is… does anyone know if this is the case for Android images as well? Is it only pixel dimensions that matter when creating hdpi, xhdpi and xxhdpi?

      Anyone have any ideas?

      0
  7. 24

    Very thorough article. If anyone doesn’t want to make the 2x retina size toolbar icons them selves than checkout this icon set of 350: //goo.gl/rMk08

    0
  8. 25

    Vectorial style elements in photoshop? in fireworks or illustrator would be faster and can being much more scalable and modificable

    0
    • 26

      All three apps can create vector elements. For entire app layouts, I prefer Photoshop. Some designers prefer Fireworks.

      I wouldn’t recommend using Illustrator for an entire app design—it’d be scalable, but it’d make other things far more difficult than building in Photoshop, in my opinion.

      0
      • 27

        I am with you Marc.
        I gave FireWorks a thorough try, and found it much harder to manipulate vector paths and vector masks than PhotoShop.

        From my experience FW’s biggest advantage is in prototyping, and using multiple states and pages. For pure GUI mockup design, for me – PhotoShop is the way to go.

        0
      • 28

        true marc, I really prefer ps over ai for this, but if I need to make a custom icon or glyph I might do it in illustrator cause of the better ways I can use the shapebuilder tools or path finder ^^.

        But I guess everyone has his/her own preference and I respect that

        0
    • 29

      Using illustrator for making UI is great !, One of the best advantage is the scaling of course, AND the multi-pages ! Now you could spot how are your page side by side… that’s create a big difference for the layout ! (I stopped to use photoshop for that reason, it’s too closed in comparison of illustrator)…

      and you could re-use your designed elements for other projets/clients…

      0
      • 30

        multiple pages in illustrator? – how does that work???

        0
      • 31

        You say can re-use for other clients means that Illustrator produce vector images that can be scalable to other dimentions? I think vector image is reusable than bitmap talk about dimentions and illustrator can do this than photoshop but in any problem especially in making layout design illustrator can’t do this as perfect as photoshop. This is my experience with both of software. I never try Firework, can they use for drawing like illustrator or designing like photoshop?

        Isn’t firework only do exporting images produced from ps and illustrator? I am confuzed…

        0
  9. 32

    Leonardo Rodrigues

    November 17, 2010 6:48 am

    Awesome article! Learned a lot.

    0
  10. 33

    Is there anyway to use the @2x-convention when making webapps? Is mobile Safari aware of this?

    0
  11. 34

    Slight inaccuracy, the article states that “in the future” the iPod Touch is likely to have a retina display.

    Unless my experiments in time-travel are finally paying off, the future is now and the the new iPod Touch’s have the full resolution of the iPhone 4.

    0
  12. 35

    Also never scale images down when exporting in Illustrator. Instead you should use Photoshop for scaling because for some reason Illustrator’s bitmap scaling is just horrible.

    0
    • 36

      Actually, I consider Adobe Illustrator the best application for web design. You are right, Images will look rough in Illustrator. Bitmap images will be pixelated, but when you are at the final version you rasterize the artwork and it will be “OK”. Or, you export to PSD (that’s a whole other discussion). When exporting from illustrator (PNG or other), use “Art Optimized (Supersampling) anti-aliasing” and your images will be as perfect as Photoshop, to the pixel (check artboards too). By default Illustrator uses Type Optimized. There are huge benefits to using Illustrator over Photoshop for Mobile/App design, but like I said, I think that’s for another discussion.

      0
  13. 37

    I wanted to back up Marc’s suggestion with respect to using a rounded rectangle as opposed to the ellipses to make crisper circles. After experimenting with the two in CS5, I found that a rounded rectangle with an arbitrarily large corner radius (300px or more) produced an aliased curve that approaches the chosen color at slightly more rapid intervals than a curve drawn with the ellipse tool (like an exponential curve). The appearance could be physiologically negligible on lower resolution displays but does produce a crisper edge. I’ll be adding this one to my tool box for sure. Thanks, Marc.

    0
  14. 38

    Jesper Rasmussen

    November 17, 2010 7:48 am

    Nice article.

    So, just to be sideways off the topic. The iPhone is nearly 4 years old and design for the small screen is almost every man’s job now.

    I am still wondering why Apple never-ever made an iPhone compatible version of their website. It’s so contradictory to the iPhone success.

    0
    • 39

      They did make an app for their store (macs, store locater, ect.) and they already have itunes and the app store so I’m not quite sure what else they need to make. They are more the app types than web apps.

      0
      • 40

        Jesper Rasmussen

        November 18, 2010 5:46 am

        Well, from a design AND communication point of view, that’s not a valid arguement.

        Apple as a company is known to do everything 110% including their own website. If you visit Apple’s website regularly, you will notice how much they go into the details. It’s one of their most important tools as a business to provide the much wanted WOW factor presenting astonishing products we can’t live without.

        So in that sense I am confused – and not impressed. Apple should be able to make a mobile website so clever and stylish that it gets an award at http://m.thefwa.com/

        A really good example is this one http://hyperakt.com/ and the mobile version here http://hyperakt.com/mobile

        0
  15. 42

    “When reading about screen resolution it’s easy to quickly become confused. The fact is the final exported file type on the iPhone is usually .png and Xcode doesn’t consider the ppi value saved when rendering images.”
    Source: iPhone and iPad Design Templates and How to Use Them (http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/iphone-design-templates/)

    “Our earnest bloggers are absolutely right in that ppi is irrelevant when you’re showing images on a screen”
    Source: http://blog.fotolibra.com/?p=309

    72 ppi works fine

    0
  16. 43

    Chris Zimnowski

    November 17, 2010 10:12 am

    Great article, though I don’t necessarily agree with the exporting section. I’ve been designing iPhone/iPad apps since the devices first came out and haven’t had any issues using the Slice Tool in Photoshop to extract assets by simply moving them off to the side and putting a slice around them. I find that this is the easiest way to get the graphics to the developers and to make quick updates.

    0
  17. 44

    Maybe I missed something but why not build at 2x and scale down instead of up?

    0
    • 45

      I believe it’s because the phone scales it automatically so what it looks like at 1x is the most representative of how it will look on both platforms.

      For normal raster graphics it’s better to scale down because the methods used to scale up guess what should be in the pixels resulting in a loss of quality. But in this case you won’t see that because of the scaling and it will just look clearer on the retina display.

      0
    • 46

      You could do that. If your document is constructed well, you can scale up and down throughout the process, giving you a nice preview of both sizes. I build at 1x initially mostly because that ensures everything is snapped to the 1x grid. If you build at 2x, then you have to ensure everything you do falls on an even pixel and all widths, heights and layer styles use even values. If you don’t, they won’t scale down—they’ll land on a 0.5px boundary, giving you a blurry edge. Sure, you can then fix it, but it’s just one more thing to worry about.

      It doesn’t matter either way, but if you do build at 2x, you have to be more careful.

      0
  18. 47

    Agreed with Hellohello… why scale up? Not sure about everyone’s background but I was always taught that it’s always more effective to scale down then to scale up… and if the end result is still 72dpi as long as you keep the 640 × 960 … then what is the BFD?

    0
    • 48

      Scaling up will not degrade the image quality because Marc is using smart object’s which are vectors.

      0
      • 49

        If you start with 2x and scale down to 1x technically you should be able to work with bitmap images as well as vector. Makes the argument for scaling down vs. up a little stronger. Either way you will need to tweak the images, and working in vector with photoshop is limiting and very painfull.

        0
  19. 50

    I have been designing iOS apps for over a year now and have finally got a workflow that is working well for me when designing for the Retina Display. I’ll share in case it is helpful to anyone here.

    I design everything at 640×960, I do use as many vector elements as possible, but when I can’t its fine, because I’m already at the higher resolution. Every once in a while I will scale the image down for reference to look at the elements at 320×480 (closer to physical screen size) then go back to full res to continue working.

    When everything is done I isolate each image that needs chopped (only leaving those layers turned on) then trim all transparent pixels, and use a shortcut to save for web and devices. I give it the name I want (including the @2x) and I copy the name without the @2x in it, and hit save. Then i hit my shortcut a second time and in the dialog box there is an option to scale it down by a percentage. I hit tab 3 times to highlight that field, change it to 50% and hit “command v” to paste the name in there to be sure its exact. This saves each element at the right resolution for older devices, and makes sure the names match.

    With the shortcuts I can do it all on the keyboard without touching my mouse (except to highlight the file name without the @2x to copy it), and it only adds about 3 seconds per image to chop it at both resolutions instead of just one. In the end I only design it once, and it doesn’t take more than a few extra minutes to save everything out at both resolutions. Hopefully some of you find this helpful, and if anyone has any better ideas I’d love to hear them, i’m always looking for ways to improve my workflow.

    0
    • 51

      Yup similar to how I work. Basically fireworks at 640×960 deign layouts and elements. Test at smaller size. Then when happy, slice and export, then run batch to scale out at 50% and rename to remove the @2x.

      This works pretty well in most cases but some assets may lose clarity depending on what’s involved.

      Then you enter the world of sprite sheets and the power of 2;) But depends on the type of app you are making

      0
    • 52

      The only issue with working like this is that you’re using the Save for Web & Devices to scale, which will use a bitmap scaling method (Bicubic, Nearest Neighbour etc). This will introduce some scaling artefacts and degrade the quality of your images.

      Unfortunately, it’s not the same as scaling down a vector with layer effects.

      (If you were happy with the results using bitmap scaling, you could just batch convert an entire folder of images. I’d advise against this though… using vectors is preferable.)

      0
      • 53

        “…scaling down a vector with layer effects.”
        Where can I do this on ps? The tools in the layer effect on layer panel?

        0
    • 54

      Here’s why Save for Web & Devices’ bitmap scaling is a bad idea: http://bjango.com/images/articles/designingforretina2/scalingtest.png

      The Bicubic and Nearest Neighbour versions have some significant quality loss, especially the text and near the top and right edge of the button. I realise that most text in your app will be generated by iOS, but the example still holds true—bitmap scaling hurts your images.

      0
  20. 55

    Great article Marc, always pumping out the good stuff.

    0

↑ Back to top