Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Blend mode is being ignored when exporting in XD

Community Beginner ,
Oct 22, 2019 Oct 22, 2019

Copy link to clipboard

Copied

I am trying to export a design in XD that uses a blend mode on an image. Unfortunately, when I go to export it, the blend mode does not carry on to the exported design. I have attached two images, one is the exported image and the other is a screenshot of what it should look like.

 

Views

3.3K

Likes

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 1 Correct answer

Adobe Employee , Nov 21, 2019 Nov 21, 2019
Hi Vishu, XD blend modes are applied on the image against a background. When exporting image only, we don't export background, therefore no blend mode effect will be visible on the image. If exporting whole artboard then blend mode will be visible. Another option for you will be to have a white rectangle behind, make a group from image and rectangle and export. This way the blend mode will be visible. Regarding second issue you mentioned, I was not able to reproduce it. Is it possible to send me...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 22, 2019 Oct 22, 2019

Copy link to clipboard

Copied

Well, I just test out the same scenario and if you use Image Blending mode with Clip Masking (Mask With Shape) then it is giving very wired results wheres as without Mask with Shape it is fine. Refer the screenshots  - 

 

Screenshot 2019-10-22 at 11.33.29 PM.png

 

Screenshot 2019-10-22 at 11.36.30 PM.png

 

Screenshot 2019-10-22 at 11.35.02 PM.png

 

Vishu Aggarwal
Adobe Certified Instructor, Professional and Expert

Likes

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
Adobe Community Professional ,
Oct 22, 2019 Oct 22, 2019

Copy link to clipboard

Copied

Well, this is how it looks in XD - 

 

Screenshot 2019-10-22 at 11.43.41 PM.png

 

Vishu Aggarwal
Adobe Certified Instructor, Professional and Expert

Likes

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
Adobe Employee ,
Oct 31, 2019 Oct 31, 2019

Copy link to clipboard

Copied

Hi there,


Thank you for reaching out and sorry that you're experiencing issues with blend modes in XD. Would you mind trying to export the whole artboard and let us know if it's respecting the blend modes effect?


Thanks,
Harshika

 

Likes

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
New Here ,
Mar 18, 2020 Mar 18, 2020

Copy link to clipboard

Copied

This is not working for me. Even if whole artboard is exported, it doesn't show the blendmode.

Likes

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 Beginner ,
Mar 19, 2020 Mar 19, 2020

Copy link to clipboard

Copied

What I have found is if you have an image using a blendmode and you group it with something else the group also needs to be set to the blendmode.

Likes

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
New Here ,
May 21, 2020 May 21, 2020

Copy link to clipboard

Copied

Thank you Flaketimez this is corrrect, solved it for me.

 

Commonly occurs when you have a masked image group but the Overlay is applied to the image inside the mask group and not the group itself.

 

Layers as follows

 

- Group ---- Export This

- - Mask Group ---- Apply Overlay

- - - Rectangle (Mask)

- - - Image

- - Colored Rectangle

 

Likes

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
New Here ,
Oct 16, 2020 Oct 16, 2020

Copy link to clipboard

Copied

Thanks it works, you saved my day!!

Likes

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
Adobe Employee ,
Mar 19, 2020 Mar 19, 2020

Copy link to clipboard

Copied

Hi,

Can you please attach some simple XD file with your scenario in which the issue is reproducible?

I added an image to an artboard, applied a blend mode to the image, export it to png and seems to work.

 

Thank you

Likes

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
New Here ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

@HARSHIKA_VERMA  can you please help me with that 

I'm frontend developer I'm now working on design made by adobe xd
there's an image with blend mode appear like that in design
Screenshot_1.png


but when i export it it appears like that & use it in my website 

Screenshot_1.png

how can I fix this problem

Likes

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
New Here ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

LATEST

@HARSHIKA_VERMA  can you please help me with that 

I'm frontend developer I'm now working on design made by adobe xd
there's an image with blend mode appear like that in design

Screenshot_1.png

but when i export it it appears like that & use it in my website

Group 710@2x.png

Likes

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
Adobe Employee ,
Nov 21, 2019 Nov 21, 2019

Copy link to clipboard

Copied

Hi Vishu,

 

XD blend modes are applied on the image against a background. When exporting image only, we don't export background, therefore no blend mode effect will be visible on the image. If exporting whole artboard then blend mode will be visible. Another option for you will be to have a white rectangle behind, make a group from image and rectangle and export. This way the blend mode will be visible.

 

Regarding second issue you mentioned, I was not able to reproduce it. Is it possible to send me the file with that artbord so we can narrow things down?

 

Thank you,

Corina Murgila

Likes

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
Participant ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

This is still an issue... 

 

Adobe please can we get a fix on this?! It's pretty fundamental.

Likes

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
Adobe Employee ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

Hi,

Can you please send me a sample XD file where you can reproduce the issue?

I was not able to reproduce it. Thank you!

 

Likes

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
Adobe Employee ,
Aug 13, 2020 Aug 13, 2020

Copy link to clipboard

Copied

Hi Naomi,

 

Sorry for the frustration. As Corina requested for the file for testing purpose. Please upload the file to a shared location such as Creative Cloud or Dropbox and then share the URL with her or me over a private message so that we can investigate on the issue.

 

We'll try our best to help.

 

Thanks,

Harshika

Likes

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
Participant ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

Hi Harshika,

 

Thanks for coming back to me - I've just tried to create a new file to share with you and I now can't reproduce the problem either. I guess there was a temporary bug that's since been fixed by restarting my machine.

 

Thanks anyway, I'll share if I come across the issue again.

Naomi

Likes

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
Adobe Employee ,
Aug 17, 2020 Aug 17, 2020

Copy link to clipboard

Copied

Thanks for coming back to us and sharing that the issue is fixed for you. Please feel free to update the discussion if you face the issue.

 

We will be happy to help.

 

Thanks,

Harshika

Likes

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
New Here ,
Aug 21, 2020 Aug 21, 2020

Copy link to clipboard

Copied

Hi,

 

I am having the same issue also and it is driving me crazy. Can I share my XD file with you?

 

Regards,

 

Rob

Likes

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
Adobe Employee ,
Aug 23, 2020 Aug 23, 2020

Copy link to clipboard

Copied

Yes, please!!

Send me the file.

 

Thank you!

Likes

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 Beginner ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

I just had this problem and it seems that if the blend mode is set on a path inside a mask group, the blend mode is not applied when i export to png. 
(but if i set the blend mode on the mask group, then it works) 

Likes

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
Adobe Employee ,
Aug 25, 2020 Aug 25, 2020

Copy link to clipboard

Copied

This is great! I was able to reproduce it with masks and logged a bug.

We'll look into it!

Thanks again!

Likes

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 Beginner ,
Oct 14, 2020 Oct 14, 2020

Copy link to clipboard

Copied

Nothing you wrote is working, either exporting the artboard or goup objects or with a white rectangle or anything, I tried everything and it's still an issue, does not export with blend mode (lighten on a dark background). Have to reproduce the image in photoshop so I can export it with the blend mode.

Likes

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
Adobe Employee ,
Oct 14, 2020 Oct 14, 2020

Copy link to clipboard

Copied

Hi!

 

Sorry for inconvience.

There is a known issue for export when blend mode is applied inside a mask group. This is your case? If not please send me the file.

The team is looking in the problem as we speak and will be fixed in some future release.

As an workaround try to apply the blend mode on the mask group, and not inside. I hope that works for you.

 

Thank you,

Corina

Likes

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