PNG compression and iOS apps

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.

Photoshop Actions & Workflows

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.

Everything is a grid

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

“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.

Exporting from Photoshop

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 Podcast

Iterate is a new fortnightly podcast, focusing on mobile and app design for all iOS, Mac, Android and other platforms.

Pixel perfect rotation

If you’re not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel mashing fashion.

Pixel perfect vector pasting

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.

Pixel perfect vector nudging

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.

Designing for Retina display, part two

Answers to some of the most common questions I’ve been asked since writing the initial Retina display article and Smashing Magazine article.

The life and death of a fake hotdog app

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?

What if iChat was one window?

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

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.

Designing for Retina display

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.