Skip to main content
Participating Frequently
May 30, 2023
Answered

Create a custom resize panel for Photoshop that allows you to set canvas size and add padding around

  • May 30, 2023
  • 1 reply
  • 727 views

someone help fix this it does not crop from the path 

#target photoshop

// Function to create the resize panel dialog
function createResizePanel() {
var dialog = new Window("dialog", "Resize Panel");

// Add width input
var widthGroup = dialog.add("group");
widthGroup.add("statictext", undefined, "Width:");
var widthInput = widthGroup.add("edittext", undefined, "1000");
var widthUnitDropdown = widthGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
widthUnitDropdown.selection = 0;

// Add height input
var heightGroup = dialog.add("group");
heightGroup.add("statictext", undefined, "Height:");
var heightInput = heightGroup.add("edittext", undefined, "1000");
var heightUnitDropdown = heightGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
heightUnitDropdown.selection = 0;

// Add top padding input
var topPaddingGroup = dialog.add("group");
topPaddingGroup.add("statictext", undefined, "Top Padding:");
var topPaddingInput = topPaddingGroup.add("edittext", undefined, "50");
var topPaddingUnitDropdown = topPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
topPaddingUnitDropdown.selection = 0;

// Add bottom padding input
var bottomPaddingGroup = dialog.add("group");
bottomPaddingGroup.add("statictext", undefined, "Bottom Padding:");
var bottomPaddingInput = bottomPaddingGroup.add("edittext", undefined, "50");
var bottomPaddingUnitDropdown = bottomPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
bottomPaddingUnitDropdown.selection = 0;

// Add left padding input
var leftPaddingGroup = dialog.add("group");
leftPaddingGroup.add("statictext", undefined, "Left Padding:");
var leftPaddingInput = leftPaddingGroup.add("edittext", undefined, "50");
var leftPaddingUnitDropdown = leftPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
leftPaddingUnitDropdown.selection = 0;

// Add right padding input
var rightPaddingGroup = dialog.add("group");
rightPaddingGroup.add("statictext", undefined, "Right Padding:");
var rightPaddingInput = rightPaddingGroup.add("edittext", undefined, "50");
var rightPaddingUnitDropdown = rightPaddingGroup.add("dropdownlist", undefined, ["pixels", "inches", "cm"]);
rightPaddingUnitDropdown.selection = 0;

// Add Crop checkbox
var cropCheckbox = dialog.add("checkbox", undefined, "Crop Image");

// Add OK and Cancel buttons
var buttonGroup = dialog.add("group");
var okButton = buttonGroup.add("button", undefined, "OK");
var cancelButton = buttonGroup.add("button", undefined, "Cancel");

// OK button click event
okButton.onClick = function() {
var width = parseInt(widthInput.text);
var height = parseInt(heightInput.text);
var widthUnit = widthUnitDropdown.selection.index;
var heightUnit = heightUnitDropdown.selection.index;
var topPadding = parseInt(topPaddingInput.text);
var bottomPadding = parseInt(bottomPaddingInput.text);
var leftPadding = parseInt(leftPaddingInput.text);
var rightPadding = parseInt(rightPaddingInput.text);
var paddingUnit = topPaddingUnitDropdown.selection.index;
var cropImage = cropCheckbox.value;

resizeCanvas(width, height, widthUnit, heightUnit, topPadding, bottomPadding, leftPadding, rightPadding, paddingUnit, cropImage);
dialog.close();
};

// Cancel button click event
cancelButton.onClick = function() {
dialog.close();
};

dialog.show();
}

// Function to resize the canvas and add padding
function resizeCanvas(width, height, widthUnit, heightUnit, topPadding, bottomPadding, leftPadding, rightPadding, paddingUnit, cropImage) {
var doc = app.activeDocument;

// Convert width to pixels
if (widthUnit === 1) {
width = inchesToPixels(width);
} else if (widthUnit === 2) {
width = cmToPixels(width);
}

// Convert height to pixels
if (heightUnit === 1) {
height = inchesToPixels(height);
} else if (heightUnit === 2) {
height = cmToPixels(height);
}

// Convert padding to pixels
if (paddingUnit === 1) {
topPadding = inchesToPixels(topPadding);
bottomPadding = inchesToPixels(bottomPadding);
leftPadding = inchesToPixels(leftPadding);
rightPadding = inchesToPixels(rightPadding);
} else if (paddingUnit === 2) {
topPadding = cmToPixels(topPadding);
bottomPadding = cmToPixels(bottomPadding);
leftPadding = cmToPixels(leftPadding);
rightPadding = cmToPixels(rightPadding);
}

var newWidth = width + leftPadding + rightPadding;
var newHeight = height + topPadding + bottomPadding;

doc.resizeCanvas(newWidth, newHeight, AnchorPosition.MIDDLECENTER);

if (cropImage) {
// Crop the image
var bounds = [
leftPadding,
topPadding,
doc.width - rightPadding,
doc.height - bottomPadding
];
doc.crop(bounds);
}
}

// Function to convert inches to pixels
function inchesToPixels(inches) {
var dpi = app.activeDocument.resolution;
return Math.round(inches * dpi);
}

// Function to convert cm to pixels
function cmToPixels(cm) {
var inch = 2.54;
return Math.round(cm * inch * app.activeDocument.resolution);
}

// Entry point
createResizePanel();

This topic has been closed for replies.
Correct answer c.pfaffenbichler

I wand a panel where I can customize padding size for my images  for example I want an image 2000x2000 px   and I wand gap around the image like 20px on top and 30px on bottom 50 px left and right 


That description seems unclear to me.

Please explain what you mean exactly with the help of screenshots. 

Do you just want to be able to numerically add different values for the expansion at the top, right, bottom, left sides additional to the existing canvas, in relation to a Selection or a Path, …? 

1 reply

c.pfaffenbichler
Community Expert
Community Expert
July 23, 2023

Could you please post screenshots with the pertinent Panels (Toolbar, Layers, Options Bar, …) visible to illustrate what happens differently from what you expect? 

Participating Frequently
August 17, 2023

https://youtu.be/rcn4vvTKvTI

I made a video to see what happens when I run the script  it should crop from the path  and  give me the result  like the size I gave on the panel I don't know why it's not working  plz help 

c.pfaffenbichler
Community Expert
Community Expert
August 19, 2023

There appears to be no reference to any path in the Script, so please explain what you mean. 

What do you expect to happen?