Lessons

Lesson Info

InDesign in XD

Hello everyone. If you're an in design user, I am going to show you how to take your skills from in design and how to connect it with adobe XD. If you've never used in design before, skip this video. You maybe you might watch out of interest but really it's just with the people who already have some skills in in design. We'll learn what you can and can't do to kind of bring stuff in. And then in the end we're going to I will do the starburst that's in design made. Then we'll do this repeat background thing here that's it's not made in the design. Just something we'll do at the end to pretty up that background. All right, you ready? Let's go. Alright. This video is for in design users. If you're not an in design user, okay? You can skip this one or just watch it. And but there are people who come to adobe XD from a more traditional print background. And there are lots of tools in design that you can use that you can bring into adobe XD. Not as much as illustrator or Photoshop but the co...

nnections there. I'll just show you quickly how to work with it. So I've opened up in design. You can open up a file. So file open. I've given you a file is in exercise files under images. There's a folder court in design and one of these two files will work. Try both. Try this one first I. N. D. D. And if that doesn't open try the I. D. M. L. Cool. The reason in design is handy is that often, especially a big companies or if you're using it before or if you're doing any print work, you're going to have lots of documentation that has the right fonts and colors, all that sort of stuff. So let's say that I've got my CC library open. If you don't have it open, go to window C C libraries. Okay. And I'm going to highlight this text here and say plus give me that text field color and I've added it to my swatches and now an XD. Okay. If I go to my CC libraries as long as you've added it to the right one, there's colors right? And I can start kind of using it. So let's select something. You fill it with that green there is there Phil okay, so it's an easy way to kind of bring brand colors in. Let's have a look still one more time. Select the text you bring in. Nice. The pen tool works the same If you're like, man, I'm a master at the pentacle in design or if you're not, you've been avoiding the pen tool for years. You'll notice that the pencils and pretty much all the adobe products because it's so useful. Okay, It's the same principle here, click once for our crown to get corners terrible crown. You get the idea and click and drag to get our weird little alien guy remember him from earlier. I'm doing the world's worst job. Here we go. So the pen tool works the same in both of them you can copy and paste. So you go, I love this Crown copy it. Just like illustrator, you can just paste it in there. It is there, you can use the, The official CC Libraries one as well. You can just drag it in there and it should appear in your libraries as well. So it doesn't matter which way you want to bring it in. Actually, it doesn't unsupported item. Weird. I just assumed that would work because it's vector. There you go. I have to unsupported elements. Sometimes you drag stuff and you're like, oh, and you're hitting refresh and you're like, why if you cook that thing, it refreshes the library. Like why isn't it coming up? It's because just check down here, you might have one unsupported element or two like me. Um, I've got this weird color grouping that doesn't come through. And can you see those victor's weird if you drag the exact same thing in from illustrator works perfect enough from the design. Good to know. The other thing that's missing out of there is see this color themes, it brings in colors by itself, but a color theme that I was playing with off screen. Um, doesn't come through. So there are things that don't, and this will just keep adjusting as time goes on. They're trying to build out XD super fast. So I bet you very soon it'll actually just start working. But copying and pasting works and it comes through as lovely victor that you can double click go inside switch colors for Okay, because there's some things that I just know how to do in, in design that I don't in any other program, like building a, building a table is so much easier in here or in this case I'm going to do a polygon tools. I'm holding down the rectangle tool to grab the polygon tool and I'm gonna click once and what kind of polygon, 100 by hundreds, fine Number of sides and 10%. Remember the last time I've done this. So it's gonna have loads of sides. This polygon It's going to have a little start and said, I'll do to show you. It makes it look a little sparkly one. If I click once again and turn it down to say 10%. It gives me like that little lovely round all badge sticker thing. That's how I buy my wine, right? That has a few of these on it. Don't even read it. Just some stickers. That's won some medals somewhere. It's about $10. So it's about utilizing some of the skills you already have in other programs and maybe assets you have lying around in documents already. Just copy it and place it, I'm gonna put mine there, I'm gonna make it bigger and I'm gonna use this in a second and actually just going to carry on and I wanna do some design work, a little production work, I want to add this, get some text in it, group it, turn it around and add that repeating background, you might hang around for that. That that's kind of cool but we're not going to do anything else within design, just a simple one copying and pasting basically you can get some colors other than that, we'll move on to the next video unless you want to hang around and we will do a little bit of stuff so and for the people that are hanging around I'm going to do a little bit of text and show you a little trick that says can I use. So first of all I want to say I was gonna say track track your sales little dashboard is gonna help you track your sales only use may be fair play, yep, But I use a white one I'm gonna make it all centered because what I wanna do right is I want to put it in here and then rotate it around and rotating it around is weird like if I start rotating something ah it can be a lot harder to do in web design and you're like well why it looks good in print okay but rotating text can have some unintended consequences and for me as a designer you might not go this high court but I know that like when I send this say swoosh at the top here. This thing here, my web developers probably gonna freak out. It's kind of like, well there's no way of doing a swoosh in code so I might have sold this to the client and they, it might be something that we just can't technically do. I know we can because I know I can do it and there's an SVG and SVG is allowed and how do I know that same with this text for a long time? I wouldn't do rotated text because it just caused lots of problems had to turn into an image. There's lots of things that were just a bit of a pain so there is a space there, I knew there was one there. Cool. And so how do I know that? This is okay. I'll show you a site that I use, it's called. Can I use so can I use dot com? This is all about using on our website. So I typed in rotate and it returns and here using CSS three CSS three to determine transformations including rotate, it tells you which browsers it's actually going to be compatible with and okay to work on. So if you're trying to support Opera Mini, I don't even know where Opera Mini gets used. It's globally used 2% and the version was from 2015 who's his opera? Somebody will know works fine on opera mobile so I can just know that you can see it just, you know, it works on IE for the last couple of versions. It works on adobe on the edge version works on work forever on firefox and chrome. So just a good way of seeing that. So, and there are just some things that you can type in here and figure out that might be all red, like this one here. So if you wanted to do this CSS backdrop filter, maybe background, gray scale Hugh using this. You can see it works on edge, it works on Safari but not on chrome. There's all sorts of like, it's just really handy to kind of get a little look and say that's totally doable. Can we use SVG is now SVG s so look, basic support is across pretty much everything. Even Opera Mini okay says the SVG animations is something I really want to start doing. But you can see it works in chrome, works on Firefox. SVG animation just like animated victor. Like the old Flash Okay, Opera Mini again, put another fight, but you can see it doesn't work on mobile for e plus, it doesn't work on any of the Microsoft stuff. So I wouldn't be like selling that to the client just yet. Anyway, it's a good thing. Anyway, something handy that I use, I thought I'd throw in there. So what I wanna do is I want to make my page, sorry crown. Not as another useful. I'm going to make this page longer. I want to do this cooler repeat grid thing with you. I need this to be bigger because it's going to have lots of my dashboard elements in it. So I want to grab this logo whereas it, I've got one as a symbol. Yeah, I use this white logo. Only. What I want to do is I want to rotate it around. I might disconnect it from the symbol because I'm going to destroy it anyway and I want to resize it so I am going to rotate it around how much just so it looks like it's kind of pointing up and down with the capacity using my shortcut keyboards. Remember just two on the top. If yours is acting like mine where there is stuff overlapping. That is totally my fault. That was just, I created the logo real quick and illustrator and haven't gone through and made it all nice. That's what I might do is instead of doing the capacity has just changed the color of it. It'll still look the same, but at least I don't have that kind of weird overlapping. I'll leave in the next. You might run into similar sort of problems. So now I want to do with him is I'm gonna group him and I'm gonna use the repeat grid. So if I repeat it, I want to do that kind of pattern. You start at the beginning. Okay, we're, but you can only do this right? You can only tighten them up and you're like yeah, that's not kind of what you want to offset it, right? So there's kind of like there's a there's a logo in the middle here. So what you can do is I'm going to grab this thing, all the different parts and group it so it makes it easier. Cool. So what I'm gonna do is copy it and have a second one in here. So I got two of them now and that's when you can kind of do this. Okay, so I might now it's hard to find the gap. So I'm trying to move around and find that purple gap to like, I'm gonna delete it. Actually, no, I don't need to delete it. Okay, I want to raise the gap, I need to come out of here and just kind of click on it once and now I've got a bit more space. Let me find the have opened it up a little bit, go back in. Alright, so that's what it's kind of looking to do. Well, mask this a little later on because at the moment we haven't covered masking, we'll do that in the next section when we look at images for the moment. Let's just get this repeating out, come to the edge there. And what I'll do is I'll stick both of these, send it to the back, so it's behind this blue thing, fake cropping, just putting the blue box over the top of it and with this whole thing, I'm gonna lower the opacity a bit more. That's the repeat kind of grid thing I wanted. It's a nice little pattern. There's our lovely rotated graphic was at the edge of my desk. There it is there. Don't forget Commander One as well to see how big he is. That is probably too big. Alright, that's gonna be it. We did in design. We throw in a little bit of production work at the end just to hide it. I hope you found something useful. Let's get into the next section of videos.