In Adobe XD see how easy it is to add drop shadows and blur elements so content is more legible.
- [Voiceover] Adding what I like to call effects to your content to make it stand out is really helpful, especially in this case. A lot of times you're gonna want your text to kind of pop out more and just be easier to see. And that's what I'd wanna do here. I can select any one of these elements, but I can double-click on this Great Wall of China text and then just right down here if I really want that to stand out from that image I can add a Shadow. Gives me that subtle shadow. Notice how I can change the transparency, so it's fully opaque and you can see it already stands out a lot more.
Notice there's also an offset. I'm gonna set those to zero and this is the blur in the end right here. Maybe one or two would give it definitely a sharper edge, but I kind of like how that looks. Just let it stand off enough so I don't have to adjust the opacity, 'cause I still wanna keep those images nice and bright. So that looks pretty good, just adding a drop shadow is all I need to do, that's just like one simple effect that I can do pretty much anywhere. Not only on text, but also on images or shapes, whatever the case may be.
Just give it the offset and the blur that you want and everything looks good from there. But let's go beyond that, because I don't wanna give everything a drop shadow, there has to be an easier way, especially when it comes to body copy and more content. Well, what I wanna do now is I wanna create sort of a content screen. So I'll just zoom out a little bit, Cmd + -, or Ctrl + - if you're on a PC, and I'm gonna hold down the Alt key and just click and drag, I'm able to duplicate that screen. And I'll just drop it underneath, right here.
So I'm gonna make the Great Pyramid of Giza screen. So in order to do that I really need to use these two elements, but not the rest of it. Well, I can shrink this up, since it is a repeating grid, shrink it up, something like that, or even a little further, so it's on top of that image, and check this out, Ungroup Grid. Done. Just what's showing is then the objects that get kept. They're still grouped and I can always Ungroup them, but I have access to those graphics and I can stretch that out, I can just make it 100% opaque, it's gorgeous, this is what I want in this case for this screen, it looks really good.
But what I wanna do is I wanna add some content right down here. This is my text content that's gonna appear right here. So this is my text content. And yes, I could change the color to white, but that still isn't enough. What I wanna do is I actually wanna drop in the actual content in there. So I'll go to my desktop and I'll just grab this FeaturedText, it's just a text file, but whatever's in that text file will replace the text I drop it onto, and that looks, again, more like the actual content that I actually wanna use.
Alright, so for this text here I want it to stand out and rather than giving it a drop shadow what I can do is I can create a new rectangle, it's actually gonna be over the top of that text and I can change the color. You can see that definitely it's overlapping the text. Let's turn of that border. But I'm just gonna send it backward, so that text is on top. So this is one way of doing it, is just giving it a colored box, so it stands out, but what I can do is I can select this rectangle and go down, I'll turn off the fill, and I'll go down to Background Blur and I'll select Background Blur.
And look what it does, is it blurs that background, still helps me feel that I'm near, in Egypt, near the Great Pyramid of Giza, but I can start to control it as well, make it less or more blurry, as well as control the brightness. So this is what I like, just enabling me to just kind of make this look really good in this case and helping my content stand out from the background in this case.
Learn how to lay out a screen design with graphics and text and import vector and raster images. See how easy it is to create complex screen designs, complete with repeated lists and grids that are as simple to change as they are to create. This goes for any mobile screen type: iOS or Android, tablet or smartphone. Once the design is done, author Paul Trani shows how to add interactions and transitions to see how the app will "work" from one screen to the next. The end result is a full-featured prototype that can be shared with designers, developers, and clients, and broken down and exported as assets for use in development.
- Creating your first Adobe XD project
- Working with graphics and text in Adobe XD
- Importing assets
- Building additional screens for different display sizes and platforms
- Creating UI elements
- Using Repeat Grid for easy prototyping of lists and recurring elements
- Adding interactions to elements
- Creating transitions between screens
- Publishing and sharing a prototype
- Exporting artboards and assets