Hi, my name is Reno and welcome on
LivingWithPixels. Today, we're going to
dive into Adobe Xd. So, if you're interested
in learning Adobe Xd you want to get into the
world of web design, but you've never
used the tool and you know that this
is the right tool to create websites
because it is, then this video is for you. We're going to create
this project together. It's a very simple header
image for a travel website. It's not really a
complete website, but it's just to
show you the basics. It has a button over here. It has a shadow in
the background. It has this cool font. I'm going to give you all the icons and the text and
the fonts and the images that you're seeing over here, so you can download them. So, let's just get started
with this project. All right, so, the first thing
that you're going to see if you open Adobe Xd is this screen. I see my recent
files over here because I've already
created a lot of projects inside of Adobe Xd. But what you're going to do if you want to
design a website is you want to go into the
custom size over here. This looks like a website, but it's not the right
size for a website design. What I suggest you
do is always start with 1400 by 800. If you then press Enter, you're going to
get an art board. This is your artboard and this is where we're
going to create the design. Now, let's go over the
basics really quick. It's a very simple tool compared to all the
other Adobe tools. So, if you've worked
in another Adobe tool this will not be that hard. On the left over here, you
have your selection tool, you have the rectangle,
the circle, the triangle, you have the line tool, the pen tool that you maybe
know from Photoshop, and of course the text tool. Over here, you
have the design and a prototype feature. For this video, we're going to
just focus on creating the design because we're not going to
make it too complicated. And over here, you
have the controls. So, if you click on
a specific item, you can change the controls of that specific
item over here. So, that's actually
all you need to know. You can zoom in with commands and then scroll on a
Mac or on a Windows. I think it's Alt,
so just zoom or if you're on a
MacBook or on a laptop you can just use your fingers on your track pad to zoom in or you can use the
tool over here to zoom in on a specific
point on the canvas. Right now I'm going
to zoom out. By the way, you move around in your artboard
by holding space. So, if you hold space you can move around
your artboard. So, you zoom in,
you press space, and then you go back to
your selection tool. So, if you're
designing websites, you always have space
on both sides. Because all websites have
the content in the middle and then there's white space on the left and on the right. And you want to prepare that. And you're going to prepare
that with the grid option. So, if you check
this grid option, you're going to see a
few settings over here. I've already set mine up. So, you can just
copy these numbers. You need two columns. You need 1140 in width. That's the distance
from here to here. And over here, you're
going to need 130. And if you're going
to use these numbers, you will have the
perfect size for an average
modern website. So, this is my advice to
start with, all right. So, just leave that
click away, all right. So, now we're going to
import our first image. And I have prepared all of the things that I
need for this tutorial in this folder and you can download all of
these files in the description. It's just one link download
it onto your computer, unzip it and then you will
have the same files as me. So, the first thing
that I'm going to do is grab one of those images. I've just grabbed those
images off unsplash.com. That's also a nice tip if you
want to get into web design. Unsplash.com is a great
website to get your images. If you need a photo of
Amsterdam, for example, you're just going
to click on it. And you can freely
use these pictures because these pictures
are copyright-free. So, that is super nice. So, I've prepared
these two images. So, we're going to
go back to Adobe Xd, open the finder, and you can just
drag in an image from your folder
or your Explorer and just drag it in here and then it's very big. So, I'm going to zoom
out a little bit and I'm going to make
it a lot smaller. You can just drag the
corner over here and place it inside
of your artboards. Just do it like this and
then place it in the middle. You will see those
blue lines, which will help you align
your image, all right. I'm going to zoom in for now. And right now I want
to lock this image, so I cannot move it anymore and that is nice when you're
working with a lot of things on top of this image. So, I'm going to right
click and click on lock. You can also use command
L or Ctrl L on Windows and then we're going to
work with our first text. So, we're going to click
on the text tool over here and you're just going to
click somewhere over here and we're going to
create a title. So, for example,
I'm going to type Travel & Go, that's the logo
or the company. So, now we are inside
of the text tool, I'm going to click again
on the selection tool. And now I can
change the settings of this title over here. You can easily make a
title bigger and smaller by grabbing this little
circle over here. That's the easy way, but you can also just type
in a number over here. So, for example, 62 or another number. You can change the font or
the typeface over here. And I've also prepared
two fonts over here that you can install
on your own computer, which I'm using
in this tutorial. So, I would advise you that you can install
these fonts before you're
going to move on so you will have the
same style as me. But of course, you can
also use your own fonts it doesn't really matter. So, now I'm going
to change this one to Montserrat and it's a very modern font. For this tutorial, I'm going to use
the bulls version. Maybe you only have the bulls
version and that's okay. And now you're going to see
that it looks like this and to make it a
little bit nicer, I'm going to change the
spacing over here. And this is the space between the individual
characters. So, for now, I'm going to type in -40. And now look at the text, boom! Now it looks more like a logo instead of a text. So, that's all I'm
going to do for now, I'm going to zoom out. Make sure you're on
the selection tool, drag it over here, resize it to a
little bit smaller something like this, and make the color white. The colors you can
change them over here. So, if you click
on this color, you could just pick
a color over here. So, for now, I'm going
to grab the white and I'll just click outside
of the artboards, all right. And by the way, don't worry
about these blue lines you can just uncheck
them over here if you want to see
the full result. But right now,
we're using them to align all the
objects, okay. I have added this
little triangle to make it look
more like a logo. So, I'm also going to show
you how you can do that. So, I'm going to go
back to my design file and I'm going to
click on the text and then I'm going to
click on the rectangle. And now I'm going to
drag a rectangle, and you can do all
kinds of shapes. But I recommend
that you use shift so it will always be a perfect rectangle. So, if you then release it somewhere around here. At first, release
your mouse click and then release the shift. I'm going to click on
the selection tool uncheck the border. So, we will not
have a border. And I'm going to give it a
color that is somewhere, something like
this, all right. Click back on the
selection tool, zoom in a little bit, and align it. Okay, I'm going to make
it a little bit smaller. And for this tutorial, I'm
going to leave it like this. It's not a perfect logo,
but it's something right. Okay, so, now we are
done with the logo and if you want to drag the
logo to another place, then you need to
select both of them. So, Adobe Xd has
a group option. So, what you can do is you can click
on one of them, hold shift and then
click on the other item so they are both selected and then press command G or right mouse click
and then group. So, command G is
create a group. And now you can
just drag the logo as one piece. So, right now what
we're going to do is we're going to
create the bottom. So, I'm going to go
back to my design. I'm going to create
this section over here. And as you can see,
the seven over here has opacity because you can see the water through the character. So, that's a pretty
cool effect. It's also pretty easy to do. So, I'm going to go
back to my design file and I'm going to
grab another text, click over here, I'm going to type
command zero, and now it will be, remember that we were, we were still on montserrat. So, that is nice. Click over here, make this one a lot bigger
or something like this, align it to the left. And now, we're going
to duplicate this one. If you press Alt
and then you drag, you can make a
duplicate of an item. Now, make this one smaller, align it to somewhere
like this, retype, so, you double-click it,
and then you can type it. So, I'm going to do something like this,
oh, of course not. It's, it's three out of seven and not seven out
of three, okay. So, now I've changed the text and now all I need to
do is click on my seven and align it a little bit. And if the mouse
doesn't work, you can also use
your arrow tools on your keyboard to align
it the way you like. Zoom out a little bit
and now press five. And if you press five the opacity over
here will change. If you press seven,
it will be 70%. If you press two it
will it'll be 20%. So, now I'm going
to press five and it will be 50%. And now you can look through
the text over here. So, that looks
pretty cool already. So, now we're going to
create the button over here. So, we're going to go
back to my design file. I'm going to zoom
in over here. First, I'm going to
select the text tool. So, click on the text tool. Click over here and type
something like Sign up. Click on the selection tool and make this one 16. To make a button look nice, my advice is to
always use 16 or 15 for the text size. Otherwise, it will just
look a little bit cheap or your button
will be too big. So, 16 or 15 is
always a nice size. So, now I'm going to click
on the rectangle tool and I'm going to
drag a rectangle just over the canvas, something like this. And then release it, uncheck the border. Now, I want to get
the same blue color as the triangle that
we had created before. And Adobe Xd has a new
feature for this. So, press space
and just drag it and make sure that you can also
see the triangle over here. Now press I and if you press I you're going to get
this eyedropper tool, this color eyedropper tool. And if you click it, then it will select
that exact same color. So, this is pretty nice. You can also select
something like this, green for example, if you want to match your
button with the scene, that's pretty nice but
for now, I'm going to just select this
blue over here, zoom in again. And now, I'm going to make
this a rounded rectangle. How you can do that is go
back to the selection tool and easily just drag one
of these in the corners and just drag it like this. And as you can see, now
it becomes a button. You can also do this by changing this
number over here to maybe something like 100 and then it will
also be rounded. So, now I'm going to
place this rectangle under my text. But if I'm going to do that it will be above my text. And this is where you
need the layers, because the layer of
the text needs to be above the layer of the
button background. So, if you click over here, you can see a layer's
icon over here and you can see all of
layers that we have created inside of this file. You can see your
rectangle over here and the sign up
text over here. The rectangle need to be below our sign up text. And now, we can drag it up and align it properly. Zoom out a little bit
to see if it works. And the button as you can
see is still way too small. So, I'm going to grab
one of the corners press Alt so I can skill it on
all of these sides and make it a
little bit bigger. Maybe even bigger. To make it look really nice I'm going to zoom out. And this looks pretty good. So, now, I'm going
to zoom in again, click on the text, hold shift, and click
on the background. So, we have selected
both of them and we're going to
group those again so we can select
the whole button and align it to the right. Now, if you also want
to align this button to the same height
as this one, you can select both of them. So, this group, hold shift and this group, and now use this
tool over here. And this will then align both items on the same line. And now we're going to
go to the social icons because we also have some
social icons over here and these are super
sharp as you can see, much sharper than the
image in the background because these are
vector icons. And for vector
icons in Adobe Xd it's best to use SVG files. So, I've also included a
few icons for you to try inside of the downloads. In the social media
icons folder I've included a YouTube
icon, Instagram, and a few other platforms. So, I'm going to go back
to the exercise file. I'm going to zoom in,
click on the finder and select a few icons
that you want to get. For now, I just want
to get Snapchat, Instagram, and YouTube. That will be enough. I'm going to drag
them onto the canvas and I'm going to drag
them actually outside of our artboards. So, click over here, zoom out, and now you're going to
see that these icons are way too big. So, first of all, we're going to align
them properly. So, just grab all of them and then click on
this tool again. So, they will be aligned
at the same height. Now, if one of those
icons is too big you can of course also,
with shift resize them. But for now, this is good. We want to make them right. So, select all of them and this is the nice
thing about SVG icons. You can change the color
inside of Adobe Xd. So, make them white over here and click outside of it. By the way, if you want
to get icon files, you can use a website
like flaticon.com. And on a website like
this you can get icons, a lot of them for free. As you can see, I've
downloaded all of these icons for a client project and I can just use
that on the website. So, that's pretty nice. So, I'm going to go
back to my Adobe Xd grab all of them and make them really small. So, resize them, but don't forget
to press shift while you resize them. Make them really
small, zoom in, drag them into
your artboards, zoom in again. Make sure that your right
one is aligned like this. And now, I want to have a lot more
space between those items and Adobe also has a
nice tool for this. So, if you just drag
one of those items to the left and you... By the way, hold shift, so it will be just on
one straight line. And don't forget to first
release your mouse and then the shift. And then if you
select all of them, so, I've now selected
only the YouTube one. So, I'm going to also select
with shift the Instagram one and Snapchat one. And if I click on this icon, it's going to give
it the same space between those icons. So, I'm going to click on it. And as you can see, now
it has the same spacing between all of those icons. I think this is a
little bit too much. So, I'm going to make it a
little bit less spacing, something like this. I'm going to select
all of them again, click this icon again, and now we are
done, all right. So, for now, I'm
going to just uncheck the grid
option for now. I'm going to close the layers and
we forgot one thing and that is the shadow
on top over here. Because you can't really
see this logo very well. So, if you go back
to my final design you can see that there's a nice
shadow over here because, let me turn it off. You can see the difference, this is a super
nice soft shadow, I will show you how
to create that. So, we're going to go back. I'm going to grab
the rectangle tool, make a big rectangle,
something like this. First, let's adjust
some settings. Uncheck the border, go to color, click on solid color, and
click on linear gradients. Now, what you want to do, the top one needs to be 100% black and the bottom one also needs to be black, but this one has to
have 0% opacity. Because if you do that, then it will
create a gradient and in this case, it's a... And in this case, this creates an
upside-down shadow. So, that is really nice. So, now click on the
selection tool again make sure you align
it in the corner. Make it bigger, like this. And now we need to
move it to the back. So, open the
layers panel again and drag it under almost everything. So, I'm going to place it
right above the image. And if I do this, boom! You're going to see that
logo will be on top and the button
will be on top, and this is way too intense. So, what you want
to do now is play with this opacity. So, for example, make that 50, 55. And now, if you release it, click this one away. I actually think that
these one are too big. So, I'm going to
select both of them and make that smaller. And now, we have a
pretty similar design to this one and the only thing now we have to do is of
course insert this text. And this text by the way
has a very nice shadow. Let me turn it off
so you can see it. Then it starts
floating a little bit. So, I will also show
you how to do that and then we have
the final design. So, again, go to
the text tool and click over here
and type in Travel. Click the selection
tool again, make it really big. go to your folder and
in the fonts folder, the font is called
great wishes. So, if you've already
installed it, you can go to your Adobe Xd and type in great wishes. And as you can see,
we now have a super, super nice font
inside of our design. If you want to align this one in the exact middle
of your canvas, you can also use this
one and this one. And now, it will be
aligned in the middle. But now the text is
in front of his face. So, click on the
background image again. It's locked so, we're going
to unlock that for a minute. Drag that one down and now lock it again. And now, that looks
a lot better. Last thing that we need to
do is click on the text and we're going
to add a shadow. Zoom in so you can really
see what you're doing, uncheck it, and this is a very
subtle shadow, but we want to make
it a lot bigger. So, I think I did
something like 10 and maybe 30. And if you increase this one the shadow will be lower. And if you increase this one the shadow will
be more blurry. So, zoom out a little bit and we can almost not see it. It's a very soft shadow. So, I want to make it a
little bit more intense. Click on the shadow and
increase the opacity like this. Don't make your
shadows too intense because that looks cheap. And now, if I uncheck it, you're going to
see that the text really starts levitating. So, yeah, I think this
is a pretty cool result and if you want to learn
more about Adobe Xd, I'm creating a course
about Adobe Xd. So, if you've
liked this video then you might be
interested in that course. I'm going to give everybody
who watched this video a discount for the course. If you want to get
that discount there's a link in
the description, just fill in your email and I will email you
when the course is out and there will be
a discount link within that email
that you can use to sign up for the
complete Adobe Xd course. But I just hope that you really
liked this basics video. If you want to get
more videos like this maybe a little bit more
complicated design, just leave a comment below on what website you
want me to make and I will create a
tutorial about it. Thanks again. This is LivingWithPixels, the channel where you're
going to learn how to design, build, and
sell websites. So, thanks a lot
for watching. So, if you like this video
please give it a thumbs up because that really helps the
algorithm of this channel and that allows me to create
more videos like this. So, yeah, that's it.
I hope to see you in the next video.
