Illustrator and app design
Using the right tool for the job is important. I use and love Illustrator for mock ups and broad conceptual work, but I prefer using Photoshop to create final image assets. Personal preferences aside, how does Illustrator stack up in terms of rendering quality? Should it be used for screen design?
Vector shapes in Photoshop CS6
Photoshop CS6 introduced many great changes for web and app designers. As part of the upgrade, the vector tools have been significantly revamped.
Photoshop CS6 improvements
The Photoshop CS6 beta is now available. It includes a ton of big and small improvements over previous versions. Here are the ones that matter to me, as an interface designer.
Pixels per inch is just a tag
Image pixel density for web and app design is often seen as a confusing topic. I’m not sure why this is — when stripped back to the bare essentials, the reality is far less complex than you might think.
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 probably 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?
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.
Design articles
Vector shapes in Photoshop CS6
iOS Photoshop Actions & Workflows
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
Dissecting iTunes and App Store links
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