Copy link to clipboard
Copied
Hey Everyone!
I’ve been handed what could be a HUGE project if I can’t find a solution to make this easier. I’ve got hundreds, if not, thousands of JPEG files that have been outlined with a path, and our web guys are moving to a new B2B platform that requires transparent PNG files rather than JPEG files for our product images. Does anyone have a quick easy solution, maybe an app, that can convert a folder of pathed outlined JPEG files into transparent PNG files? I can painfully do this one file at a time in Photoshop but it will take WAY too long to do this.
Before we go any further, I’m on an Intel-based iMac running macOS 12.4 Monterey.
I’ve scoured the web for a Mac-based app for the conversion and so far, all I’ve downloaded will not save a transparent PNG from a pathed outlined JPEG. I guess I could write an Action and use the Batch tool to do this but that’s far from perfect in my experience, especially what I need to do here. Any thoughts?
There is always Image Processor Pro:
And this reworking of Image Processor which includes PNG:
https://github.com/SetTrend/Raw-Image-Converter
Or Picture Processor:
https://github.com/Paul-Riggott/PS-Scripts/blob/master/Picture%20Processor.jsx
This sounds like a good idea for a new script so I took a stab at it the morning. I've taken components from my other scripts and combined the parts into a solution specific to this need. I call it "Batch Web Images." It's fresh out the oven, conceived only hours ago, so bear with me if I missed something and it throws an error because of something I didn't anticipate. Gotta start somewhere, and this is it. I'll watch responses and fix anything that comes up. Also I am thinking maybe add the opt
...Thank you for your generous contribution. Users like you are why I keep writing scripts.
About your request, you can disable the option "Rename for web". That's what is changing names to lowercase, along with replacing URL encoded characters to dashes (spaces for example). But if you want the the URL encoding option but leave letter case alone, I'll be happpy to add a sub-option for the letter case that you can disable. Again, thank you so much. I really appreciate the support. It's how I make a
...I made a few more tweaks. I realized the code I used for saving JPG is better suited for print work (I come from the print biz) and uses baseline. I updated the script to use progressive, 3 scans. Better for web images. Also @wayne_carey how about marking my answer as the solution? It is, I hope. It helps my reputation here <smile>
https://www.marspremedia.com/software/photoshop/batch-web-images
Copy link to clipboard
Copied
Can you upload a few example images? If you can do this via a batch action a script would do the same.
Copy link to clipboard
Copied
I thought about that and tried it but the action can't save to the other folders you're working in (meaning the Action can ONLY save to the folder you used when creating the Action to save the file as a PNG) and batching it doesn't save to different file formats, just appending to the existing file name. So that makes you think of using the Image Processor. Well, it doesn't save to PNG. I've been complaining to Adobe about this for many years now. I've added a file showing an example of the files I have to work with. It is a low-resolution with outlined path to keep this simple. Years ago, I had a stand-alone app for the Mac that did exactly what I need but it's no longer in the app store and I can't find anything in any search engine for an app to do this.
Copy link to clipboard
Copied
There is always Image Processor Pro:
And this reworking of Image Processor which includes PNG:
https://github.com/SetTrend/Raw-Image-Converter
Or Picture Processor:
https://github.com/Paul-Riggott/PS-Scripts/blob/master/Picture%20Processor.jsx
Copy link to clipboard
Copied
Thanks for the apps but that still doesn't solve the problem. I need to batch convert hundreds of pathed (outlined) JPG files into transparent PNG files and I'd like to keep all the files in their respective folders, thereby having a folder that contains JPG and PNG files for each product. Actions will NOT allow you to create an Action with respective folder attributes, ONLY the folder selcted when creating the Action.
Copy link to clipboard
Copied
@wayne_carey wrote:
"Thanks for the apps but that still doesn't solve the problem."
Actually, they do solve the problem. That is why I suggested them. Don't be so quick to judge, did you actually try any of them?
These scripts take care of opening and saving, you don't put those bits into the action.
The script will open and save for you, what they don't do is "edit" the image – that is what your action does (sans open/save steps).
These scripts will run the action on each image opened.
You wrote in your previous reply:
"So that makes you think of using the Image Processor. Well, it doesn't save to PNG. I've been complaining to Adobe about this for many years now. "
One of the scripts that I linked to is a modified version of Image Processor that outputs PNG.
I'd suggest that you take another look.
Copy link to clipboard
Copied
Here is a visual of the Raw Image Converter script setup. This configuration doesn't create a PNG subfolder. Simply use the (2) Save in Same Location option and it will create a PNG folder in each input folder:
This is a screenshot of the action referenced in (4), the steps are up to you, I was experimenting with different methods to produce cleaner edges. Note the first step will break if all images don't have the same path name of Outline (scripts can overcome this limitation with actions):
This is a screenshot of the output directory preserving the input folder structure, as mentioned earlier, changing the settings would create a PNG folder inside the parent folder:
Copy link to clipboard
Copied
Here is the same action used in the Image Processor Pro script. Just like the Raw Image Converter script, it can simply save to the parent folder and or create a sub-folder. In this example, I saved to a sub-folder:
The script interface:
The result, including sub-folders, preserving the input folder structure:
Copy link to clipboard
Copied
Thank you, Stephen. I see what you're talking about. Now I have to decide how this needs to be accomplished since PNG file sizes can be rather large. I will say that since these scripts were written 7-8 years ago, I have had several crashes with the latest version of Photoshop (ver 23.4.1) in my testing but it does work. It still irks me to wonder why Adobe doesn't recongnize the importance of PNG files in batch automations. I've sent in requests for this feature for about 10 years now. I once had a stand alone app a few years ago that took care of all this but it's been discontinued and no longer runs on newer macOS versions. Thank you for your help with this!
Copy link to clipboard
Copied
Glad you are getting somewhere! Image Processor Pro has always been rock-solid for me, through many versions of Photoshop. The newer Raw Image Converter script is stated as a total rewrite and is more modern.
Copy link to clipboard
Copied
This sounds like a good idea for a new script so I took a stab at it the morning. I've taken components from my other scripts and combined the parts into a solution specific to this need. I call it "Batch Web Images." It's fresh out the oven, conceived only hours ago, so bear with me if I missed something and it throws an error because of something I didn't anticipate. Gotta start somewhere, and this is it. I'll watch responses and fix anything that comes up. Also I am thinking maybe add the option to crop close to the subject, perhaps enter a small percentage of subject size for margin all around. All feedback is welcome. Download at this link:
http://www.marspremedia.com/software/photoshop/batch-web-images
EDIT: oh and I forgot to mention, please mark as correct answer if it works out. Thanks!
EDIT2: here's an image...
Copy link to clipboard
Copied
@willcampbell7 wrote:
I'll watch responses and fix anything that comes up. Also I am thinking maybe add the option to crop close to the subject, perhaps enter a small percentage of subject size for margin all around. All feedback is welcome.
Thank you for sharing William! I have given it a test and these were my initial findings:
* I like the fit image option
* As you suggest, adding an option to pad out the image with a margin/canvas extension would be nice. Would this only be transparency, or content-aware fill, solid colour etc?
* Although not obviously stated, if selecting the parent folder and including sub-folders as input, then selecting the same parent top-level folder as output – the sub-directory structure is maintained, which is great! (perhaps worth noting in a read-me doc)
* Although not obviously stated it is the first path being used (perhaps worth noting in a read-me doc)
* Perhaps adding an option to use the first alpha channel in addition to the first path or select subject
* It would be nice to have an option to save and reuse the previous settings, folder paths etc. when re-running the script.
* If the path option is selected, and the input is PNG or does not contain a path, select subject is used by default. (perhaps worth noting in a read-me doc)
* On Mac Photoshop 2021 version – Progress Bar issues:
1) Progress bar remains after script run, requires manual close
2) If re-opening an input image directly after running the script, the progress bar reappears, even though the script has finished processing all images. Escape or mouse close does not help, it keeps re-appearing if one navigates away and back to Photoshop.
I personally don't consider the display of the progress bar to be that critical, it is more of a PITA to deal with these issues than the benefit it is intended to provide.
Copy link to clipboard
Copied
Stephen, I looked into the progress issue more. Other scripts of mine have this trouble, too, and your comments prompted me to make a solution. The trouble happens when Photoshop loses focus. And up to now, the progress window is closed before the final "Done" alert. So if it the call to close progress happens while Photoshop doesn't have focus, it doesn't close. Then once Photoshop has focus again, it's stuck. So I added to this script (and now will to others) a final call to progress.close() as the last line of execution before the script ends. That solves the problem. The script is updated, get the latest at the same link. Thanks again for the feedback. Got me thinking and led to a solution.
Copy link to clipboard
Copied
Thanks for the feedback, Stephen. It's very helpful.
I've done a little more work on the script. Updated version is at the same link:
http://www.marspremedia.com/software/photoshop/batch-web-images
Below is an updated UI image.
I've added the option for alpha channel. Great suggestion. And added the option to crop to a percent of subject longest dimension, as I mentioned in the last message.
In your comments I wasn't sure at times if you were pointing out how the script works, or how you wanted it to work that just so happens to be how it works. Anyway, yes subfolder structure is preserved. Nothing I sweated over, just this initial script was quickly made by plugging togethter pieces of other scripts, and it was from one that happened to have that feature added (user request). Yes path is first found. Same for the new alpha channel option. And yes, fallback to select subject if either is missing.
The progress bar should work, but it can be strange when losing app focus, like you tab away to another app while the script is running. This applies to all my scripts with a progress bar. It's just one of those quirky Adobe app things. To help, I took out disabling the progress bar close button. That's just a habit. No harm in leaving it. As for having a progress bar -- I'm a big fan, even if it's funky. When I process 500 images I like an idea of where we are. That's just me, and since I'm the programmer, my scripts get progress bars.
About "worth noting in a read-me doc", yes of course, but that comes later. At the moment I'm at the stage of building a proof of concept. When the time comes this new script is working OK and added to my website, trust me, it will be throroughly documented as are all my scripts. I assume you have visted my site before? See this page for an example of documentation that nears the effort of coding the script itself: http://www.marspremedia.com/software/photoshop/batch-multi-save It took quite some time and effort to write all that.
Last, about saved settings, yes I imagine that eventually, just like other scripts of mine, but that's a line once crossed the script becomes closed source.
Monday is just arond the corner and that means back to paying projects. I'll revisit this one here and there as time permits. Keep the suggestions coming. All feedback is welcome.
Copy link to clipboard
Copied
One other thing I forgot to mention.
If you don't want a progress bar, it's easy to disable.
Search for this line:
progress.display = function (message) {
Just after, comment out (add // to begin) the contents of the fuction as I show here:
// message && (this.t.text = message);
// this.show();
// app.refresh();
Now there should be no progress bar.
Also, without saved settings at this point but still open source, it's a simple matter to change the defaults.
Search for "SET DEFAULT VALUES"
You should find this...
// SET DEFAULT VALUES
cbRemoveBg.value = true;
rbPath.value = false;
rbAlpha.value = false;
rbSubject.value = true;
cbCrop.value = true;
inpPercent.text = "3";
cbMaxPixels.value = true;
inpMaxPixelsWide.text = "1200";
inpMaxPixelsHigh.text = "800";
listFormat.selection = 1; // 0=JPG, 1=PNG
listJpgQuality.selection = 8;
inpSuffix.text = "";
cbRenameWeb.value = true;
I've tried to name the variables clearly, so it shouldn't be difficult to figure out what is what, and change the values to anything you prefer.
Copy link to clipboard
Copied
I've done a few more updates. About the progress bar, I figured out the real cause. It just needs to call app.bringToFront() before closing the palette used for progress. Doh! Works great now. Also the webpage for the script is set up. All the options are explained. Also included in the download now.
http://www.marspremedia.com/software/photoshop/batch-web-images
Copy link to clipboard
Copied
William, this is AWESOME! Thank you for doing this. Your script is far easier and nicer than any of the older more complex scripts I have seen so far. I'll most certainly donate to your support your work.
Can I ask a favor? I'm not a scriptwriter or a dev guy but could you make a small change so that outputs don't change the case of the text to lower case? It would be great if it doens't change the cases of text at all, if that's possible. The model numbers we have in our system are all uppercase and the converted files need to match that but any characters after the numbers don't matter on case so usually I type those grammatically, upper and lower case.
Copy link to clipboard
Copied
Thank you for your generous contribution. Users like you are why I keep writing scripts.
About your request, you can disable the option "Rename for web". That's what is changing names to lowercase, along with replacing URL encoded characters to dashes (spaces for example). But if you want the the URL encoding option but leave letter case alone, I'll be happpy to add a sub-option for the letter case that you can disable. Again, thank you so much. I really appreciate the support. It's how I make a living.
Copy link to clipboard
Copied
Thanks again, William. Thinking about it, I think it might be a great option for disabling the letter case. That way I could still denote the web version over the full res version in the file names and others could have the choice if they should want it.
Copy link to clipboard
Copied
Done. I've added a separate option "File name lowercase". Default is false. It works independent of "Rename for web" option that now only corrects characters that require URL encoding but leaves letter case as-is. Script and documentation are updated on my website. Go to the link to download the latest. Thanks for the feedback. I really appreciate it. The best of my scripts are built on user feedback, where all the great ideas come from.
https://www.marspremedia.com/software/photoshop/batch-web-images
Copy link to clipboard
Copied
I made a few more tweaks. I realized the code I used for saving JPG is better suited for print work (I come from the print biz) and uses baseline. I updated the script to use progressive, 3 scans. Better for web images. Also @wayne_carey how about marking my answer as the solution? It is, I hope. It helps my reputation here <smile>
https://www.marspremedia.com/software/photoshop/batch-web-images
Copy link to clipboard
Copied
@willcampbell7 – I'll mark it as *one* of the correct answers! :]
Copy link to clipboard
Copied
Hi Stephen,
Thank you so much for posting this link in my other thread. I've never downloaded a script from any forum and wanted to make sure that its safe. Can you please confirm this is approved by Adobe and contains no malware or issues? Sorry I'm just always very cautious. Please confirm and thank you both!
Copy link to clipboard
Copied
Hi Stephen,
Thank you so much for posting this link in my other thread. I've never downloaded a script from any forum and wanted to make sure that its safe. Can you please confirm this is approved by Adobe and contains no malware or issues? Sorry I'm just always very cautious. Please confirm and thank you both!
By @Kaijukilluh2099
I don't work for Adobe nor can I say what they approve of or not.
William provided the script as a download file and also the source code which you can work with to create your own script file:
https://prepression.blogspot.com/2017/11/downloading-and-installing-adobe-scripts.html#Photoshop
However, you then have to trust the source code! :]
You were also given instructions in the other topic on how to do this by creating your own batch action if you are not comfortable using 3rd party resources.
Copy link to clipboard
Copied
Thanks William, I'll test out the latest version!