Hi, my word is Reno and welcome onLivingWithPixels. Today, we’re going todive into Adobe Xd. So, if you’re interestedin hear Adobe Xd you want to get into theworld of network blueprint, but you’ve neverused appropriate tools and you know that thisis the right tool to create websitesbecause it is, then this video is for you. We’re going to createthis project together. It’s a very simple headerimage for a travelling 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 inthe background. It has this cool font. I’m going to give you all the icons and the textbook andthe typefaces and the images that you’re seeing over here, so you can download them. So, let’s just get startedwith this project. All title, so, the first thingthat you’re going to see if you open Adobe Xd is this screen.I verify my recentfiles over here because I’ve alreadycreated a lot of projects inside of Adobe Xd. But what you’re going to do if you want todesign a website is you want to go into thecustom size over here. This looks like a website, but it’s not the rightsize for a website design. What I recommend youdo is always begins with 1400 by 800. If you then press Enter, you’re going toget an art timber. This is your artboard and this is where we’regoing to create the specific characteristics. Now, let’s go over thebasics really quick. It’s a very simple tool compared to all theother Adobe tools. So, if you’ve workedin another Adobe tool this will not be that hard.On the left over here, youhave your selection tool, “youve had” the rectangle, the roundabout, the triangle, you have the line tool, the confine tool that you maybeknow from Photoshop, and of course the text tool. Over here, youhave the specific characteristics and a prototype facet. For this video, we’re going tojust focus on creating the design because we’re not going tomake it too complicated. And over here, youhave the switches. So, if you click ona specific item, you can change the restraints of that specificitem over here. So, that’s actuallyall you need to know. You can zoom in with dictations and then scroll on aMac or on a Windows. I think it’s Alt, so time zoom or if you’re on aMacBook or on a laptop you are eligible to precisely use your fingers on your trail pad to zoom in or you can use thetool over here to zoom in on a specificpoint on the canvas.Right now I’m goingto zoom out. By the room, you move around in your artboardby hampering seat. So, if you contain infinite you can move aroundyour artboard. So, you zoom in, you press opening, and then you go back toyour selection tool. So, if you’redesigning websites, you always have spaceon both sides. Because all websites havethe 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 preparethat with the grid option. So, if you checkthis grid alternative, you’re going to see afew provides over here. I’ve already set excavation up. So, you can justcopy these lists. You need two columns.You need 1140 in diameter. That’s the distancefrom here to now. And over here, you’regoing to need 130. And if you’re goingto use these lists, you will have theperfect size for an averagemodern website. So, this is my advice tostart with, all right. So, just leave thatclick away, all right. So , now we’re going toimport our first likenes. And I “ve prepared” all of the things that Ineed for this tutorial in this folder and you can download all ofthese files in the description.It’s just one associate downloadit onto your computer, unzip it and then you willhave the same enters as me. So, the first thingthat I’m going to do is grab one of those idols. I’ve just grabbed thoseimages off unsplash.com. That’s also a delightful tip-off if youwant to get into web design. Unsplash.com is a greatwebsite to get your portraits. If you need a photo ofAmsterdam, for example, you’re just goingto click on it. And you can freelyuse these scenes because these picturesare copyright-free.So, that is super nice. So, I’ve preparedthese two idols. So, we’re going togo back to Adobe Xd, open the finder, and you can justdrag in an epitome from your folderor your Explorer and merely drag it in here and then it’s very big. So, I’m going to zoomout a little and I’m going to makeit a good deal smaller. You can exactly drag thecorner over here and residence it insideof your artboards. Just do it like this andthen place it in the middle. You will see thoseblue texts, which will help you alignyour persona, all right.I’m going to zoom in for now. And right now I wantto lock this image, so I cannot move it anymore and that is nice when you’reworking with a lot of things on top of this image. So, I’m going to rightclick and click on lock. You can also use commandL or Ctrl L on Windows and then we’re going towork with our first verse. So, we’re going to clickon the verse tool over here and you’re just going toclick somewhere over here and we’re going tocreate a title. So, for example, I’m going to type Travel& Go, that’s the logoor the company. So , now we are insideof the verse implement, I’m going to click againon the selection tool.And now I canchange the settings of this designation over here. You can easily make atitle bigger and smaller by grabbing this littlecircle over here. That’s the easy road, but you can also merely typein a number over here. So, for example, 62 or another number. You can change the font orthe typeface over here. And I’ve also preparedtwo fonts over here that you can installon your own computer, which I’m usingin this tutorial.So, I would advise you that you can installthese fonts before you’regoing to move on so you will have thesame style as me. But of course, you canalso use your own typefaces it doesn’t really matter. So , now I’m goingto change this one to Montserrat and it’s a very modern font. For this tutorial, I’m going to usethe police version. Maybe you simply have the bullsversion and that’s okay. And now you’re going to seethat it looks like this and to make it alittle bit nicer, I’m going to change thespacing over here. And this is the space between the individualcharacters. So, for now, I’m going to type in -4 0. And now look at the textbook, thunder! Now it inspects more like a logo instead of a textbook. So, that’s all I’mgoing to do for now, I’m going to zoom out. Make sure you’re onthe selection tool, draw it over here, resize it to alittle bit smaller something like this, and conclude the colouring white.The colours you canchange them over here. So, if you clickon this shade, you could just picka color over here. So, for now, I’m goingto grab the white and I’ll merely click outsideof the artboards, all right. And by the way, don’t worryabout these blue routes you can only uncheckthem over here if you want to seethe full ensue. But right now, we’re using them to align all theobjects, okay. I have added thislittle triangle to make it lookmore like a motto. So, I’m too going to showyou how you can do that. So, I’m going to goback to my blueprint record and I’m going toclick on the textbook and then I’m going toclick on the rectangle. And now I’m going todrag a rectangle, and you can do allkinds of shapes.But I recommendthat you use shift so it will always be a perfect rectangle. So, if you then liberate it somewhere around here. At first, releaseyour mouse click and then release the shifting. I’m going to click onthe selection tool uncheck the border. So, we will nothave a border. And I’m going to give it acolor that is somewhere, something likethis, all right. Click back on theselection tool, zoom in a little bit, and align it. Okay, I’m going to makeit a little smaller. And for this tutorial, I’mgoing to leave it like this. It’s not a perfect emblem, but it’s something title. Okay, so , now we aredone with the logo and if you want to drag thelogo to another target, then you need toselect both of them. So, Adobe Xd hasa group option. So, what you can do is you can clickon one of them, regard change and thenclick on the other item so they are both adopted and then press command G or right mouse clickand then group.So, bid G iscreate a group. And now you canjust drag the logo as one piece. So, right now whatwe’re going to do is we’re going tocreate the bottom. So, I’m going to goback to my motif. I’m going to createthis section over here. And as “youre seeing”, the seven over here has opacity because you can see the ocean through the specific characteristics. So, that’s a prettycool aftermath. It’s also pretty easy to do. So, I’m going to goback to my pattern file and I’m going tograb another verse, clink over here, I’m going to typecommand 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 biggeror something like this, align it to the left. And now, we’re goingto duplicate this one. If you press Altand then you drag, you can make aduplicate of an piece. Now, make this one smaller, align it to somewherelike 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 outof three, okay. So , now I’ve modified the verse and now all I need todo is click on my seven and align it a little bit. And if the mousedoesn’t work, you are eligible to useyour arrow implements on your keyboard to alignit the behavior you like. Zoom out a little bitand now press five. And if you pulp five the opacity overhere will change. If you press seven, well 70%. If you pulp two itwill it’ll be 20%. So , now I’m goingto press five and well 50%. And now you can look throughthe text over here. So, that lookspretty cool previously. So , now we’re going tocreate the button over here. So, we’re going to goback to my layout folder. I’m going to zoomin over here. First, I’m going toselect the textbook tool.So, click on the verse tool. Click over here and typesomething like Sign up. Click on the selection tool and make this one 16. To make a button look nice, my advice is toalways use 16 or 15 for the text size. Otherwise, it will justlook a little bit cheap or your buttonwill be too big. So, 16 or 15 isalways a nice size.So , now I’m going to clickon the rectangle implement and I’m going todrag a rectangle simply over the canvas, something like this. And then release it, uncheck the border. Now, I want to getthe same off-color dye as the triangle thatwe had created before. And Adobe Xd has a newfeature for this. So, press spaceand only draw it and make sure that you can alsosee the triangle over here. Now press I and if you pulp I you’re going to getthis eyedropper tool, this shade eyedropper tool. And if you sounds it, then it will selectthat exact same color.So, this is pretty nice. You can also selectsomething like this, dark-green for example, if you want to match yourbutton with the scene, that’s pretty nice butfor now, I’m going to simply adopt thisblue over here, zoom in again. And now, I’m going to makethis a rounded rectangle. How you can do that is goback to the selection tool and readily exactly drag oneof these in the corners and only draw it like this. And as “youre seeing” , nowit becomes a button. You can also do this by changing thisnumber over here to maybe something like 100 and then it willalso be rounded. So , now I’m going toplace this rectangle under my text.But if I’m going to do that it will be above my textbook. And this is where youneed the strata, because the layer ofthe text needs to be above the mantle of thebutton background. So, if you click over here, “youre seeing” a layer’sicon over here and you can see all oflayers that we have created inside of this folder. You can see yourrectangle over here and the sign uptext over here. The rectangle is essential to below our sign up text. And now, we can drag it up and align it properly. Zoom out a little bitto see if it works.And the button as you cansee is still way too small. So, I’m going to grabone of the angles press Alt so I can skill it onall of these backs and make it alittle bit bigger. Maybe even bigger. To make it seem really nice I’m going to zoom out. And this looks pretty good. So , now, I’m goingto zoom in again, click on the textbook, supported shifting, and clickon the background. So, we have selectedboth of them and we’re going togroup those again so we can selectthe whole button and align it to the right. Now, if you too wantto align this button to the same heightas this one, you can select both of them. So, the working group, accommodated change and the working group, and now use thistool over here.And this will then align both items on the same line. And now we’re going togo to the social icons because we also have somesocial icons over here and these are supersharp as “youre seeing”, much sharper than theimage in the background because these arevector icons. And for vectoricons in Adobe Xd it’s best to use SVG registers. So, I’ve also included afew icons for you to try inside of the downloads. In the social mediaicons folder I’ve included a YouTubeicon, Instagram, and a few other programmes. So, I’m going to go backto the exercise file.I’m going to zoom in, click on the finder and select a few iconsthat wishes to get. For now, I only wantto get Snapchat, Instagram, and YouTube. That will be enough. I’m going to dragthem onto the canvas and I’m going to dragthem actually outside of our artboards. So, click over here, zoom out, and now you’re going tosee that these icons are direction too big. So, first of all, we’re going to alignthem properly. So, just grab all of them and then click onthis tool again. So, they will be alignedat the same height. Now, if one of thoseicons is too big you can of course also, with alteration resize them.But for now, “its good”. We want to offset them right. So, select all of them and this is the nicething about SVG icons. You can change the colorinside of Adobe Xd. So, move them white over here and sounds outside of it. By the acces, if you wantto get icon files, you can use a websitelike flaticon.com. And on a website likethis you can get icons, a lot of them free of charge. As you can see, I’vedownloaded all of these icons for a consumer campaign and I can really usethat on the website. So, that’s pretty nice. So, I’m going to goback to my Adobe Xd grab all of them and conclude them really small. So, resize them, but don’t forgetto press shifting while you resize them.Make them reallysmall, zoom in, drag them intoyour artboards, zoom in again. Make sure that your rightone is aligned like this. And now, I want to have a lot morespace between those pieces and Adobe also has anice tool for this. So, if you time dragone of those components to the left and you … By the mode, nursed displacement, so it will be time onone straight line. And don’t forget to firstrelease your mouse and then the shift.And then if youselect all of them, so, I’ve now selectedonly the YouTube one. So, I’m going to too selectwith displacement the Instagram one and Snapchat one. And if I click on this icon, it’s going to giveit the same space between those icons. So, I’m going to click on it. And as you can see , nowit has the same spacing between all of those icons. I think this is alittle bit too much. So, I’m going to make it alittle bit little spacing, something like this. I’m going to selectall of them again, click this icon again, and now we aredone, all right.So, for now, I’mgoing to simply uncheck the gridoption for now. I’m going to close the seams andwe forgot one thing and that is the shadowon top over here. Because you can’t reallysee this logo very well. So, if you go backto my final pattern you can see that there’s a niceshadow over here because, let me turn it off. You can see the difference, this is a supernice soft shadow, I goes to show you howto create that.So, we’re going to go back. I’m going to grabthe rectangle implement, make a big rectangle, something like this. First, let’s adjustsome names. Uncheck the border, go to color, click on solid coloring, andclick on linear gradients. Now, what you want to do, the top one need now 100% blacknes and the bottom one likewise needs to be black, but this one has tohave 0% opacity. Because if you do that, then it willcreate a gradient and in such cases, it’s a … And in such cases, this creates anupside-down shadow. So, that is really nice. So , now click on theselection tool again make sure you alignit in the corner.Make it bigger, like this. And now we need tomove it to the back. So, open thelayers panel again and draw it under almost everything. So, I’m going to arrange itright above the persona. And if I do this, boom! You’re going to see thatlogo will be on top and the buttonwill be on top, and this is way too intense. So, what you wantto do now is play with this opacity. So, for example, make that 50, 55. And now, if you exhaust it, click this one apart. I actually think thatthese one are too big. So, I’m going toselect both of them and stimulate that smaller. And now, we have apretty same designing to this one and the only thing now we have to do is ofcourse insert this text. And this verse by the wayhas a very nice shadow.Let me turn it offso you can see it. Then it startsfloating a little bit. So, I will likewise showyou how to do that and then we havethe final design. So, again, go tothe text tool and click over hereand type in Travel. Click the selectiontool again, make it really big. go to your folder andin the typefaces folder, the font is calledgreat cares. So, if you’ve alreadyinstalled it, you can go to your Adobe Xd and category in enormous cares. And as “youre seeing”, we now have a super, super nice fontinside of our design.If you want to align this one in the exact middleof your canvas, you can also use thisone and this one. And now, it will bealigned in the middle. But now the textbook isin front of his face. So, click on thebackground image again. It’s locked so, we’re goingto open that for a minute. Drag that one down and now fastening it again. And now, that looksa lot better. Last-place thing that we need todo is click on the text and we’re goingto add a shadow.Zoom in so you can reallysee what you’re doing, uncheck it, and this is a verysubtle shadow, but we want to makeit a lot bigger. So, I remember I didsomething like 10 and maybe 30. And if you increase this one the shadow will be lower. And if you increase this one the pall willbe more blurry. So, zoom out a little bit and we can almost not see it. It’s a particularly soft darknes. So, I want to make it alittle bit more intense. Click on the shadow andincrease the opacity like this. Don’t move yourshadows too intense because that glances cheap.And now, if I uncheck it, you’re going tosee that the verse certainly starts levitating. So, yeah, I think thisis a pretty cool result and if you want to learnmore about Adobe Xd, I’m creating a courseabout Adobe Xd. So, if you’veliked this video then you might beinterested in that course. I’m going to give everybodywho watched this video a rebate for such courses. If you want to getthat discount there’s a connection inthe description, simply fill in your email and I will email youwhen the course is out and there will bea discount link within that emailthat you can use to sign up for thecomplete Adobe Xd course.But I just hope that you reallyliked this basics video. If wishes to getmore videos like this maybe a little bit morecomplicated blueprint, just leave a comment below on what website youwant me to make and I will create atutorial about it. Thanks again. This is LivingWithPixels, the channel where you’regoing to learn how to motif, structure, andsell websites. So, thanks a lotfor watching. So, if you like this videoplease give it a thumbs up because that really assistances thealgorithm of this path and that allows me to createmore videos like this.So, yeah, that’s it.I hope to see you in the next video ..
