Highlighted

Gradient masking photo in XD

Participant ,
Jan 18, 2019

Copy link to clipboard

Copied

I trying to create my first website layout in XD. Since PS CS2 I was doing all work in Photoshop so it is realy hard to switch my brain   Now it's time for XD but I got first problem I need to create effect like you can see below. So I need to use gradient masking... but is it possible in XD? And if it's not do I have to use Photoshop first to create this, and then import banner to XD? I really want to switch from PS but so far I see many limits when using XD.

gradient-masking.png

Hi BryanPS

Thanks for using Adobe XD, you may use the steps mentioned here to mask the objects in Adobe XD Combine objects using Boolean operations and mask objects with shapes in Adobe XD and use Gradient fill with to get this kind of effect. You may also import assets from Adobe Photoshop CC as mentioned here- Bring assets from other applications into Adobe XD.

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

Views

5.4K

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

Gradient masking photo in XD

Participant ,
Jan 18, 2019

Copy link to clipboard

Copied

I trying to create my first website layout in XD. Since PS CS2 I was doing all work in Photoshop so it is realy hard to switch my brain   Now it's time for XD but I got first problem I need to create effect like you can see below. So I need to use gradient masking... but is it possible in XD? And if it's not do I have to use Photoshop first to create this, and then import banner to XD? I really want to switch from PS but so far I see many limits when using XD.

gradient-masking.png

Hi BryanPS

Thanks for using Adobe XD, you may use the steps mentioned here to mask the objects in Adobe XD Combine objects using Boolean operations and mask objects with shapes in Adobe XD and use Gradient fill with to get this kind of effect. You may also import assets from Adobe Photoshop CC as mentioned here- Bring assets from other applications into Adobe XD.

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

Views

5.4K

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

Copy link to clipboard

Copied

Hi BryanPS

Thanks for using Adobe XD, you may use the steps mentioned here to mask the objects in Adobe XD Combine objects using Boolean operations and mask objects with shapes in Adobe XD and use Gradient fill with to get this kind of effect. You may also import assets from Adobe Photoshop CC as mentioned here- Bring assets from other applications into Adobe XD.

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

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
Reply
Loading...
Participant ,
Oct 28, 2019

Copy link to clipboard

Copied

Hey BryanPS,

I thought I'd give a fresh look at this attempting to 'mask an email with a gradient' or having an image fade.  

I particularly use this method:

  1. Group your image and an object.
  2. Apply a 'black & white gradient' to your object. Adjust the gradient to have black set to 100% opacity nott one end and a white nott on the other end set to 0% opacity.
  3. Arrange your black & white gradient object below the image layer.
  4. Here's the magic, adjust your image layer to 'screen'.
  5. Boom! Now you'll have a gradient alpha gradient masking for your image.
  6. Optional Step: You can create a new object set to white and apply it to the bottom of your group layers.

Note: This can be used for images or more complex masking needs if you want to use any black and white image or alpha image.

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
Reply
Loading...
Community Beginner ,
Feb 02, 2020

Copy link to clipboard

Copied

What about exporting the image. 
For example, I have a gradient on the image, but when I export the image I don't want the gradient applied, as that should be done with CSS by convention and best practices. 

What's my best course of action for getting my asset to my developer without the gradient applied, so that the developer can add the gradient via CSS?

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
Reply
Loading...
Participant ,
Feb 06, 2020

Copy link to clipboard

Copied

If you want the deceloper to use css, I would just export the image layer, or rather send the image to the developer. Plus, send the example to the developer how you'd like it to be when coded and live for the site.

developing sites I typically ask for the image and the example so that when I develop I know exactly what the customer is wanting.


However, css gradients aren't supported on all browsers, namely iE7 etc. It would be best to use two images. The developer could stack the images and the top image could be a alpha image like a png with transparency. The transparency would be from the gradient mask created.

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