How to draw your own custom icons in Adobe XD

How to draw your own custom icons in Adobe XD


Hi there, this video we’re going to draw
custom icons in XD. We’re going to use something
called the Boolean operator. We’re going to draw this
little Account Man. We click him, and view your account. It’s super easy, let’s jump in now,
and work it out. One of the drawing techniques
in Adobe XD… is something using Boolean operators. It’s a really weird word for using shapes
to cut out other shapes. Kind of like a cookie cutter, or if you’ve
used Adobe Illustrator before… it’s like the Path Finder,
or the Shape Builder Tool. So I’m using the Ellipse Tool. I’m going to hold down ‘Shift’ to give me
a perfect circle when I draw it out. And I’m going to draw a couple of shapes,
so I’ll grab you. I’m going to draw one more. You could copy and paste it. Actually I just want these two,
I’m going to overlap them a little bit. So with them selected you’ve got
these four options… these four Boolean operators. It’s Add, Subtract – they’ve all
got shortcuts – Intersect, and Overlap. So I’m going to have four gradients. First one, Add, ready? Boom!
Easy, connects them both. This one here, two separate circles. This one here uses whatever
is at the front– this one’s called Subtract, is it? Subtract, yeah, uses whatever’s at
the front to subtract from the back. And if that role is reversed, if I bring
this large one to the front… and do the exact same operator… it will use the front one
to chunk out the back. You’ve just got to be, not careful,
but you just got to know– have the one in front that you
want to use as the slicer. This one here, let’s have a look.
So this one, intersect, is it? Intersect. So just wherever they overlap
is what’s left. And this last one here will cut
a hole there, Overlap. Now that’s all well in goodness,
you can build lots of shapes this way. And that’s how we’re going to build
that Login guy. You can see quite easily
how we’re going to do it. What’s really cool about these operators
is that they’re non destructive. Even though that looks like
a legit kind of shape… watch this, if I double click this circle,
can you see? Still kind of like a thing. This one here, if I double click it,
you can see.. this one here is actually kind
of a non destructible shape. So actually it’s still editable,
just a better way of saying it. Double clicked him, and kind of jump in,
you can kind of make adjustments. So it’s really handy, really cool,
not a one-way street. So what I want to do is
draw our little Account Man. So I’m going to do two circles. I’m going to select both of them,
I’m going to line them up. I find I end up drawing
like a little snowman. Accounts people– come on, account–
I’m drawing a– I’m squinting my eyes, thinking– So I’m going to join these two together. I’m going to go clip him,
that one little unit… then I want to slice the bottom off. And I’m going to–
so you can do more than one. These were just kind of one action,
we’re going to do two. I’m going to grab this, select these two… and then, which one do I want?
Have a guess. Subtract, that’s the one… and because this rectangle’s at the front,
you can kind of drive him off. Is that an Account Man?
It’s close enough. Anyway, looked good in my head. When I practiced it before this course,
it looked better, I promise. So I’m going to scroll it down,
or shrink it down to an appropriate size. I’m going to zoom in. And I’m going to get it sort
of fixed in here. Now I want to kind of zoom out and see–
I’m going to go ‘Command 1’… and work out what size I want
in terms of the Stroke. So I have no Fill,
I’m going to have a border of white. And I’m going to crank up this border size
to 2, it feels about right. The cool thing, remember, if you’re like,
“Ooh, that guy,” double click it… keep double clicking until you find
the bits you need. Am I going to make this guy better? That’s a bit better, here you go,
I like it better, anyway. ‘Command 1’. That my friends, is how to do basic things
with those Boolean operators. There’s tons of things you can make
by subtracting, minusing, and dividing. That means you don’t have to dig
around in the Pen Tool. We’ll look at the Pen Tool
a little bit later on… which is a lot more complicated,
if you haven’t used it before. All right, let’s get on to the next video. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course… there will be a link in
the description for that. Please give this video, on YouTube here… a thumbs up, really helps me
in what I’m doing. Also, consider subscribing to the channel. I release a video like this every week,
for your viewing pleasure. All right, bye.

One thought on “How to draw your own custom icons in Adobe XD

Leave a Reply

Your email address will not be published. Required fields are marked *