Jump to content
You must now use your email address to sign in [click for more info] ×

Affinity Photo: saving clipping path into JPEG


Recommended Posts

Hello Affinity World!

 

I am new to Affinity Photo. It is my first important step to abandon Adobe from my Mac. Learning to use Affinity Photo goes well, but there is one section, where I am struggling:

 

Many times I have to work with JPEG files of product shots on a neutral (mostly white) background, that have one or more embedded clipping paths. Opening such a file in AP does show me these paths and I can clip (or blank out) the white background. So far, so good. But Affinity Photo doesn't seem to be able to save (or export) JPEGs with these clipping paths. Or at least, I can't see the logic behind it. 

 

Example: Composing an Image in Affinity Photo

I have a background and want to place (import) a product shot on that background. I'm choosing a JPEG with embedded clipping path. But when the image is placed, it has a white background, and I can't find an option to use the embedded clipping path, to remove the white background. The only way I found to do that, is to open the JPEG separately in AP, then chose the path (background is now transparent), select the main object by clicking on it, copy it to the clipboard go to the composite image and paste it.

 

Example: Saving a JPEG with clipping path

In Photoshop: I create a selection, refine it, click on "make work path from selection", double click it, to make it a clipping path, and save it as JPEG. The path is now embedded into the JPEG file, and when placing it within an InDesign document, I can choose the clipping path to remove the white background. But I could not find a way to save a path into JPEG with Affinity Photo. As long as Affinity Publisher is not out and hasn't proven it's capabilities, I am tied to InDesign. So I need to create and save JPEGs with clipping paths. – TIFFs, PSDs and so an are no option!

 

So finally the question: How exactly can I save JPEGs with embedded clipping paths, so that I can chose them in InDesign to remove the background?

 

Many thanks for you help!

Link to comment
Share on other sites

  • Staff
2 hours ago, MEB said:

Hi sonorman,

Welcome to Affinity Forums :)

When exporting to JPG click the More button in the Export dialog and select/tick Convert clips to paths. I still have to test if it's working as it should in InDesign.

 

I think that this is saved in the metadata, clipping not being part of the JPEG format itself, so you will need to have Embed Metadata checked too.

Patrick Connor
Serif Europe Ltd

"There is nothing noble in being superior to your fellow man. True nobility lies in being superior to your previous self."  W. L. Sheldon

 

Link to comment
Share on other sites

Hi MEB and Patrick.

 

Thanks for your replies! Unfortunately, that does not work. I already have checked the two options "Convert clips to paths" and also "Embed Metadata".

 

As you can see in the first two screenshots (German version), the image has two masks. In the export dialogue I tried every possible setting, but when I check the exported file in photoshop, there is no path embedded. (See screenshot number three.) Therefore, I can not work with it in InDesign, because it always has a white background. 

Bildschirmfoto 2018-02-04 um 11.26.29.png

Bildschirmfoto 2018-02-04 um 11.26.48.png

Bildschirmfoto 2018-02-04 um 11.30.46.png

Link to comment
Share on other sites

As I said in my first post, PSD, TIFF and so on are no option. The files are way bigger than JPEGs. The latter are much easier to handle and to share. The quality is also fine, as long as they are not to much compressed. 

 

JPEG embedded clipping paths are essential for my workflow. Affinity Photo can handle them, but, as it seems, it can't write them. This should be fixed.

Link to comment
Share on other sites

Please let me explain, why this is impractical for me:

 

I'm often getting product shots from manufacturers. These are mostly HiRes JPEGs and it can be dozens or hundreds of photos. A folder might be 200 or 500 MB large. If I had to save all these photos to TIFF or PSD (PNG doesn't work, because it can't handle multiple clipping scenes – just one object), the same images would be 50 GB or more. This is totally inefficient and unnecessary. Also, if the JPEGs already contain a clipping path (often the case), I could use them directly to compose images in Affinity Photo, but, as described in the first post, AP can't handle the clipping path's when placing/importing a photo. This is a serious downside for me, and the reason, why I still often have to use Photoshop. 

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

Clipping paths are not really part of the JPEG standard. Photoshop implements them as one of a multitude of possible Image Resource Blocks (a type of metadata) stored at the end of the file. The Path resource format section of the Adobe Photoshop file specification hints at how complex this resource can be, & even that Photoshop itself may ignore some of this metadata.

So while it is possible that Affinity might someday support reading & using some of this metadata, it is not likely it will be anytime soon or that it will ever support all the path resources as well as Photoshop does.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

12 minutes ago, R C-R said:

So while it is possible that Affinity might someday support reading & using some of this metadata, it is not likely it will be anytime soon or that it will ever support all the path resources as well as Photoshop does.

In this case, all depends on how Affinity Publisher will handle JPEG and paths from Affinity Photo. In the moment, this issue makes Affinity Photo for me unusable in 50% of my work. I alway have to start up Photoshop CS6 to create JPEGs with work path, that can be selected in InDesign.

 

BTW: Are there any new life signs of Affinity Publisher?

Link to comment
Share on other sites

24 minutes ago, sonorman said:

I alway have to start up Photoshop CS6 to create JPEGs with work path, that can be selected in InDesign.

Gee, it is almost as if Adobe planned it that way .... :35_thinking:

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

  • Staff
On 6/8/2018 at 10:37 AM, R C-R said:

Clipping paths are not really part of the JPEG standard. Photoshop implements them as one of a multitude of possible Image Resource Blocks (a type of metadata) stored at the end of the file. The Path resource format section of the Adobe Photoshop file specification hints at how complex this resource can be, & even that Photoshop itself may ignore some of this metadata.

So while it is possible that Affinity might someday support reading & using some of this metadata, it is not likely it will be anytime soon or that it will ever support all the path resources as well as Photoshop does.

Hi sonorman,
Welcome to Affinity Forums :)
This is possible in Affinity Designer/Photo. To use clipping paths in Affinity Designer/Photo and export as JPG's do the following:

  1. open the image you want 
  2. create the clipping path with the Pen Tool as usual (make sure it's then filled with a color - any color will do)
  3. drag the path layer over the thumbnail of the image layer in the Layers panel (you should see a small vertical blue line appear when you drag the path layer over the thumbnail of the image layer - drop it at that point. You have nested the path to the image layer.
  4. double-click on the path layer to give it a name - fill in the name you want (you need to do this so you can later select this path in InDesign/Photoshop)
  5. go to File Export select JPG, set the options you want as usual, then click the More button and tick Convert clips to paths. Export the file.

You will find the clipping path(s) in the Paths panel if you open the JPG in Adobe Photoshop. Conversely JPG's with clipping paths saved in Photoshop will open as vector masks nested to the image layer in Affinity Designer/Photo.

Link to comment
Share on other sites

13 minutes ago, MEB said:

This is possible in Affinity Designer/|Photo.

For a jpeg file originally created in Photoshop, does this support or preserve all the 8 possible path records the clipping path might have, & somehow take care of the byte order difference between Windows & Mac records?

I understand how the method you described works with clipping paths created in Designer or Photo, but the original question involved jpeg files that already have one or more clipping paths embedded in them, presumably by someone using Photoshop.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

2 minutes ago, R C-R said:

For a jpeg file originally created in Photoshop, does this support or preserve all the 8 possible path records the clipping path might have, & somehow take care of the byte order difference between Windows & Mac records?

I understand how the method you described works with clipping paths created in Designer or Photo, but the original question involved jpeg files that already have one or more clipping paths embedded in them, presumably by someone using Photoshop.

Exactly. 

Link to comment
Share on other sites

  • Staff

Hi sonorman,
Affinity Photo/Designer preserves multiple paths from a JPG exported from Photoshop. The only thing you currently can't do is placing the JPG file directly on canvas  in Affinity apps either using the File ▸ Place command, dragging it to the canvas from Finder or using the Place image Tool (Affinity Designer only) and keep the clipping paths. If you open the JPG files directly the paths will be there as multiple clipping paths (multiple nested vector masks). You can select the main image layer (with the nested vector masks included and copy to another document if you want/need).

If you have a JPG with clipping paths that are not recognised when opened (not placed) in Affinity Designer/Photo please upload it here for us to take a look.
Thanks.

Link to comment
Share on other sites

  • 2 years later...
On 6/8/2018 at 12:21 PM, MEB said:

Hi sonorman,
Welcome to Affinity Forums :)
This is possible in Affinity Designer/Photo. To use clipping paths in Affinity Designer/Photo and export as JPG's do the following:

  1. open the image you want 
  2. create the clipping path with the Pen Tool as usual (make sure it's then filled with a color - any color will do)
  3. drag the path layer over the thumbnail of the image layer in the Layers panel (you should see a small vertical blue line appear when you drag the path layer over the thumbnail of the image layer - drop it at that point. You have nested the path to the image layer.
  4. click the thumbnail of the path layer in the Layers panel to select it, then double-click on the path layer again to give it a name - fill in the name you want (you need to do this so you can later select this path in InDesign/Photoshop)
  5. go to File Export select JPG, set the options you want as usual, then click the More button and tick Convert clips to paths. Export the file.

You will find the clipping path(s) in the Paths panel if you open the JPG in Adobe Photoshop. Conversely JPG's with clipping paths saved in Photoshop will open as vector masks nested to the image layer in Affinity Designer/Photo.

Hello,

following this steps almost worked for me. The exported JPG file has the path but is showing a gray background
after open it. When i do this in Photoshop the file looks like a PNG file. The background isn't there. Even looking the
preview image in finder is not showing any Background. Using Photoshop for this is not a option for me. 
Thanks in advance
J.A

Link to comment
Share on other sites

  • 6 months later...

I fully understand sonorman situation because I was looking for it as well, but will explain why what he is trying to is imperative in my usage. When image files with transpariences are used in a file, on my many RIPs it will either cause them to fail or lock-up. So, instead of using files with transparencies we would use a clipping path and allow the clipping path to cutout that image (so to speak) and the RIP will not have to read the image file transparencies instead of us having to create the file and convert the file to .jpg so it will be a flattened file for use through a (i.e. KONICA) RIP.

Link to comment
Share on other sites

  • 2 months later...
On 6/22/2020 at 5:11 PM, MEB said:

Hi Chicco,
Welcome to Affinity Forums :)
Can you upload the .afdesign file and the exported JPG using this link for me to check out please? Thank you.

Hi,
I have the same issue with the clipping path in jpgs. I uploaded you the example-files: a jpg and an affinity-photo-file. Would be great if you can help. Thank you in advance. 
Jay

Link to comment
Share on other sites

  • 1 year later...

I think we do have the same problem / use case ...

 

Let me explain in Adobe terms, but i'm open to any other workflow that does not duplicate files (handling that is not an option with our catalogue).

I do have a product image on white background and a grey drop shadow, in a flat jpg file. No transparencies are involved, neither on layers nor as alpha transparency on pixels.
In photoshop, with the path palette, i draw a vector path (path palette, not masks!) and name it "clippingpath123". This path just lives "in" the image with no visual effect in Photoshop (it's not a vector shape that is visible as an object, and it's also not a mask applied on a layer but the image as a whole). I draw that path so that it lies around the object without the shadow. Saving that file as jpg keeps that vector path inside the file.  I assume this is some meta data if it's not within the jpg specification?   (exactly the same thing goes for tif files, this works with them equally.)

Background: We get these jpg images from our photographing agency / customers. It's far faster for them to create clipping paths than doing real alpha transparency for the shadows.  We have catalogues of thousands of these images from past projects and new ones coming in.

Now, if i place that image in Indesign, the image is visible with its white background as a rectangle.
I can now go to Object > Clipping Path > Options > select "photoshop path" > select the path by its name given > apply.
Now, the image (the main object) is shown within the path shape, everything else is clipped away (including the shadow).

Now I duplicate that image and send it to the background, then remove the clipping setting again for the copy only, and set that object to multiply.
Now if i have something else in the very background that is not white, the whole image (including the shadow) of my image is multiplied on that background (making the shadow pseudo transparent). If i then place my first copy (with clipping, and no multiply effect) on top of that, i preserve the main content (the object) without multiply effects and keep it in its original color. Both grouped together means i finally get a clipped object with a multiplied shadow on a background. 

In shorter words: in Indesign, i have two copies of the same image: once with a clipping applied, and once with "multiply" applied. stacked upon each other and grouped, i get a transparent shadow and maintain the main image intact.

This can be scripted so all those steps can be done with applying a keyboard shortcut.

 

So in affinity programs:

in APhoto, the clipping path embedded in such a jpg does not seem to be visible anywhere (neither as mask on a layer nor elsewhere – or i'm not looking at the right spot?)

in APublisher, placing that image just creates the rectangle with white background, no option to apply the clipping on the image then (or i'm not looking at ther right spot?)

If i open an image in Aphoto, and there (not in photoshop) create a clipping mask on a layer, set the checkbox in jpg export to convert that into a clip path, and then re-open that jpg in Aphoto, i can see a clip path applied to that layer (visually in the image, and in the layers pallette) – so it's somewhat actually there?

If i place THAT Aphoto-clipped jpg in Apublisher, that clipping is not applied though ... it's always a rectangle.  If i double click that image to "edit" it within publisher(?), i see the clipping path applied though. If i save / close, it's gone in publisher layout again.  If i open it that way, copy that clipped layer, close it, and then paste that copy into the layout, i get the clipped version. But that's quite a drag to place it exactly on top of the first copy, so ... not really an option(?)

Also, re-creating the paths in Aphoto also is not an option ...

 

So question is:

Is there anything i have overlooked, or is it just not (yet?) possible to do it that way?
Thing is, i've worked in several agencies by now and it seems to be common practice to work with product images that way – it may be old-fashioned and only an "adobe standard", but the existing data is real and can't be converted that easily.

Link to comment
Share on other sites

On 6/8/2018 at 12:21 PM, MEB said:

Hi sonorman,
Welcome to Affinity Forums :)
This is possible in Affinity Designer/Photo. To use clipping paths in Affinity Designer/Photo and export as JPG's do the following:

  1. open the image you want 
  2. create the clipping path with the Pen Tool as usual (make sure it's then filled with a color - any color will do)
  3. drag the path layer over the thumbnail of the image layer in the Layers panel (you should see a small vertical blue line appear when you drag the path layer over the thumbnail of the image layer - drop it at that point. You have nested the path to the image layer.
  4. double-click on the path layer to give it a name - fill in the name you want (you need to do this so you can later select this path in InDesign/Photoshop)
  5. go to File Export select JPG, set the options you want as usual, then click the More button and tick Convert clips to paths. Export the file.

You will find the clipping path(s) in the Paths panel if you open the JPG in Adobe Photoshop. Conversely JPG's with clipping paths saved in Photoshop will open as vector masks nested to the image layer in Affinity Designer/Photo.

Edit: My bad, cannot reproduce any more
Even this post is years old, i think it might be not fully correct.

this post describes adding a curve / vector shape as mask in nested position  Normally clipping path is just the other way:

  • create a curve or use a vector shape, defining the clipping path. No fill color required.
  • then nest to child position the bitmap / pixel layers you want to clip.
  • Export as jpeg.

Using this method i got jpegs rendered correctly in all apps like Windows Photo, web browsers etc.

But Affinity staff probably knows their App far better than me. Maybe both methods produce identical results. 

 

Edited by NotMyFault

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.