Usage

The script file called Batch Mockup Smart Object Replacement.jsx, which I also refer to in the documentation as the ”engine” script, takes care of the heavy lifting, and to get it to do its job you need to prepare what I call a ”settings” script.

The settings script needs to include the engine script at the top and then trigger a function with a bunch of settings that tells the engine script which mockup files it should process, what are their smart object target layers, and which input files to use. After that, it’s pretty hands-off.

Option 1: Use a project template

Option 2: Start from a clean slate

Empty project folder

This script is the "engine" that powers the batch process and the only file you need from the Github repo. The examples bump up the repository filesize to around ~100MB, so you may or may not want to download/clone the entire repository.

2. Create a new empty "settings script.jsx” file and throw in the template code below

This is the file that initiates the batch process and feeds settings to the main "engine" script.

Make sure the #include ... in the first line points to the engine script file you downloaded. The template is looking for that file right next to the settings script by default. You will also have to customize the settings mockupPath, target, input. Just to be extra clear, fetching the unique target smart object layer name requires you to open the mockup file, hunt down the target layer and possibly renaming it to make sure it is unique.

The $ sign prefixing all example paths points to the parent folder of the settings script file itself. There's one more path prefix that points to the mockup psd. You can also use absolute paths but I wouldn't recommend it. Read more about file paths here.

Settings script.jsx
#include "Batch Mockup Smart Object Replacement.jsx"

var outputOpts = {
  path: '$/_output',
};

mockups([
  
  {
    output: outputOpts,
    mockupPath: '$/Mockup/file.psd',
    smartObjects: [
      {
        target: 'smart object layer name (should be unique)', 
        input: '$/Input',
      },
      // {..},  comma separate multiple smartobjects 
    ],
  },
  // {..},  comma separate multiple mockups 
  
]);
  • Just make a plain text file with a .jsx extension. Copy one of the files from the examples if you can't manage to make a text file otherwise. The filename doesn't matter as long as the extension is .jsx.

  • The smartObjects[].input could also be an array. You can find an example of that in anatomy of the settings script and all options.

  • There's a separate example repository with a simple example you can find here. Additionally check the examples in the project repository for pretty much the kitchen sink. The examples are all ready to be run as is, but maybe delete the output folders before running the scripts, to see what they do. Maybe fiddle with the input files too.

If you need to add more mockups or smart objects per mockup check the anatomy of the settings script.

Last updated

Was this helpful?