Instancing Layers in Photoshop

Written by David Charney
Posted: November 17, 2007 (2 years, 3 months ago) | 5 comments

---

Long before fire, the wheel, and the bagel (sometimes considered nature’s ‘wheel’*), man has yearned for the power to instance layers in Photoshop. This meaning the ability to create a layer or external Photoshop file and reuse the contents (buttons, headers, footers, design components) of that object on other layers and across multiple files. Simply change the layer one place and see that change occur all places. Now I know what you are thinking… “Man I sure could go for some all you can eat shrimp at Red Lobster right now - oh and those biscuits they have…”. I am thinking the same thing. But forget about the shrimp because we are going to take another journey, a journey into Photoshop [place awesome music score here].

SCENARIO OF THE LOST ARC
Jimmy just created four user interface designs for his client. Two of the designs are mock-ups of the home page and two are internal screens based on the home page designs. His designs all have the client supplied header (consisting of the logo and project title) and a button heavy navigational system. All seems good as the deadline is approaching until the client has a few changes for Jimmy. The first change - They want Jimmy to play around with the look of the buttons in both designs. Change number two - There is a new header graphic. Now Jimmy doesn’t want to spend all his time adjusting a button and then duplicating the layers, changing positions, duplicating layers again, changing positions again, etc… Jimmy needs a quick way to do it. But how?

TUTORIAL AND THE LAST CRUSADE
There is a reason most people have not heard much about instancing layers in Photoshop. The reason is because Photoshop was not made to do it the way we would assume it would be done… It is possible to do a couple of ways and these ways are what we will explore. Personally, this humble writer (to keep him anonymous let’s just refer to him as D. Charney) has requested many times over the years that Photoshop make a clean and direct way to instance or reference layers from an external Photoshop file. Many new features and abilities have been added to Photoshop but my request is still passed out on the couch. Depending on your needs you can either use Smart Objects or Data Sets. I will explain both.

Let me go get a Mountain Dew. I am back, sporting my new dew. Sorry about the wait.

Using Smart Objects

Smart Objects can allow you to instance one object many times in one Photoshop file. Make a change to one… and they all update. It is not the best when you need to make an adjustment within multiple Photoshop files.

The good: Use the same layer many times. Make a change to one, update them all instantly. Fairly easy to use.
The bad: A little confusing. Can’t use Smart Objects smoothly across multiple PSDs.

Step 1 ) Create a new layer.
Step 2 ) Draw a button.
Step 3 ) Click Layer > Smart Objects > Group into New Smart Object.
Step 4 ) Now duplicate the layer as many times as you need. Now the client needs a change to all the buttons, like make them red instead of black.
Step 5 ) You can click Layer > Smart Objects > Edit Contents or double-click the thumb image in the layer palette on any layer that contains the Smart Object you need to change. The Smart Object will open in a new Photoshop file (a .PSB file).
Step 6 ) Make your adjustments and Save the file (Don’t Save As! - It won’t link correctly).
Now click your main Photoshop file to bring its focus back and FWAMP!, your Smart Objects will update.

Using Data Sets

Data Sets can let you do a lot more than what I am about to tell you but they can be annoying and a bit confusing based on what you are using them for. On the bright side, Data Sets can let you instance an embedded external Photoshop file over multiple Photoshop files. What sucks is for your changes to the external file to be updated, you need to apply the external file to all other files.

The good: Use the same external file across multiple layers and multiple PSDs.
The bad: A little more confusing. More steps in every aspect. Meh.

Step 1 ) Create three files. Two files to act as two main designs, and one file to act as the external file to be embedded. Save all of them in the same directory.
Step 2 ) Go to the external file and draw in some shapes. Keep it creative. I will wait. Save your changes.
Step 3 ) On one of the two main designs, create a new layer and click Image > Variables > Define to open the dialog box.
Step 4 ) Check the Pixel Replacement check box. Choose As Is from the Method drop down box. Adjust the image alignment if you would like.
Step 5 ) Click the Next button to jump over to the Data Sets area. Click the tiny little floppy disk icon with the green arrow to create the data set. Click the Select File… button and choose the external file you saved earlier. Click Open and TA DA, there is your image on the canvas. Make sure you hit Apply or all hell will break loose. Then hit OK.
Step 6 ) Follow from Step 3 through 5 on the second main design PSD and make a data set with the same external file.
Step 7 ) Now go back to your external image and make some changes. Save the file. Go back to each main design file, click Image > Apply Data Set… and click Apply. You should see your external file update.

You can’t just copy a layer and have it update next time you re-apply the data set. You have to create a new layer, make a new data set, apply the external file to it, and when you want to update it you have to click each data set to apply the changes. This can be annoying but much quicker than making adjustments and copying and pasting 200 buttons around a UI.

The potential power of instancing layers in Photoshop is clear and can be very helpful. I hope Adobe sees the power as well and develops a real tool to do this quickly without the above tricks to sudo-do what we want. There are a lot more settings I skipped over on each method so please explore and have fun!

* After some extensive research I have become aware that the bagel has never been referred to as nature’s ‘wheel’ and apologize for any confusion or ‘ruined lives’ that resulted from my misstatement.