Automate replacement of Smart Objects in Photoshop

Question

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:

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.

Thanks!

Answer 1

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.

Answer 2

Since you presumably have a bunch of devs handy, perhaps you can persuade someone to get into the Photoshop DOM and write some custom javascript. I don't think it would be too complex, and it certainly isn't impossible.

An alternative approach, if I understand your workflow correctly (a single master AI file that drives all of the PSDs), would be to set up an Action that replaces the content of the SO (Layer > Smart Objects > Replace Contents) and saves the file.

Rather than simply saving your edit back to the PSD, which forces you into the Copy/Paste scenario, Save As standard_filename.ai in your master folder and have the Action target that file explicitly.

Select all the PSDs, then use the Batch script in Bridge (Tools > Photoshop > Batch...) to run the Action on all of them in one shot.

Answer 3

You could simply use one smart object within Photoshop.

For example:

Set up your Illustrator file will all the buttons:

Open the Photoshop file and simply choose File > Place and place the Illustrator file (as a Smart Object):

Now you can mask out portions you do not need and duplicate, reposition, and scale the Smart Object as often as needed:

At this point updating any of the smart object elements merely takes a double click on the layer thumbnail and then editing the (internal) master AI file. Once you save in AI and return to Photoshop, all of the smart object layers are update but transformations are not reset. This is very useful for merely changing appearance of smart object data without actually altering the dimensions of the internal data.

When you duplicate a Smart Object layer in Photoshop, you don't duplicate the internal Smart Object data. You actually create another instance of the same data. So, if the internal data is updated all instances will be updated as well.

The tricky part about doing things this way is the masking. If you have many items creating a mask for each item may take a bit of time. However, once the masks are generated, future updates are much faster this way.