using a single linked smart object in multiple PSD’s

admin — Fri, 19 Feb 2010 23:00:41 +0000

while working on the web over the last years, there have been many times that i wanted the capability of using a single linked file throughout multiple PSD documents, much in the same way Indesign has this function for large multiple page documents. This would save untold hours of mundane and repetitive work, as a simple copy change such as “Main” to “Home” in a large site’s navigation would then require only one file to be changed, instead of every single page. Unfortunately though, this was merely a dream until a discovery I had a few weeks back.

Recently, a large non-profit came to SpringBox (where i’m a senior designer) with the opportunity to redesign their site, a digital treasure chest of information and opportunities on a specific topic affeting millions. As you might imagine, the breadth of the content on the site was huge, with a rough estimate of over 300+ pages.

Having worked on a 7 month long, massive redesign last year, i had a strong desire to find a new system to allow quick updates to commonly used elements throughout the system, such as the header, the footer, a general tout layout, and the styling of a cta arrow. As these elements are used virtually on every page, particularly with the arrow being used 10+ times on multiple pages, changing these individual items can literally take up hours of time, even on only a handful of pages.

At this point, I must admit my great love for a half solve to this issue, the introduction of smart objects in photoshop. If you have not worked with smart objects, or just want a great refresher on the subject, go check out viget lab’s great article http://www.viget.com/inspire/smart-ways-to-use-adobe-photoshops-smart-objects/

Moving alogn, I say that smart objects are half solve because, these embedded linked files are only applicable to one page. For example, make a custom arrow, turn it into a smart object, then make copies of this smart object and distribute this to the rest of the page. A few days later the client wants to change it, just go in, change the smart object once, and it will automatically change this for all instances of the smart object on the rest of the page. Magically! i love smart objects. i really do. So now we just needed to expand this functionality to reach 5,10, or 300 pages.

Thankfully at this point, i fired up google to see what the internets had to offer on the subject, and I found others were searching for a solution as well. All of this searching led me to the work of Mike Hale and Jeff Transberry who wrote a script to do just what i was looking for: http://ps-scripts.com/bb/viewtopic.php?t=3045 Brilliant!!

So here’s the new work flow for a sample project, Goodness Inc, after downloading the script and installing it via the adobe extension manager:

Example Site Layout and Content

Step 1
Design the homepage with folder groupings for Header, Hero Area, Footer, etc…

Step 2
Select the Header folder in the photoshop layers palette, and choose “convert to smart object”

Step 3
double click on the icon for the smart object in the layer palette, thus opening up the smart object as a separate document.

Dialogue Box for editing a smart object as a serated document:

Content of Header Smart Object:

Folder Panel content of Header Smart Object:

Step 4
Save the smart object in a new folder within the project file, which i label “Universal Elements” or whatever is easiest for you to distinguish.

Step 5
When designing a new page for the site, when i am ready to bring in the header, i go to file –> place –> then browse to the “Universal Elements” folder and select the file.

Step 6
I now open up the windows pallete options, and bring up the “links” window, and see that this smart object is actually a linked object. From this “links” window, i have a few options. I can refresh the panel to get the latest link info, relink the object, or i can edit the original.

The links window panel, as relative to the selected layer, in this case being the “Header” smart object:

I then repeat the process of placing the element in all pages that need it.

Follow Up Steps

If a week later, the nav copy needs to change from “HOME” to “MAIN”, I can now edit the single source file “Header.psb” located in the “Universal Elements” folder, edit the file and save it. Then I will need to open each unique page’s psd, open the links panel, and refresh the links to see that the new element is present. Lastly, I can now save all the updated jpegs.

Not a one step magic fix, but a timesaver none the less.

I do hope that in CS5 adobe steps up their game, and makes an integrated solution for this, as well as a “character / paragraph style // css for multiple PSD documents” solution as well, but that’s a different conversation.

In the meantime, a huge thanks to the great work by Mike Hale and Jeff Transberry!! This has save me hours and hours of frustrating, repetitive, and mundane copy changes. thanks guys!

and as always, if you find an even better way to use / tweak the insights i have shared here, i’d love to hear them!

DISCLAIMER I can only verify that this works on Macs, running CS4.

thoughts on design & a digital life » photoshop

An early list of my favorite sxsw panels

using a single linked smart object in multiple PSD’s