Moodboard Demonstration

Today I am going to look at when I am planning a project and want to put some ideas together and start working on the visualizations for that project. One thing I would do there is put a mood board together and maybe explore some shapes and colors from the images and various artifacts, digital artifacts that I might collect. So, here is an example an output I might have from that. So, I am going to show you how I might go about putting this together. In the past, I?ve used Photoshop maybe even Powerpoint to put something like this together. Today I am going to show you how I do it using Adobe XD.
Here?s something I was working on before, and will do something similar now with Adobe XD. You can see here I was working on color variations based on an image. And I was working with the color wheel a little bit too.So we will take a look at those things.
So, when I open up XD I pick a shape that suits me. In this case I am going to go with the iPad shape for the artboard and I am here with my blank artboard and I can label this whatever way I like so if this is my color scheme. (Alnendas). You can also see here that I have a folder of various things collected up that I wanted to work on. And I have some images that I want to work on. And I also want to show you over here in my browser I?m working in Unsplash which is a great resource for free imagery. And you can see some rather beautiful images here by this photographer Ronald Cuyan. I also would use Pixels and Pixabay and other sites like that to get, to collect up ideas for my mood board. And this also makes it easier in that they are copyright-free.
Okay so we?ll open up our XD again. And what we can do is drag and drop an image straight into XD. Now if I drag and drop it like that it will be the full size. So I have to size it down using my mouse here.
So I?ll just show you another way. Sometimes I do this. So if I draw a rectangle here, like this, just an empty rectangle. And I grab my image and drop it in there it will fit right into that. So, now I can just resize it whatever way I want. And I am fine with that. And so, what I am going to do here is just show you how I work through my color scheme then. So I am going to draw box here and with the fill color over here I am going to get rid of the border but with the fill color I am going to use color picker and I am going to pick this primary color that main color from the image itself here. And I now am going to select the Move or Select tool here.
And I am on a mac so I am going to hold down the option key to make a copy of that. And again I go to my color picker and find a shade I like to work with from here. Maybe something a little bit darker. And I can always change these up later on if I like. So another copy of that. And this time I am going to go with something in this blue area here. Okay. And I think I actually like a lighter variation of that. So I am going to go with that one. And with these if I want to resize them down a little bit, I can just do that. And I am going to take one more color and this time I am going to go for a dark color in his clothes. And I might have another go at that and may pick something a little bit more lightness is hitting there.
So they?re the four colors I am going to use on my project now. And if there is some variations of particular color I would make a copy of that down to my next panel of colors here. Now with XD it has the option to repeat grid and I show you how that works. So if I drag out I get the rectangle repeated. I am just going to move that over a little bit.
Now the problem with this is if I want to change on of the colors here so I am going to for this time color variations you can see there it?s changing them all. SO that?s not what I want to happen. So because I used a grid to do this I am now going to have to ungroup or take the grid out so I am going to do an ungroup grid there and now they are individual.
So when I go to change this so I work with each one of these and I can use the previous color to guide me. Bring this up another few notches. And then for the last one here I can use color picker pick this last one and bring it up a little bit more.
Or another direction. So there is my color scheme. And now just hold down the spacebar here and I?ll move over a little bit and command or control minus will zoom you out. I am going to create another artboard here and I want it to be the same size so I will use the guide just to line it there. And click. Sorry wrong tool. There is the artboard tool! So click and I just want to show you mood board and I am also going to use color.adobe.com here.
So again if I want to bring in images and I don?t want to be bothered with having to resize them I am going to drag them in and I just drag them into a shape like that. So I?ll draw another one more fill like this. And pull that one in.
So if I go to color.adobe.com I can again work on here with color schemes. And figure out what color suit me. And it also has options here for changing the type of harmony you might want. So if you want analogous colors like this that are side by side you just start with a color scheme and then kind of work on there, work with the variations.
And the greatest thing about this is if you are logged in you can save this color them and you can download them as well. And you can also look at other people?s them so if you see something you like you can download that.
Now I just took a screenshot of the color scheme I wanted so again I can just drag and drop that in here. So that is how pen me with my creative process and just figuring out what kind of elements I want to work with. So once your finished this you can go ahead and save. If you have adobe cloud it can be synchronized in to two other machines you are working on.