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.
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.
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:
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.
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?
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.
If I understand the question, it's actually even easier than that. You don't need a mask or boolean or anything. Just drop a rectangle on top of your image, then set the linear gradient on that rectangle such that one side of the gradient is full opacity, and the other side is 0% opactiy. Then tweak settings and positioning of gradient until you like it. Done!