UI Kit Demo

[00:00:00]
>> Sarah Drasner: All right, so let's do some remixing ourselves. I have prepared, for you, I didn't actually do much. I bought a UI kit called Multicolor, and it has all of these screens. And they're great, but I don't wanna use it just the way that they have it, right?

[00:00:18]
So maybe I might say, okay, this one piece right here looks really good, but I'm gonna take this and remix it a little. So I'm gonna crop it down and then I'm gonna say okay, I wanna change, this is too like you know displayey for me. Maybe I want to try, do I have Oswald?

[00:00:44]
Yeah, maybe I want to make it bolder and look more large and in charge. That's an official turn for this. I go Character and I go Optical and I'm gonna make them all caps.
>> Sarah Drasner: So already that's [LAUGH] way different in look and feel. Maybe I'm gonna change these arrows, too.

[00:01:13]
So I'll go to something like The Noun Project. I don't know if you've seen The Noun Project, but it's got all of these awesome icons and stuff. You can say arrow.
>> Sarah Drasner: Tons of arrows.
>> Sarah Drasner: Maybe I wanna do like a,
>> Sarah Drasner: Something like that, I don't know.

[00:01:38]
I'll just download that.
>> Sarah Drasner: SVG, go File, Open,
>> Sarah Drasner: I'm gonna bring this into that Multicolor [COUGH] and when I'm working on the web, I'm gonna use this SVG totally differently. I'm gonna optimize it, we're gonna talk about images in just a second. But I can take this, that's not what I wanted.

[00:02:14]
I'm selecting a group, not a layer. Go here, take that layer right now, and go right arrow, left arrow. Gonna put this here. I can double-click on the layer itself and do all sorts of things to it. Right now I'm gonna give it a color overlay, and maybe I'll give it a color overlay of maybe like an accent, that one might be cool.

[00:02:40]
All right, that's not as cool as I thought it would be, that's okay. Then I'm going to take it and reverse it, so it'll bring it to the other side, and I'll transform it.
>> Sarah Drasner: [NOISE] I messed that up. Zoom in a little bit.
>> Sarah Drasner: All right.
>> Sarah Drasner: And now maybe I'm gonna use a different image for the background.

[00:03:15]
Let's see, that could work, too, but maybe I'll take, since we already have this one, I'll just drop it in there. And say, okay, go, [INAUDIBLE]
>> Sarah Drasner: Take this, bring it back, mask it, all right, now I'm gonna change this to black text instead of white text.
>> Sarah Drasner: And maybe give it some sort of thing behind it, so I can read it a little bit better.

[00:04:05]
Or maybe we'll just peel back the, let's play with the mask here so that you can learn that a little bit. Remember how there's black in the background? I'm gonna go back to the text being white. And then for this mask, I'm gonna use this black color and get my brush.

[00:04:27]
And I'm gonna make a bigger size and bring the hardness down and the opacity down. So now I can kind of mask that area. And the nice thing about masking, and I always use masking, the nice thing about masking. This is not the pen this is the pencil that's why or the brush pencil, let's go back.

[00:04:50]
The nice thing about masking is you can always bring it back. So even if you mess up and you take away too much or something like that, you can always turn it back around. So I'm gonna be like that's too much, I'm gonna go gray instead. Then I can bring some of that image back, then I can switch these two and bring some parts back as well.

[00:05:16]
You can kind of get the drift of what you can do there. So already this is a completely different design than what we started with. Maybe it's not what we want, maybe it is what we want but it isn't at all the same. So you can see how you can take something that was purchased, and kinda play around with it until it's your own, until it's not where you started from.

[00:05:42]
And you can even take illustrations and purchase those, and put them into your designs. I'll use a purchased SVG sometimes, and then play around with it and animate it or something like that. That's totally cool too, so you can just kind of manipulate things until it's your own.