As a UX Designer for Asynchrony, I’m educated in 3D animation and modeling and have been exposed to all of the major 3D software packages, as well as Adobe Photoshop. However, I find myself using Photoshop more than any of my 3D software. I love Photoshop, but I really missed one particular feature that almost every 3D package provided.
The ability to link one file into another is a feature that was incredibly useful in the 3D world. I could create a model of a light switch in one file and link that model to any number of other files. I could link it to my kitchen model, my living room model, etc. If I ever decided that the light switch needed to change colors or styles, I would simply change the light switch model and the next time I opened any of the files that referenced the light switch, they would grab the updated version.
I found myself longing for this ability when creating screen mockups for applications in Photoshop. There were elements such as site navigation, toolbars, and application headers that were in almost every mock up I created. If something changed in one of these elements, I would have to open every one of the 50+ mock ups and do the same change 50+ times. “Why can’t I just make one file that has the navigation and tell Photoshop to grab that file and put it here?” I thought. I searched through Photoshop and the web without finding anything that would allow me to do this.
Then one day, a co-worker of mine stumbled upon variables. They were exactly what I had been searching for for so long. Variables in Photoshop allow you to make reference to another file inside of your pdf. Here’s how it works.
Step 1: Create a mock screen
I created a quick example to show how variables can be used in application mock ups. I created a mock up of a fictional application with a toolbar at the top.
Step 2: Pull the toolbar into its own file
I want to pull out the toolbar into its own variable so I can use it for all the different application screens. First, I create a new layer for the toolbar and name it “Coolbar” … just because I can. I then copy the toolbar elements into a new file. Once I have the file created, I save it as coolbar.psd.
Step 3: Create a Variable
Now I’m ready to create my variable. I go back to my application screen and choose Image > Variables > Define…
This will bring up the Variables dialog. The first thing I need to do is make sure the layer field is pointing to the layer that I want associated with my variable. I choose the Coolbar layer from the drop down. For this example we are going to use the Pixel Replacement Variable Type. I want to give the variable a name that will make sense to me later so I name it “coolbar”. I check the box for that option and choose ‘As Is’ from the Method drop down. This will make sure my toolbar doesn’t get distorted when it is imported.
The next thing I need to choose is the Alignment. I’m going to choose the middle left Alignment option because the left side of my toolbar should start in the same place regardless of how many items are in the toolbar. (If there is any transparency on the side you are aligning to, the image will shift each time you update.)
Step 4: Data Sets
Now I am ready for the second Variables dialog. Click the next button to bring up the Data Sets dialog. This is where I will link my variable to my coolbar file. The first thing I need to do is create a data set. Data sets store which images are connected to which variables. You can have multiple data sets and assign different images to your variables in each set. This can be used managing different icon sets or themes for an application. For this example, I only need one data set, so I’m going to create one and name it Icon Set One. Now I can connect my file to my variable.
I can select which variable I want to edit with the Name drop down in the Variable section. This is an easy choice for this example since I only have one variable. I choose coolbar and then hit the Select File variable. This brings up a familiar file browser where I can navigate to and choose my toolbar file.
Once I have made the connection between the variable and the image file, I should see the image show up on the canvas since the Preview option is checked by default. Since there was nothing on the coolbar layer, the coolbar image will be imported in the middle left of the entire canvas. Now, I click the Apply button and exit the dialog. If I don’t click Apply, the preview I see will disappear when the dialog is closed. I select my coolbar layer and align it with my pre-existing toolbar. Now I can delete the original toolbar from my ApplicationScreen file.
Step 5: Change the toolbar file
Now I’ve succeeded in making two files out of one. Why is this beneficial? I have one example mock up, but we’ll pretend that I actually have 42; each one showing a different screen in the application, but all containing the toolbar. As long as we are using our imagination, let us also imagine that a change has come down from the boss, client, user testing, or wherever. We now need a help button on the toolbar. I’m going to open up my toolbar file, add the help button, and save.
Step 6: Apply the Data Set
I then open my ApplicationScreen file and… nothing has changed. The one disappointment I have with variables in Photoshop is the necessity of this next step. Photoshop saves a flattened image of each variable it imports. This has the benefit of still displaying correctly even if the variable source files have been moved or deleted, but it requires one extra step to get your changes. I use the Image > Apply Data Set option to bring up a dialog that will allow me to pull in any changes that have been made to the variable source files.
Again, for this example I only have one data set, so I should immediately see the change in the workspace if the Preview option is checked.
I hit the Apply button and my changes are done. You only need to do this once per Data Set, so even if I have 100 variables on this one screen, there is only one step required to update them all.
Now whenever I open one of my 42 screen mock ups, I just need to remember to apply my data set, and I will be sure to have the most up to date elements. I’ve found that this can be very powerful in conjunction with Layer Comps, but that is a post for another day.