Design for Developers

Creating a Palette Demo

Design for Developers

Check out a free preview of the full Design for Developers course

The "Creating a Palette Demo" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah demonstrates creating a color palette using some previously discussed techniques.


Transcript from the "Creating a Palette Demo" Lesson

>> Sarah Drasner: Demo Time, so how might I use one of these palettes, how might I make one of them? Well, let's say we're starting with an image even, so if you have an image that you're working with. And you're like, that is absolutely the image the image that comes on my home page, then it's even easier to work with color, right?

Because if you start with one of these images, you can build out your color palette from there. So maybe we'll go to Unsplash, we'll find, I kind kinda like that one, maybe download that. Have you guys used Unsplash before? Sometimes, yeah, it's nice, I actually wanna see if they have turquoise images, that's kinda a nice turquoise image.

Sure, all right, let's use this one, I kinda like it. All right, so if I go back into Photoshop, let's say we're using this composition that we made earlier, I'm going to add in File > Place embedded and Downloads.
>> Sarah Drasner: Okay, so now I've got my image and I scale it down.

>> Sarah Drasner: Will that fit, yeah, something like that, it doesn't have to be perfect. I think I'll do something like that maybe, okay, so you might notice that this isn't the same as that, right? So I might move that over, so I'm gonna get rid of the Grid for now.

So now I'm gonna go and I'm going to grab, I'm using a tool called the Magic Wand tool. And I'm gonna go grab the Unsplash image, you see this little thing with a circle in it? I hit that and it becomes a mask, so now I can use that image in my design, and then I'm gonna.

Right now it's linked, so the mask and the image are working together. But I'm actually gonna unlink this so that mask will stay in one spot. And I can move that mask around, right, or I can move the image around. Yeah, so I can move it around inside my design and be like, I like this, okay, cool.

And then maybe I would pull a color out of here to kind of play with and look at. All right, I like that color, let's make a color palette, so I might open up another document.
>> Sarah Drasner: Let's see, we're gonna just make a kind of narrow and tall thing.

>> Sarah Drasner: All right. Cut like that, and I'm gonna do just one at the top here, here, here, okay, nope.
>> Sarah Drasner: Okay, I like that color, so I'm gonna start there, maybe I take it, Duplicate, bring it down. And I'm gonna hold onto the Shift because it'll lock it to that grid, and I'm gonna take this.

Maybe I bring it down on the color spectrum a little bit, and then I'm gonna do that again.
>> Sarah Drasner: And
>> Sarah Drasner: Now on the other side I'm gonna decide on an accent color, so I have this. And maybe I wanna go on the other side of the color spectrum, so I drag this Hue up, maybe up here?

I kinda want it to get to be like across the color spectrum. So I think I'm gonna go for a brighter color, that's more orange, reddy, something like that, maybe?
>> Sarah Drasner: So you can also see how I would, actually I'm gonna put this in a different layer.
>> Sarah Drasner: And then I can kinda do the same thing.

>> Sarah Drasner: Cool, now I'm gonna take all of these guys and I'm gonna put them in a group.
>> Sarah Drasner: I'm gonna duplicate the group.
>> Sarah Drasner: And I'm gonna auto Auto select by group instead of layer, pull that down, and on here I'm gonna use an Adjustment. So I can do all of these adjustments with it, so I can basically say.

Okay I want this to change hue, saturation, and I want the saturation to be dropped almost all the way down. This group goes above, this group goes below, and we're starting to get a color palette. So right now, I'm working with a really limited color palette, but that's okay, I actually kind of like that.

I might bring this down more, or I could even add another one, that's like what if I wanted it super black and white? Well, I could actually use a black and white filter, and I could kinda adjust these cyan screens. And I could even decide that I want the opacity of this to be less, so like maybe bring it all the way up.

And then say like, that's too far, I do wanna see some of those colors there, I'm gonna drop it back down. So now I'm building out my kind of primary and then my accents, and all of the grays that I might use in that application. Okay, cool!

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now