Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

Thanks!

share|improve this question
    
You might be interested in some of the discussion here for the best solution for you. Ultimately, photoshop is not a layout program so you're trying to force a nonnative function into it. forums.adobe.com/message/3057114 –  Ryan May 14 '13 at 18:28

3 Answers 3

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.

share|improve this answer
    
Thanks for taking the time to answer. The reason we're going into Photoshop is that naming and grouping structures are integral to exporting into our develop environment where the design meets the logic. One problem I'm running into with this is that it only seems to be possible with raster layers, not Smart Objects. –  Grant May 14 '13 at 19:41
    
Not sure I understand your predicament. You want to export based on layer groups or some such thing? If you could phrase a new question around exporting named assets from Illustrator I think I might have a scripted solution for you. –  plainclothes May 14 '13 at 20:41

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.

share|improve this answer

You could simply use one smart object within Photoshop.

For example:

Set up your Illustrator file will all the buttons:

buttons

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

so first

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

dups

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.

update

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.

share|improve this answer
    
Thanks so much for answering! The problem I run into with this approach is working across multiple Photosohp files. Say screen1.psd and screen2.psd both contain smartObjectA, If I double-click on the copy of smartObjectA in screen1, make a change, and save the chnage, it updates the smartObjectA in screen1, but not it does not update the copy in screen2. I would need the update to be applied to multiple Photoshop files. Do you see what I mean? –  Grant May 14 '13 at 19:22
    
Ahh yeah, that creates a different issue altogether since Photoshop stores the SO data internally. I don't think there is a way around that other than copy/pasting between the internal smart objects. –  Scott May 14 '13 at 19:24
    
If you have a master AI (which is used to place the initial SO) You could update that then copy/paste from the master AI file to the internal smart objects. I haven't ever sen any scripting or automated processes for this. Unlike other apps Photoshop simply doesn't have a publish <> subscribe system. –  Scott May 14 '13 at 19:34
    
See Plainclothes answer.. he's got some good links there. –  Scott May 14 '13 at 20:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.