I’m going to come straight out and say it—if you’re spending any effort compressing or optimising your PNG images for iOS app development, you’re wasting your time.
Over the last few years I’ve built a small set of Actions that I use daily. While they don’t save much time individually, they do seem to reduce the cognitive load a little by removing the need to remember best practice for each step.

When you design or build a website, app, icon or UI element, you’re designing to a grid. It doesn’t matter if that grid is pixels, points, percentages, inches, centimetres or some other kind of measurement. It can be as abstract or specific as you like. It’s still a grid.
The unit of measurement, the positioning and how the design grid relates to the way things are eventually displayed on the screen make a big difference to the image quality of the result. This is true if you’re drawing everything in code, everything with vectors, or using bitmaps. The important factor is how the design grid relates to the screen grid.

“Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer.”
Nondestructive editing? Sounds great! Proceed with caution though.
Congratulations. You’ve just completed a pixel perfect app mock up and you have the nod from everyone on the team, so all that’s left is saving the tens, hundreds or maybe even thousands of production assets required.
It’s probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. However, there are ways to streamline or automate exporting.
Iterate is a new fortnightly podcast, focusing on mobile and app design for all iOS, Mac, Android and other platforms.

If you’re not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel mashing fashion.
![]()
If you’ve drawn pixel snapped artwork in Illustrator and pasted it into Photoshop as a shape layer, you may have noticed that the results can vary from exactly what you’d expect—a perfectly sharp image—to a blurry mess. Here’s how to fix that.
Below is some artwork as it appears in Illustrator. Perfectly formed, snapped to the pixel grid, and at the size we intend to use it in Photoshop.
![]()
When nudging vector points, Photoshop exhibits some strange behaviour, linked to how far you’re currently zoomed in. At 100%, nudging using the arrow keys will move your vector point exactly 1 pixel. At 200%, nudging moves the point half a pixel. At 300%, it’ll move a third of a pixel.
Answers to some of the most common questions I’ve been asked since writing the initial Retina display article and Smashing Magazine article.
Everyone and everything has a lifespan. Software is no different. How well will the Mac App Store fare for the most common business model for desktop apps?

With all the service buddy lists and one tabbed chat window open, iChat has many duplicated elements, including four status dropdown menus and my own name repeated at least three times. That might be handy for those suffering amnesia, but most of us don’t have too much trouble remembering our own name.
Gradients are a great way to add lifelike lighting and shading to surfaces. When built with gradient layers and layer styles, they also ensure UI elements can be scaled and reused easily.
Building apps for the iPhone 4’s Retina display means building two sets of images—one at 163ppi and another at 326ppi. After slugging our way through an app build or two, we feel confident that we have a decent workflow for attacking future Retina display app designs. Hopefully this information is of use to other designers.

Design articles
Designing for Retina display, part two
An iPhone 4, without the queue
What to do with all those extra pixels?
Colour management and UI design
Testing landscape app interfaces
How many layers are in my Photoshop doc?
App Store articles
The life and death of a fake hotdog app
The settings used to be in the Settings app
Mobile and portable app store round-up
Bjango articles
2009: Our first year as Bjango
The moon phase during the moon landing
About the author
Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango.
Follow us