├── LICENSE ├── .gitignore ├── auto_mockup.jsx └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 xKeNcHii 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /auto_mockup.jsx: -------------------------------------------------------------------------------- 1 | // Constants 2 | const WINDOW_TITLE = "Auto Mockup Images123"; 3 | const MOCKUPEXTENSIONS = /\.(psd|psdt)$/i; 4 | const IMAGEEXTENSIONS = /\.(jpg|jpeg|png|gif|tiff|webp)$/i; 5 | 6 | // Create a new window 7 | var win = new Window("dialog", WINDOW_TITLE); 8 | 9 | // Function to process each image 10 | function processImage(imageFile, mockupFile, outputFolder) { 11 | var mockup = app.open(mockupFile); // Open the mockup file 12 | var idplacedLayerReplaceContents = stringIDToTypeID("placedLayerReplaceContents"); 13 | var desc = new ActionDescriptor(); 14 | desc.putPath(charIDToTypeID("null"), new File(imageFile)); // Set the image file path 15 | executeAction(idplacedLayerReplaceContents, desc, DialogModes.NO); // Place the image into the mockup 16 | 17 | // Generate a unique identifier for the processed image 18 | var uniqueIdentifier = new Date().getTime(); // Using timestamp as a unique identifier 19 | 20 | // Construct the output file path with a unique name 21 | var outputFile = new File(outputFolder + "/" + mockupFile.displayName.replace(/\.(psd|psdt)$/i, "") + "_" + uniqueIdentifier + "_" + imageFile.name); 22 | var saveOptions = new JPEGSaveOptions(); 23 | saveOptions.quality = 12; 24 | mockup.saveAs(outputFile, saveOptions, true, Extension.LOWERCASE); 25 | mockup.close(SaveOptions.DONOTSAVECHANGES); // Close the mockup file without saving changes 26 | } 27 | 28 | 29 | // Function to select a folder and update the corresponding text field 30 | function selectFolder(prompt, textField) { 31 | var folder = Folder.selectDialog(prompt); 32 | if (folder) { 33 | textField.text = folder.fsName; 34 | return folder; 35 | } 36 | return null; 37 | } 38 | 39 | // Add input folder panel 40 | var inputPanel = win.add("panel", undefined, "Input Folder"); 41 | inputPanel.alignment = "fill"; 42 | var inputFolderBtn = inputPanel.add("button", undefined, "Select Input Folder"); 43 | var inputFolderText = inputPanel.add("edittext", undefined, ""); 44 | inputFolderText.alignment = "fill"; 45 | inputFolderBtn.onClick = function() { 46 | inputFolder = selectFolder("Select a folder with images to process:", inputFolderText); 47 | }; 48 | 49 | // Add output folder panel 50 | var outputPanel = win.add("panel", undefined, "Output Folder"); 51 | outputPanel.alignment = "fill"; 52 | var outputFolderBtn = outputPanel.add("button", undefined, "Select Output Folder"); 53 | var outputFolderText = outputPanel.add("edittext", undefined, ""); 54 | outputFolderText.alignment = "fill"; 55 | outputFolderBtn.onClick = function() { 56 | outputFolder = selectFolder("Select a folder to save the processed images:", outputFolderText); 57 | }; 58 | 59 | // Add mockup folder panel 60 | var mockupPanel = win.add("panel", undefined, "Mockup Folder"); 61 | mockupPanel.alignment = "fill"; 62 | var mockupFolderBtn = mockupPanel.add("button", undefined, "Select Mockup Folder"); 63 | var mockupFolderText = mockupPanel.add("edittext", undefined, ""); 64 | mockupFolderText.alignment = "fill"; 65 | mockupFolderBtn.onClick = function() { 66 | mockupFolder = selectFolder("Select the folder containing mockup files:", mockupFolderText); 67 | if (mockupFolder) { 68 | mockupFiles = mockupFolder.getFiles(); 69 | // Filter out non-PSD files 70 | mockupFiles = mockupFiles.filter(function(file) { 71 | return file.name.match(MOCKUPEXTENSIONS); 72 | }); 73 | } 74 | }; 75 | 76 | // Add process button 77 | var processBtn = win.add("button", undefined, "Process Images"); 78 | processBtn.alignment = "center"; 79 | processBtn.onClick = function() { 80 | if (inputFolder && outputFolder && mockupFolder) { 81 | var imageFiles = inputFolder.getFiles(IMAGEEXTENSIONS); 82 | for (var m = 0; m < mockupFiles.length; m++) { 83 | for (var i = 0; i < imageFiles.length; i++) { 84 | processImage(imageFiles[i], mockupFiles[m], outputFolder); 85 | } 86 | } 87 | alert("Processing complete."); 88 | } else { 89 | alert("Please select input, output, and mockup folders."); 90 | } 91 | }; 92 | 93 | // Add exit button 94 | var exitBtn = win.add("button", undefined, "Exit"); 95 | exitBtn.alignment = "center"; 96 | exitBtn.onClick = function() { 97 | win.close(); 98 | }; 99 | 100 | // Show the window 101 | win.show(); 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mockup Automation Script (Photoshop Image Processor) 2 | 3 | ![Before after minimal skincare Instagram post](https://user-images.githubusercontent.com/109564316/230358716-92d9846b-8b23-489f-9dfa-76aeefa6ef44.png) 4 | 5 | This repository contains a Photoshop script to automate the process of placing images into mockups and saving the results. The script provides a user-friendly interface to select input and output folders, as well as mockup files. 6 | 7 | ## Table of Contents 8 | 9 | - [Photoshop Image Processor](#photoshop-image-processor) 10 | - [Table of Contents](#table-of-contents) 11 | - [Introduction](#introduction) 12 | - [Features](#features) 13 | - [Installation](#installation) 14 | - [Method 1](#method-1) 15 | - [Method 2](#method-2) 16 | - [Method 3 (Recommended):](#method-3-recommended) 17 | - [Usage](#usage) 18 | - [Compatibility](#compatibility) 19 | - [Contributing](#contributing) 20 | - [License](#license) 21 | - [Example](#example) 22 | 23 | ## Introduction 24 | 25 | Photoshop Image Processor is a script designed to streamline the workflow of designers and photographers who need to place multiple images into mockups and save the results. It is particularly useful for tasks like creating product presentations, portfolios, or social media posts. 26 | 27 | ## Features 28 | 29 | - User-friendly interface 30 | - Support for multiple input formats (JPG, JPEG, PNG, GIF, TIFF, and WEBP) 31 | - Customizable output folder 32 | - Support for multiple mockup files 33 | - Efficient image processing 34 | 35 | ## Installation 36 | 37 | There are a few ways to install the downloaded .jsx file in Photoshop: 38 | 39 | ### Method 1: 40 | 41 | 1. Locate the downloaded .jsx file on your computer. 42 | 2. Drag and drop the .jsx file onto the Photoshop icon in your dock or applications folder. 43 | 3. The script will be automatically installed and available in the `File > Scripts` menu in Photoshop. 44 | 45 | ### Method 2: 46 | 47 | 1. Open Photoshop. 48 | 2. Go to `File > Scripts > Browse`. 49 | 3. Navigate to the downloaded .jsx file on your computer and select it. 50 | 4. Click "Open". 51 | 5. The script will be installed and available in the `File > Scripts` menu in Photoshop. 52 | 53 | ### Method 3 (Recommended): 54 | 55 | 1. Place the `auto_mockup.jsx` file in the Photoshop Scripts folder: 56 | - OS X: `/Applications/Adobe Photoshop [version]/Presets/Scripts/` 57 | - Windows (32 bit): `C:\Program Files (x86)\Adobe\Adobe Photoshop [version]\Presets\Scripts\` 58 | - Windows (64 bit): `C:\Program Files\Adobe\Adobe Photoshop [version] (64 Bit)\Presets\Scripts\` 59 | 60 | After installing the script using any of these methods, you can access it by going to `File > Scripts` in Photoshop. 61 | 62 | ![image](https://user-images.githubusercontent.com/109564316/230352280-50e83b18-c67b-43bb-91e0-080c95ab9d11.png) 63 | 64 | 65 | ## Usage 66 | 67 | 1. Open Photoshop. 68 | 2. Go to `File > Scripts > auto_mockup`. 69 | 70 | ![image](https://user-images.githubusercontent.com/109564316/230352512-7624cd6f-9f37-4267-86a1-28272364e6f9.png) 71 | 72 | 4. A dialog window will appear. Use the "Select Input Folder" button to choose a folder containing the images you want to process. 73 | 74 | ![image](https://user-images.githubusercontent.com/109564316/230351766-d2d2c89a-86b1-490a-ab30-7925644c4fb9.png) 75 | 76 | 4. Use the "Select Output Folder" button to choose a folder where the processed images will be saved. 77 | 5. Use the "Select Mockup Folder" button to select the PSD mockup files you want to use. (Make sure that Smart Object is on Layer 1) 78 | 79 | ![image](https://user-images.githubusercontent.com/109564316/230353319-d851f2c7-3427-4b0b-9b2e-2c0edcfec0ea.png) 80 | 81 | 7. Click the "Process Images" button to start processing. 82 | 8. When processing is complete, an alert will appear. 83 | 84 | ![image](https://user-images.githubusercontent.com/109564316/230352903-5d312bcc-951c-4486-879b-f3777c1b01b4.png) 85 | 86 | 87 | 88 | ## Compatibility 89 | 90 | The script is compatible with Adobe Photoshop CC versions. If you encounter any issues with other versions, please report them. 91 | 92 | ## Contributing 93 | 94 | We welcome contributions to improve the script or add new features. Please feel free to fork the repository, make changes, and create a pull request. 95 | 96 | ## License 97 | 98 | This project is licensed under the MIT License. See the LICENSE file for more information. 99 | 100 | ## Example 101 | To demonstrate the capabilities of the Photoshop Image Processor script, here's an example using a set of product images and a mockup: 102 | 103 | # Input Images 104 | Here are the product images that we want to place in the mockup: 105 | 106 | ![image](https://user-images.githubusercontent.com/109564316/230354697-a8cb2b44-9dcc-4533-b2fd-5e6ca3d2ca16.png) 107 | ![image](https://user-images.githubusercontent.com/109564316/230354757-069f25d0-3ba0-453a-9470-cd8dd8758333.png) 108 | 109 | # Mockup 110 | Here's the mockup that we'll use to place the product images: 111 | 112 | [![image](https://user-images.githubusercontent.com/109564316/230355009-1972d514-5e3e-4091-9abb-faa7537912a3.png)](https://www.anthonyboyd.graphics/mockups/modern-dark-poster-mockup/) 113 | [![image](https://user-images.githubusercontent.com/109564316/230355092-7d2e83a6-e6d8-4f25-add5-476ba1430c7d.png)](https://www.anthonyboyd.graphics/mockups/modern-poster-mockup-vol-2/) 114 | 115 | 116 | # Output Images 117 | After running the Photoshop Image Processor script, here are the output images that we get: 118 | ![image](https://user-images.githubusercontent.com/109564316/230355525-c669fead-92b5-4ea8-9712-f2f008867040.png) 119 | ![image](https://user-images.githubusercontent.com/109564316/230355554-f5f20586-bbb1-441e-b1c9-f1aeeadd9b38.png) 120 | ![image](https://user-images.githubusercontent.com/109564316/230355579-4060b36c-9a44-4439-8d5d-d53080802608.png) 121 | ![image](https://user-images.githubusercontent.com/109564316/230355600-6018b43b-45ea-4839-947e-81aa8ac5fe74.png) 122 | 123 | As you can see, the script has automatically placed the product images in the mockup and saved the results in the specified output folder. This can save designers and photographers a lot of time and effort when working with multiple images and mockups. 124 | --------------------------------------------------------------------------------