🚨 Heads up! This course is no longer supported. Check out our Figma Essentials course - it's our go-to UX design tool.

Blurring backgrounds and objects in Adobe XD

Course contents
SECTION: 12
Working with Illustrator 10:07

Questions

0
You are not following this thread
0
You are not following this thread
1
You are not following this thread
0
You are not following this thread

Course info

89 lessons / 10 hours 32 quiz questions 17 projects Certificate of achievement

Overview

Hi there! My name is Dan & I’m an Adobe Certified Instructor. I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.
 
Throughout the course I’ll invite you to participate in a real-life freelance project which I’m working on. It’s a project that requires a fresh website and mobile app interface. This will prepare you for dealing with real world projects if you choose to move towards a UX/UI career path.
 
This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step. If you already have some UI/UX Design experience but want to get up to speed using Adobe XD then this course is perfect for you too!
 
First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.
 
I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.
 
An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.
 
One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.
 
There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.
 
It is now time to upgrade yourself & learn Adobe XD. 


What are the requirements?


  • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

What am I going to get from this course?


  • 87 lectures of well-structured, step by step content.
  • Learn to design websites & mobile phone apps.
  • Work with fonts & colors. 
  • Prototype your designs with interactions. 
  • Test on mobile phones. 
  • Send your designs for feedback & commenting.
  • Export production ready assets. 
  • Create your first UX brief & persona. 
  • Create quick wireframes. 
  • How to use premade UI kits. 
  • Learn professional workflow tricks & shortcuts. 
  • You will get the finished files so you never fall behind
  • Downloadable exercise files
  • Forum support from me and the rest of the BYOL crew
  • All the techniques used by UX professionals

What is the target audience?


  • This course is for beginners. 
  • Aimed at people new to the world of design & user experience. 
  • No previous Adobe XD experience is necessary.
  • For anyone that needs to add ‘UX Design’ to their portfolio.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We're awarding 'Pass' level certificates for this course.

You can work your way towards your 'Pass' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don't forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We're awarding 'Merit' level certificates for this course.

You can work your way towards your 'Merit' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

Hi everyone, we're going to take our darkened background...

and blur the background, and darken it...

we'll show you how to actually blur objects as well...

and we'll do something kind of fancy ...

where, you know, this kind of like UI on the top...

and it's blurring the background, to kind of stand off, kind of cool...

so blurring stuff, objects and backgrounds, in this video, let's get going.

All right, what should we start with...

let's start with the map one, because it's cool, and it's the simplest, actually.

I'm going to speed this up, I'm just going to import a background image.

So I just put in an image, drew a white rectangle...

and then added some text, and to make that background blurry...

all you do is select the object on top, you say...

I would like the background to be blurred...

at the moment it's probably a little bit too blurry...

I want it to be this, like kind of hinting at the background...

still, making this legible.

You can play around with how light or dark it is...

depending on kind of what you're doing...

so I'm going to go just a little bit whiter than I need to...

this last one here is like how much of the original shape you can see...

so if your shape happened to be, like at the moment, red...

you can't see anything, but watch this...

if I raise this up you can start to see that red rectangle, is it...

maybe occasions where you need both...

both, seeing a bit of the original object...

and maybe lightening and darkening it...

so that's how to do that one.

So let's look at doing the background blur...

so we kind of did this thing, let's say it's still too much detail...

so I'm going to select on this, and let's look at...

Object Blur first, just on its own, so you, stay over there.

I can click on an object, let's say it's already dark, it's not...

but let's say it's dark enough and we can read all this...

we just want it blurry, out of focus...

you can say, you, my friend, instead of Background Blur...

you say, you are 'Object Blur', there you go.

The only problem with object blur is that...

you get this kind of like fuzzy edge...

you might like that, it might be perfect...

if you don't like the fuzzy edge you've got a couple of things to do...

you can make sure the background is not of a high contrast color.

So I could say, you are full of white...

so that when this guy's on here it's just not that noticeable...

but you got that kind of ghosting...

and you're like, "Yeah, I really like it"...

so what I do is--

you can actually mask it again, so watch this...

I've got the shape here, I'm going to bring it to the front...

just to be clear, I'm going to grab the 'Rectangle tool'...

I'm going to draw a rectangle inside of it...

select both the blurry thing, and this new square...

and just like we did before, we're going to use...

the 'Object', 'Mask with Shape', and then that blurry object...

can you see, he's in there, he's kind of like trimmed off the outsides.

So that is one way of doing it, and that's the way I often do it...

to get rid of the blurry edge, is to mask it afterwards...

then you can stick this back on top...

and use that to control how dark it is, if you need to...

because you'll notice that the Object Blur, at the moment...

if I go inside of it to click on it, because it got masked, remember...

you can see that even though it has an Object Blur...

there's none of that extra stuff, that the Background Blur had...

you know, we could lower and darken it, maybe that'll come around.

So we've got these two, and I'm going to send them to the back...

to the back, you, to the back, I'm using my shortcuts...

remember, that's this one here, 'Send to Back', 'Shift-Command-['...

or 'Ctrl-Shift-[' on a PC...

so that's how to background blur it...

and play with the opacity...

look at that, cool.

The other thing you could do is, kind of what we did up here...

but it doesn't, it doesn't always work...

so I'm going to show it to you in case it works better in the future...

or it might work perfectly for what you need.

So I'm going to-- what are we going to do...

let's get rid of that guy, and let's get rid of that guy...

actually, let's get rid of this whole thing, and we'll start with this one.

The alternative is, because you might be like...

well, why don't we just use the Background Blur like we did...

you kinda can, so watch this...

if I say, Background Blur...

the problem with it is...

is that just doesn't get blurry enough, and it does a weird kind of blur...

they seem to be two different blurs, like...

look at that, that's full blur, that is also a full blur, that's so different...

that's why I don't use this one much, this might change...

there might be more control in here...

because it would be perfect...

because you can control the lightness and the darkness of it...

but, I don't know, gives it this kind of like...

angelic heavenly glow to it all.

I just don't like the, whatever the method they're using...

to blur the background behind it, so I use this method...

where I blur the object, might have to trim it up...

because the edges get a bit fuzzy, and then just lay that over the top.

Yeah, easy and painful, depending on what you want to do...

you can click on any odd object, and to say...

you are blurry, there you go...

that might be what you want from this whole video...

should have started with that, but if you...

I don't know, I wanted the background blur...

so that's what we've done, yeah.

All right, I hope you enjoyed the video, I will see you in the next one...

but it won't be for a little while, because it's Friday, hooray...

it might not be your Friday, but it's my Friday...

and it's the last video of the day, hit my targets today...

and I will see you again in the very next video, and it will be Monday...

I wonder if you can tell the difference in my voice...

will I be more excited, well, probably less excited every Monday morning...

but that is the end of this video, blurring fantastic-ness...

I will see you after the weekend.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • Cookie policy
  • © Bring your Own Laptop Ltd 2026