How to add an overlay to an image using Adobe XD

With Adobe XD you can create custom UI/UX components, mockups, wireframes and more. It’s also a great platform that you can use to create different types of artwork.

One of the most common effects you might need to use for posters or other marketing material is adding a dark or light overlay over an image. This is often used to make the text above the image more visible so users can read the text more easily.

Learn how to add these dark or light overlay effects in Adobe XD.

How to add a dark overlay to an image

To add a dark overlay to an image, you must first import a photo or graphic element onto the canvas. You then need to add another shape over the original image to configure the overlay effect.

1. Drag a photo onto the canvas in Adobe XD.

2. Click on the in the left column square Symbol. This allows you to drag and drop a square shape onto the canvas.
3. Position the square directly over your image.

4. Highlight the square shape. In the properties pane on the right, change the background fill black.

5. With the square shape still highlighted, adjust the opacity level to 60%. The opacity allows you to see through the square image. You can see your original image with the square adding the dark overlay effect at the top.

6. You can adjust the opacity to whatever value you want if you want the overlay to be more or less dark.

If you’re just getting started with Adobe XD, check out our complete beginner’s guide.

How to add a light overlay to an image

There are several ways you can add a white overlay to an image.

1. If you still have a square shape over the original image, you can change that background fill Color white instead of black. keep that opacity Level to desired amount.

2. Alternatively, you can change the opacity of the original image itself without having to add an extra square. Highlight the original image and change the opacity.

If you’re interested in adding more effects and graphics to your projects, we’ll show you how to do it with Adobe Media Encoder.

Easily add overlays to your images in Adobe XD

Adobe XD is a great platform that you can use to add special effects to images. One way to add the overlay effect to an image is to add a separate square and configure the background color and opacity as shown above.

Hopefully, adding text over the image will make your text more readable for users.

Adding an overlay effect is just one of the many things you can do with Adobe XD. You can read further about the other various features that Adobe XD offers. This includes features like device canvases, time triggers, and hyperlinks.

This article was previously published on Source link