Build Better Interfaces

Using Photoshop Linked Smart Objects

Software design is made up of patterns. First, we repeat the patterns established by a platform’s design guidelines. Then we create elements and repeat them, identically, across applications. All of this creates a visual rhythm that helps our users understand and be at ease with the software. For those of us who use Adobe Photoshop to design software, linked smart objects are an unmatched tool to create a better, more efficient visual rhythm.

Linked smart objects allow you to link to a file saved on your computer or in the Adobe Creative Cloud. This approach should be intimately familiar to web designers, Adobe InDesign users, and others who link media into their work. For app designers in Photoshop, it’s a tool to get better control of the things we repeat the most: icons and navigation elements.

For example, when I start designing an app’s interface, I create my navigation bar in a stand-alone Photoshop document called navbar.psd. I link that single document across all my compositions where I should see a navigation bar. Now, I can quickly repeat things like navigation bar color, opacity, and layout across all my screens just by updating navbar.psd. I do the same for all my iconography to ensure consistency, but also because I can simply export the linked icon file to get my finished asset.

This tool reaches another level of power when you include layer comps in your linked smart objects. Let’s say I’ve got two layer comps in navbar.psd, and I’ve linked them inside another document. I can go to the Properties panel and choose which layer comp to see. This ability is invaluable and saves a tremendous amount of time.

Instead of creating one huge, bloated Photoshop document containing all the designs for an app, linked smart objects decentralize the storage of all that design work. This approach is really helpful for designers working together on a single app. Stuart can edit navbar.psd while Jillian edits home.psd. Neither designer overwrites the work of the other. Plus, with a tool like Github, you could file manage the versioning of these linked documents.

Many of us have created enormous Photoshop documents for years, but it’s no longer the most efficient way to build software designs in Photoshop. We design with patterns, repetition, and rhythm. Using this method of linking ensures better control to achieve visual harmony.