Designing for iPhone 4 Retina Display: Techniques and Workflow

Advertisement

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

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

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

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

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

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

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

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)

↑ Back to topShare on Twitter

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

        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

    “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

        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

            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!

            0
    • 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

    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

        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

    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
  21. 56

    Interesting article. I’m not an app designer myself, so I could be wrong here. But it seems all this messing around trying to get things pixel-perfect (instead of those dreaded half pixels), could be much simplified by using Fireworks.

    It has a unique mix of vectors and pixel-precision that I have found extremely useful for web work, it seems like it would apply very well to app design too.

    0
    • 57

      I’m agreed on this. FW works much better in pixel-perfect editing and finishing. It was way much simple than editing raster pixels.

      0
    • 58

      Both Fireworks and Photoshop get the job done and have the right tools (vector objects with layer styles). It’s just a matter of which tool you prefer. I know designers doing brilliant working in Fireworks, but I also know designers doing brilliant work in Photoshop.

      0
  22. 59

    Why everyone just talks about the retina display of Apple and no one talks about, for example, the Super AMOLED from Samsung? The resolution is outstanding, and surely deserves an article too.

    0
    • 60

      Why he got voted down?
      Because he mentioned another technology? Another brand?
      Since when Smashingmagazine become brand oriented?

      0
    • 61

      Rizqi Djamaluddin

      November 18, 2010 7:20 am

      Mainly because of the popularity of apps for iOS (not saying that the others don’t, but simply because of its popularity).

      Also, the iPhone, as of December last year, has had over 40 million sales, not to mention iPod Touches also using the app store. The Galaxy S has about 5 million sales worldwide as of October.

      (Citation on iPhone sales: http://bit.ly/aGNt6M ; Citation on Galaxy S sales: http://bit.ly/aGNt6M)

      0
    • 62

      Because specs don’t matter. iOS is very popular, and the high-density LCD is good enough. It’s a world of difference in comparison to previous models’ screens. It may or may not be as “good” as AMOLED, but the iPhone/iPod is what most people use.

      And yes, it’s a different brand. Developers and designers like working with Apple’s products. They’re elegant and a joy to develop for. Frankly, most other products just don’t compare in that area. There are no shortage of devices with fancy AMOLED screens other nifty features, but they are lacking in the OS department.

      0
      • 63

        Yeah, you just forgot to mention that the fancy device with Super AMOLED screen uses Android 2.2, and the Android Market is growing at incredible speed.

        0
    • 64

      There’s absolutely nothing wrong with Android and AMOLED screens, but the need for having @2x images and building to scale to exactly double the resolution is a requirement of iOS and the Retina screen. Android handles resolution a bit differently. Maybe that should be a topic for a different article?

      0
  23. 65

    TIP: To aid with vector object placement & pasting exactly. Under ‘Preferences > Guides, Grids & Slices’ set grid to Grid line very 10px with 10 subdivisions. When you turn grid on (command-’) and have ‘View > Snap To > Snap to grid’ turned on it becomes much easier to perfectly align & scale vector objects or modify the paths & points with direct selection tool.

    0
  24. 66

    I have read the article and can say that all the problems that appear using a photo editing tool (Photoshop) for UI design work must be solving using a UI design software (Fireworks).

    All the pixel perfect problem can be solved with the new “Snap to pixel” feature which is under Modify>Snap to Pixel or command+k (mac), control+k (Windows). It will save you a lot of time zooming in and moving the pixels.

    Then the export process. Just cut the design with the web slice tool and export. In addition you can optimize the slice for 8, 24 or 32 bit png (for UI).

    I have work with Fireworks for over 10 years and have see it’s evolution. Now I can tell you that the User Interface have become the the main field of the software. Even web design is a UI design + advertisement work.

    0
  25. 67

    Great article, and thanks for the info. As others have mentioned, many of these production issues could be resolved with Fireworks. Although you have done many stories supporting the value of FW, I find it interesting how so many designers continue to gravitate towards PS for projects (interface design) that clearly will be more efficiently produced in FW.

    0
  26. 68

    “…draw everything using code or vector-based images at runtime. It’s clean, simple and elegant. It lets you design or code once, and display at any resolution, even at fractional scales.”

    Yep. This is exactly why Flash needs to stay.
    Since Apple’s petty dismissal of everything Adobe, too many websites are trying to mimic Flash’s scalability with Javascript. The result is sluggish response on moderate-speed machines. And now there’s the problem of different sized mobile screens.

    0
    • 69

      Rizqi Djamaluddin

      November 18, 2010 5:25 pm

      I disagree; as stated in the article, most icon designers carefully craft their icons to be precise for a certain size. Icons simply don’t scale well; a small detail in a higher-resolution screen icon could easily get reduced to a blob of intangible pixels when scaled down. Or, a small icon’s simplified shape would get magnified to a bunch of shapes with no detail, if scaled up.

      So, even if you could use Flash for designing iPhone interfaces, you’d still probably use multiple bitmaps instead of a vector icon.

      0
  27. 70

    I’m also interested in why you recommend using Photoshop for creating scalable icons? I’m just interested to know, perhaps I have missed something that is better in Photoshop than in Illustrator…

    We in Guidesi have been with my associate graphic designer using Illustrator for some time to create icons and layouts that need to be scaled to several bitmap sizes. Although there are some problems (especially with older CS versions) with pixel accuracy in Illustrator, I’ve found it much more easy to use for design and scale graphics. And some minor mishaps are easy to avoid when you’re aware of them…

    However I’ve noticed that some customers and associates, especially in the Asian markets, do not use or even know how to use Illustrator, so for these kind of projects Fireworks or Photoshop is a better solution.

    0
    • 71

      Because a lot of people are familiar with Photoshop but not illustrator? I have plenty of Photoshop experience, but have never bothered to learn Illustrator. I can’t draw worth a darn anyway, so I don’t know how much reason there would be for me to try…

      0
    • 72

      Illustrator is a good tool for creating vector-based artwork, but not so good for entire, pixel accurate designs with the typical types of layer effects that are normally used. It also makes exporting even more difficult.

      I often use Illustrator for rough layouts and for complex single elements, but the final design (including folders for each app state) end up in Photoshop. It’s a very efficient way to go.

      0
      • 73

        Hi Marc, terrific post. I’m an Illustrator / Photoshop designer myself. Couldn’t help but notice how many designers are gravitating towards Fireworks. Makes me wonder whether I should pick it up, too. But then your post about how you design first in Illustrator then move to Photoshop was calming. Do you have an online videos of a small project of how you go between Illustrator and then to Photoshop? That would be terrific. Do you copy-paste objects between Illustrator to Photoshop? Or do you recreate everything in PSD?

        0
  28. 74

    It may come back to bite me later, but I use bitmaps. I design for the retina display and then scale it down for the older devices. Great article though, I might have to try some of the tips out.

    0
  29. 75

    Where did you get 1536 × 2048 from?

    0
    • 76

      Sorry, I must have been having a bad hair day! For reference that is QXGA. 1024×768 being XGA we can assume the Q stands for quad. ;) Hot res!

      0
    • 77

      1536 × 2048 is exactly double the iPad’s current resolution. The way iOS handles the Retina display on the iPhone 4 leads me to assume that the iPad will eventually have a Retina display that’s double the current resolution.

      1536 × 2048 on a 9.7″ display will be 264ppi, double the current iPad’s 132ppi. 264ppi is less than the iPhone 4′s 326ppi, but still high enough to be difficult to distinguish individual pixels, given the iPad’s typical viewing distance.

      Hope that helps!

      0
  30. 78

    Good article.

    But I take the same approach as redwall_hp, as it’s much easier to manage, and everything looks sharp.

    0
  31. 79

    Thank you very much! This is literally THE best article/tutorial I’ve read on this subject. Also the great comments and suggestions by readers make this EVEN better.

    My background is graphic design and I just started designing iPhone apps a couple months ago. For weeks I’ve been scouring the internet for good tutorials. None of them give a complete picture, and most of them don’t even touch on the resolution/ppi issues in any detail. Also info on the Apple dev site is a bit difficult to find and fragmented. For example the resolutions are listed in an article discussing the application icon, but not under the graphics section.

    I do find it extremely interesting that people are a bit divided on the need to have 163 ppi and 326 ppi files, instead suggesting 72 ppi is the way to go for everything. I hope we can all agree on best practices.

    Please don’t stop with this article! The more tip, techniques, and suggestions, the better. I look forward to hearing more from you and the community. Thanks everyone!

    0
    • 80

      Document PPI is an easy one to answer: It doesn’t matter.

      All that matters is the final pixel size of the images, so that’s what you should be mindful of. PPI is just a tag attached to the image.

      0
      • 81

        Hi Marc

        This is not exactly accurate, since you MUST always think of the platform you are designing for, pixel-density-wise.

        What might appear fine on your 72dpi display, might come out too small on higher density devices.

        This is especially true when designing for touch-screens, since you cannot allow your buttons be too small to be touched accurately.

        What I do, is zoom-out while working in photoshop to 33% or 25% (depends on the pixel density of the platform I design for) and try to imitate the REAL SIZE of the elements that will appear on the designated device. This way I make sure texts and buttons are not too small.

        0
        • 82

          Sure, you’ll need to do device testing for the end size. I’d rather see the design at 100% or larger when I’m working on it though—I want to see what the pixels are doing without scaling artefacts.

          Touch screen button or tap area size is quite easy to get right once you’ve done a bit of iOS app design. You just need to remember that the smallest tap area is about 40×40 pixels for non-Retina and 80×80 pixels for Retina. It’s also fairly easy to work out the smallest type sizes and not go below them.

          And again (can’t stress this enough) do some device testing by loading mockups onto a device to see how it looks.

          0
  32. 83

    Please forgive me being ignorant but I’m confused about one thing. Do you have to create graphics for both 1x and 2x for the same project?

    I’ve always thought that you only do the 2x and then ios does 50% scaling on the device…

    0
    • 84

      Yep, you need resources for both. All your images will have corresponding 1x and 2x files, like so:

      image.png
      image@2x.png

      If the iPhone scaled the 2x resource down, there would be bitmap scaling artefacts, which are quite obvious and undesirable. Using vectors with pixel effects (like Layer Styles) means your elements are scalable without the same kind of scaling artefacts.

      0
  33. 85

    Anyone who calls the screen a retina display is a ‘tard. It’s a nice screen, but it’s JUST a nice screen, not a ‘retina display’. More fancy words from steve jobs to impress the fanboys.

    0
    • 86

      It’s just like calling a specific car by its manufacturer’s name. In this case it means a specific resolution display on a specific device. It’s much easier than writing “the iPhone 4′s and newest iPod touch’s display” each time.

      0
  34. 87

    Thank you very much! This is fantastic!

    0
  35. 88

    I see that you design small and scale big in your practice but what is your practice for client side feeds that are not created on your end. Are you only accounting for the smaller size in this account knowing that when someone is using an iPhone 4 they will not see the same crisp graphic as your objects?

    0
    • 89

      Sorry, I’m unclear on what’s being asked. Can you please provide more information?

      0
      • 90

        I think he’s asking about client-provided assets like logos and assuming that they provided bitmaps instead of vectors.

        Given these assumptions, the answer is to always get images from the client as vectors.

        0
  36. 91

    I have to say this seems like a very long winded way of doing things. I do everything at 2x, then using cutups just save at that size, and save again at 50%. You know everything will look crisp and sharp, whether using illustrator or photoshop.

    I’ve never had any problems doing it this way on numerous apps. Set your key ui controls as on/off states on different layers and you can ensure everything is pixel perfect and good to go. This means you don’t need to make everything vector based (although I always use illustrator anyway).

    0
  37. 93

    My brother-in-law had reached across the aisle and punched me in the leg. He’d been trying to get my attention for a while.

    0
  38. 94

    Hi Mark,
    I’m clear with images sizes, but what about div sizes?
    For example: I have div that has height: 100px; with image background. I make two bg images – 1x (100px height) and 2x (200px height). iPhone 3 will display this in correct size, but what about iPhone4? Will that div looks smaller, since the iPhone 4 has twice as many pixels in height??

    0
  39. 95

    Folks

    A bit confused here. Pls help. Designed first app for iPhone4. My PS file is set to 326 dpi and i designed the entire interface, including all UI elements.The app is now to be a web based app and will not be using any of the iOS ui elements. So i have cropped all the images as png (326 dpi) and laid out everything at 640 x 960 using Dreamweaver.
    However, everything looks shrunk when viewed thru the iphone4 browser, where as the very same layout as a single image is looking flush and occupies the entire screen. Looks great even when zoomed in as all elements are shapes.

    Obviously, i am doing something wrong here. My q. is if we are designing for only iphone4 and and it is a web based app or even a web site, what shld the photoshop artwork resolution be? Pls advise.

    regds

    0
  40. 96

    Had you built these images in Fireworks, exporting would not have been an issue.

    Plus, isn’t Fireworks better for this type of work anyway?

    0
  41. 97

    Oh and the resolution for the iPad might TECHNICALLY be correct, but do realize that as a designer you have to subtract 20 pixels to account for Apple’s header.

    So if you were to create a full screen web app, your screen size is 1024 x 748 / 768 x 1004

    0
  42. 98

    Excellent article Marc.
    Thanks for this. Learned a lot as I’m starting a new job for a studio who only does Mobile Apps.

    Thanks again.
    Cheers

    0
  43. 99

    Just a thought, but wouldn’t it make more sense, if you’re using bitmap images, to build the largest version first, then scale down?

    0
  44. 100

    Nice article, made me remember that I had something in my bookmarks…

    I found this Retina Display photoshop file on the web a while back (http://ios-blog.co.uk/resources/iphone-4-gui-psd-retina-display/) there ya go if anyone needs one :) – Ive used it a few times, quite nice – be warned though huge file not suitable for my slow lappy :/

    Thanks again :)

    0
  45. 101

    Thanks a lot for this great article.
    Even now, more than a year after it had been written, it was very helpful!
    The comments helped me out too.
    Cheers!

    0
  46. 102

    Amazing article and perfect steps. Saved me a lot of time and could do this without the help of any designer. Keep it up !!!!

    0
  47. 103

    If i understood this correctly than for web design we need just two set of images? One for desktop devices (72ppi), iPhone3 and Ipad and second for iPhone4 retina display (326ppi)? Please correct me if I get lost …

    0
  48. 104

    I usually use smart objects to help me handle exporting the png’s. For example.. you have a ui element like a button that has a mask, or a layer style on it with a glow, so its hard to get a good selection on it before hitting save-to-web. So, you can rasterize your object (or group or whatever) and create a smart object of whatever you’re wanting to export. Double click on that and then that creates a .psb file of the exact size of it. Boom no need to crop or use the selection tool. Just make sure you don’t save your file after you mangle your layers.

    0
  49. 105

    This article was very helpful. For everyone who is designing iOS Apps. I made a little crib sheet with the basic measurements and font sizes: http://cloud.niklausgerber.com/EENc

    I hope it might help.

    0
  50. 106

    A Fireworks user, I hit a wall today since I could not import an icc profile to match the iPhone’s! I’m sunk…

    0
  51. 107

    Thanks for the actions! Great help!

    0
  52. 108

    Thank you again for this brilliant article. It inspired me to write an article that will help you kickstart your design process for iPhone apps:

    Hope it will be helpful as well.

    0
  53. 109

    Derek Brooklands

    April 3, 2012 11:34 pm

    Solid tips and good reasons for making sure your site is ‘retina ready’. Thank you for sharing.

    -

    0
  54. 110

    great article marc..

    I am Beginner in Iphone application development. so any idea how to implement the the photoshop design in iphone application.

    thanks for posting this nice article.

    0
  55. 111

    Great article; I agree with almost everything. The one thing I don’t get is why so many designers swear by Illustrator. I should preface the following argument by saying I am a visual designer at a large mobile app company and I deal with creating mobile graphics for iOS, iOS@2X, and Android (both hdpi, and and xhdpi densities) on a daily basis, so I am not asking for advice on the differences between the two programs — I know them well — what I want to know is why so many designers use Illustrator; I don’t see it as a very useful application really.

    I Photoshop everything. I really don’t understand why people say “Illustrator is a vector application and Photoshop is for pixels” — when in reality, both applications do both, with a slightly different feature set and use case, arguably. I find Illustrator clunky, loaded with a lot of features I don’t care about, and I think its layering system is illogical (not to mention incompatible with other Adobe products’ layers). So, I also use Photoshop for creating mobile assets (even icons much more complicated than the box example); and I get creative with clipping and layer masks to maintain non-destructive source files.

    Are there any mobile visual designers out there who swear by Illustrator, or use a combination of Illustrator and Photoshop to cut mobile parts; and could explain to me somewhat concisely why it’s a better program for creating vector assets?

    0
  56. 112

    I have uploaded some of nifty Actions in Adobe Exchange, I have recorded these actions to help me in quicker extraction of mobile design elements from Photoshop files.

    Here it is,
    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=3203522

    Hope this helps others also.
    Robert

    0
  57. 113

    Wow…you sir, have predicted the future…

    0
  58. 114

    Hi!
    I have a question about font sizes, which I would be very happy if I could get answered.

    I have seen a couple of places that the minimum font size is 12 or 13 pt – is that for the iphone4 retina?

    So I can make it smaller for 320×480?
    A 12 pt looks huge in a 320×480 document.

    Thanks in advance!

    0

↑ Back to top