smashing-ebook-8

(Grace) #1

Final Check for iPhone UI


Your iPhone or iPod’s screen and calibration will likely be different from
your Mac or PC’s screen and calibration. I often import full-screen images
of the UI into iPhoto and sync them with an iPhone to see exactly how the
final interface will look on the device (on Windows, you can sync photos
using iTunes). This gives you another chance to make adjustments before
slicing up images or committing anything to code.


This article explains how to handle the problem that while testing some
landscape iPhone app interface mocks, they seem blurrier than they appear
in Photoshop.


Please note: For some bizarre reason, the Photos app on the iPhone doesn’t
display landscape images at 1:1. Instead, it scales them slightly or shifts
them to a sub-pixel position, making the images blurrier than they should
be. To avoid any issues, always save images in portrait mode (320 pixels
wide by 480 pixels high) to test your user interface mockups.


Conclusion


Now, you’re able to move bitmap and vector images between Photoshop
and Illustrator without any color shifts at all, and using any method. You’re
also able to grab a color using the color picker in Photoshop, and then use
the same HEX color value in your CSS, HTML, JavaScript, Flash or Objective-
C code, and it will match your images perfectly.

Free download pdf