From the course: Affinity Designer for UX Design

Making color schemes and saving swatches - Affinity Designer Tutorial

From the course: Affinity Designer for UX Design

Start my 1-month free trial

Making color schemes and saving swatches

- [Instructor] For some people choosing a color scheme for any design project can be a difficult task. Color theory is a topic that's outside the scope of this course, but lucky for us, there's some handy tools in the Finney designer that can be used to create and manage color. In this video, I'll go over the various tools available to help you create and manage color in your own project. In print design we use the CMYK color model, which is fine when you're mixing color with ink, but in UI design, we're mixing light. So the RGB color model is the color model we use when dealing with color on screen. RGB color combinations of red, blue, and green light are mixed together to create other colors. The only problem I have with this model is that it can be really cumbersome when you're trying to come up with a color palette while using this model. So I would suggest you use the HSL color model to create your own color scheme. Let me show you how much easier it is to come up with a harmonious group of colors by using the HSL model. So I have a file here that's included in your exercise files, and basically you can use that file if you want to follow along with me, or you could just create your own little color scheme here with four boxes. So first I'd suggest picking one of the boxes and picking a color, so I'm going to go ahead and I'm going to pick maybe something in this green color here. Okay, now what you'll notice is that we have the color wheel up and by default that's how, if any designer starts, we're going to go over here to the top right hand side of the color panel, and we're going to select sliders and that'll give us a little bit easier control rather than, you know, the arbitrary wheel. Now it's in the RGB mode right now. So what I would suggest you do, it's change that to HSL. HSL stands for a hue, saturation and lightness, okay. So now what I would suggest doing is let's go ahead and grab our swatches here. I'm going to go ahead and drag that over here, because we're going to use the swatches pretty regularly as well with the color panel. So for our first swatch, what I would do is first create a swatch category of your own. So I would go add either application, document or system pallet. Let's just do a document pallet because we're going to just make sure that these swatches go with this document when we send it to somebody else, okay. And now you see that it says unnamed. So it's an unnamed category. So let's go over here and make sure that we rename it and we'll call this our custom swatch zero one. And now I'm all ready to go to start adding swatch. So the way that you add a swatch is either you can click on your item and then click this icon here. And it says, add current color palette as a global color. You want to use global colors and I'll tell you why in a minute here. So with global colors, you are going to be using colors throughout multiple art boards. And if at any time a client asks for you to change the color, using a global color, allow you to change it across everything instead of having to go through each art board and manually manipulate that. And I'll explain that more a little bit after we go through creating our scheme. So we've got our first color, right? So I'm going to go ahead and I'm going to show you how to copy that onto these other ones. If you use the eyedropper tool I'm going to hit I on my keyboard and I'm also going to make sure that I select this item here, hit I on the keyboard, and I'm going to click on this green, notice it changed the color of this object. So that's one way to add color. The other way we'll hit the V key, I'll say Command copy. I'm just like these two items and I'm going to hit Command + Shift V and now it's applied color to both those items at the same time, okay. So we have the same thing here. So now this is where the HSL comes in and makes it really easy for you. I would suggest either using saturation or lightness, not so much a combination of the two. So if I go here with lightness, I can lighten this up. I'm still within the same hue of green, but now it's a little bit lighter and I can keep going down that path and come here, maybe make this one even lighter than that. And then the last one would probably be the lightness. So now I have a scheme that works perfectly together. Now you may not need these many colors, and I would really suggest that you don't use this many colors, if you're a first timer, it could be confusing. What I would suggest is that you use two of those colors and then select two gray colors, okay. So if you go here to the gray's pallet, open that up and you can make a selection. So maybe I would take one that's dark and then one that's light, okay. And so now I have my main colors that are used, then I'll have this black and this lighter color, maybe that it's for the text in there or headers or something like that. And so now I have a nice color scheme that works. Now, if we go back to our custom swatch panel, I've only added that one. So let's go ahead and create global swatches for all of them, okay. And so now I have my little palette. I could use that with any design with this document, had I made it a application pallet, it would be a pallet that would be available in any project that I create and not just this document. Also, you could share this pallet just by going and exporting the pallet, and then somebody else could take your pallet and import it either as an application, a document or a system palette. So that is how you create a simple color scheme. So you could use in your own projects and it makes it really easy for you to figure out colors. Now there's one other way that you could do it as well. And if you click on one of these items here and you right click on that color, you can actually use these built in color schemes here. So you could add complimentary colors for this. And you'll notice that it's added a couple of swatches based on that. Okay, so play with that. But I think the best way for you to do it is to pick your main color, use lightness or saturation, do a couple of variations on that and then use a darker gray or a deep black and one light gray color. And then you'll have a perfect scheme that'll work with any of your application designs.

Contents