Automate replacement of Smart Objects in Photoshop


I'm involved in the production of a touchscreen device. Our workflow for designing the graphics of the interface is to create the buttons, text, etc in Illustrator, bring it into Photoshop as Smart Objects, and later flatten the smart objects, but beyond that is not pertinent to this question. [EDIT: Each screen is saved as a separate Photoshop file.]

I'm looking for an application or something to automate part of this process.

We want to set up a master Illustrator document that contains all the button styles that exist in the device, encapsulated in groups. Also, we want to have a database containing the X, Y, Width, and Height values for each copy of each button. I'm referring to the fields that can be viewed in Photoshop when the Transform tool is active, pictured:

enter image description here

So then, if we update a button style in the master Illustrator file and hit "run" or something, it would replace each instance of the button with the updated version. That way, if we make an update to one of the button styles, we don't have to go through all 700 instances of the button and replace them manually.

So if you can suggest an application that may help with this, I would greatly appreciate it. Also, if you can suggest a better place to ask this question, I would appreciate that too.


7/3/2014 2:46:00 PM

Why jump to Photoshop to do the layout? If you're creating the art in Illustrator to begin with, stick with Illy. It's much more fit to the task. You can place your art as links or just maintain your styles all in one doc (presuming your application isn't too large).

A [painful] work-around to make Photoshop do unnatural things is variables. You would only do this when Photoshop is absolutely necessary. Here's the basics from that link:

Step 1: Define Variables

Create layers with the variable names.

Setup Variable Layers

Go to Images > Variables > Define. Now select the layer that is named varHeader in the dropdown, click the Pixel Replacement checkbox, and give the variable a relevant name. I like to use the method “As Is” so that the imported file isn’t resized. The imported file is aligned relative to the boundaries of the file in which it is placed. In the case of a header, I like to pick the top left corner of the grid so that my header file will always align correctly.

Define variables

Click the Next button.

Step 2: Create Data Sets

Data sets are simply groups of data presented in tabular form. To create a data set, click the small hard drive icon with an arrow pointing to it. Give the data set a name that anyone will understand. In the Variables box, make sure that header is selected and set the Value by selecting the file that you want to import. You can then see the variable name, file name, and the layer that they're associated with below.

Create Data Set

Click Apply, then click OK.

That’s it! You’re first variable is linked to an external file. Replicate the process to link additional variables to their associated files.

Step 3: Apply Data Set

The whole point of this is the ability to update your designs easily when changes are made to the external/imported files. Simply open the design file and go to Image > Apply Data Set. Select the data set to update and click Apply.

5/14/2013 6:44:00 PM