Build Better Interfaces

Ronan Rooney
Jul 29, 2015 · 2 min read

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.

BPXL Craft

Design and technology articles from the Black Pixel team.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store