Learn how to blur backgrounds and images in Adobe XD.
- [Instructor] Now, you can add drop shadows, and adjust the transparency of items, to make sure constant stands out, but really what I want to do now, for this gray bar, is I actually want to turn this gray bar into a nice sort of frosted glass look, so you're actually going to see the image behind it, it's just going to be blurred out. That the effect that I want. Selecting that bar, going down here to background blur, checking that, and there you have it. Looks great already, because it blurs out that background.
I can adjust it. I can make it more blurry or less blurry. I kind of liked it at about 20, around there it looks pretty good. I can adjust the brightness, make it brighter or darker as well. In general, I think that looks pretty good, 20 and 15, and then I can also make it less or more transparent as well. That looks pretty good. I like how it just makes this actually pop a lot more, but I'm going to be beyond that, because I actually want to give this box a nice glow. I'm going to draw out another white box, I'm going to turn off the border, and now with this white box selected, I'm going to give it a blur, going to check that box, but I'm going to change it to object blur.
That actually blurs out that object, and you can see that it actually kind of gives that box just a nice glow. That's what I'm going for. I'm going to shrink this a little bit, and I'm going to just adjust the stacking order. This is how I do this. I will take this logo, right click, bring to front, now it's in front of everything, and now I can just kind of move that kind of behind it. That's what I want to do, is just give this logo just a nice little glow, and kind of gives this more of a glossy sort of reflection that we have going on now as well.
This course shows everything you need to know to design your first website with Adobe's new prototyping app. Learn how to lay out a design, import graphics, and add headers and body copy. See how to create complex screen designs with repeating lists and grids that are as easy to change as they are to create. Then find out how to add new pages and use screen elements from the iOS, Android, and Windows UI kits that are built right into Adobe XD. Once the design is done, author Paul Trani shows how to add interactions and transitions to demonstrate how the website will "work" from one screen to the next. Plus, learn how to share a fully interactive prototype with other designers and clients, and export artboards and other assets to use in site development.
- Creating and importing graphics
- Adding text and effects
- Creating new pages
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Prototyping an entire website
- Sharing and exporting prototypes