• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

JPEG with outline path to transparent PNG files conversion

Explorer ,
Jul 07, 2022 Jul 07, 2022

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?

TOPICS
Actions and scripting , macOS

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 4 Correct answers

Community Expert , Jul 07, 2022 Jul 07, 2022

Votes

Translate

Translate
Enthusiast , Jul 15, 2022 Jul 15, 2022

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

...

Votes

Translate

Translate
Enthusiast , Jul 22, 2022 Jul 22, 2022

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

...

Votes

Translate

Translate
Enthusiast , Jul 25, 2022 Jul 25, 2022

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

 

Votes

Translate

Translate
Adobe
Community Expert ,
Jul 07, 2022 Jul 07, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 07, 2022 Jul 07, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 07, 2022 Jul 07, 2022

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 08, 2022 Jul 08, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2022 Jul 08, 2022

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2022 Jul 08, 2022

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:

 

rip-folder.png

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):

 

atn.png

 

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:

 

output.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 08, 2022 Jul 08, 2022

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:

 

ipp-gui.png

 

The result, including sub-folders, preserving the input folder structure:

 

ipp-subfolder.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 11, 2022 Jul 11, 2022

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 11, 2022 Jul 11, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 15, 2022 Jul 15, 2022

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...

batch-web-images-01.png

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2022 Jul 15, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 20, 2022 Jul 20, 2022

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.

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 17, 2022 Jul 17, 2022

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.

 

batch-web-images-01.png

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 17, 2022 Jul 17, 2022

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.

 

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 22, 2022 Jul 22, 2022

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

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 22, 2022 Jul 22, 2022

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 22, 2022 Jul 22, 2022

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.

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 22, 2022 Jul 22, 2022

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 22, 2022 Jul 22, 2022

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

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jul 25, 2022 Jul 25, 2022

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

 

William Campbell

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2022 Jul 26, 2022

Copy link to clipboard

Copied

@willcampbell7 – I'll mark it as *one* of the correct answers! :]

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

LATEST
quote

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:

 

  1. Copy the code text to the clipboard
  2. Open a new blank file in a plain-text editor (not in a word processor)
  3. Paste the code in
  4. Save as a plain text format file – .txt
  5. Rename the saved file extension from .txt to .jsx
  6. Install or browse to the .jsx file to run (see below)

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

Thanks William, I'll test out the latest version!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines