Adobe recently released an update to Photoshop CC (Version 14.2) that included a highly requested feature called “Linked or Embedded Smart Objects.” The introduction of Photoshop Linked Smart Objects is a game-changer. It’s a feature that, for many designers and design teams, will save countless hours of repetitive work.
What is a linked smart object?
A linked smart object differs from a standard smart object in that the contents of the object are stored externally from the PSD where it is embedded. Linked smart objects can be embedded in the form of flattened files like JPG or PNG, other Photoshop documents (PSD), smart object documents (PSB), Adobe Illustrator Files, as well as other supported Photoshop formats. When you update your linked smart object file, the document in which it is embedded will automatically update so long as it is open when you save the smart object. If it was not open, your linked smart object layer will have a badge on it the next time you open it. Right clicking on the layer and clicking “Update Embedded Content” will sync your layer with the updated smart object file. If you have multiple embedded smart objects in a single document, you can right click a layer and choose “Update All Embedded.” I live for keyboard shortcuts, so I created an action to update all embedded objects and mapped it to the F19 key.
Syncing Complex Documents
Imagine you are designing a very basic website for a client that contains 10 unique pages. It’s likely that those 10 pages will each contain a common header area, a main body content area, and a common footer. If you’re like a lot of designers out there you will use one PSD for each page template because, let’s face it, working with extremely large and cumbersome documents is just no fun. After you design each of the 10 pages and show the client they decide that they want to change the name of one of the pages, which will effect each and every document’s header and footer because you have a menu in each area. Using embedded smart objects would allow you to have one header file and one footer file and embed them into each page template file. Update once and you’re done. Without linked smart objects, you would be repeating the updates on every single PSD. No fun at all.
Other Use Cases
In addition to linking a complete section of a web page or app, smart objects can be used to maintain a consistent connection to a style guide. For example, create a 1×1 pixel smart object file for each color in your brand palette, then link those smart objects into your project files to be used as background colors, icon colors (using vector masks on the linked object), button colors, and more. We are only beginning to experiment with these linked objects and I’m sure we will find many more ways to better our workflow.
Automating the Updating of Embedded Smart Objects
Chances are that you won’t have every single PSD of a project open at once. As mentioned before, it’s a good idea to create an action for updating the embedded objects. Taking the next step to automate this updating, especially for large projects, will save you a lot of time. Simply create a batch process to run your “Update Embedded Content” action and Photoshop will do all the heavy lifting.
Forward Thinking
As the web has shifted away from fixed-width layouts and toward a mobile first and responsive approach, so too should our thinking when we open up Photoshop to start a new design. Thinking content first and mobile first has lead us to shift towards a more component based approach to our design process. Having the ability to mock up key components and easily reuse them as we put together PSD templates should prove to be extremely useful as our process evolves. We’ll keep you up to date on our use cases as we try to keep up with the ever-changing web and mobile world.
Share Your Experience
Have you found any interesting ways to use the new embedded smart object feature? Tell us about how you have been able to improve your workflow.
