Color5:43 with Nick Pettit
In this video, we'll layer color and gradients on top of our shape. Additionally, we'll add some texture to make our icon more interesting at larger sizes.
[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:03 [Design: Iconography: Color with Nick Pettit] 0:07 In the previous video, we created a very simple black and white shape. 0:13 Now, we're ready to add in some color. 0:17 So here we have our nice contour that we created in the previous video 0:20 and now we're ready to go ahead and layer on our coloring 0:25 and lighting and even some texture. 0:29 Now, the first thing that I'm going to do is I'm actually going to 0:32 drag out another shape behind this, 0:36 just so you can see a slight variation on this RSS icon that's very common. 0:39 So I'll go ahead and drag out a rounded rectangle here, 0:44 and I'm going to go ahead and put that behind our RSS icon 0:50 and I'm going to change the color of our RSS icon layer to white, 0:54 and typically, you'll see something like that. 1:01 In fact, this background layer will even be orange, 1:04 and RSS icons all over the web look like this. 1:08 This is fine--especially at much smaller sizes-- 1:13 but we want to create something that's a little bit more interesting 1:16 and more detailed at larger sizes, 1:20 and the problem with going this route is when you create an outline like this, 1:23 you lose some of this really interesting contour along these waves 1:28 and along this circle. 1:32 So I'm actually going to go ahead and just delete that layer 1:35 and we're just going to stick with this transparent set of waves, just like that. 1:38 So the first thing that we're going to do to these waves is we're going to go ahead 1:45 and add a gradient, so I'm going to check Gradient Overlay, 1:49 and what you might be tempted to do is just pick a dark orange color-- 1:55 maybe something like that--and then a slightly lighter orange color, 2:02 so we'll go ahead and duplicate that color point 2:08 and maybe just lighten up this same color. 2:13 Now, this looks okay, but really all we're doing is adjusting the value. 2:17 We're not actually adjusting the hue across this large area of flat color, 2:23 and that's the whole point of going with a nice gradient like this-- 2:28 to really break up this flat area of color and add in some nice variation. 2:31 So rather than just going with two different values, 2:36 we actually want to change the color. 2:39 We'll leave the change in values to the lighting, which we'll add later on. 2:42 So I'll go ahead and actually select a reddish color here, 2:46 and I'm going to set that to full saturation. 2:51 And then, for the other color point, I'm going to set it to kind of a yellowish color. 2:54 This may be a little bit too yellow; we'll turn that a little more towards orange; 3:00 A nice golden color there, and that's actually a little bit too red. 3:05 We'll push that a little bit more towards orange, 3:13 just like that. 3:16 But generally, we have sort of a reddish-orange color and a golden yellow color. 3:18 Now, we'll go ahead and accept those changes 3:24 and if you look at this gradient, we actually have this really nice change in color 3:27 across these large flat surfaces 3:31 and we have this red and this yellow and all these really rich oranges in between. 3:35 That's going to look a lot more interesting when this icon is seen at larger sizes. 3:41 We'll go ahead and save that out, 3:46 and the next thing we want to do is add some noise to this gradient. 3:49 Hardly ever do you want to just stick with two flat colors fading into one another. 3:54 It's always a good idea to add a little bit of variation and noise 3:58 on top of that, so I'll go ahead and create a new layer here. 4:02 I'm going to just fill it in--it doesn't matter with what color-- 4:08 and I'm going to go to the Filter menu, Noise, and Add Noise 4:12 and it will bring up this dialog box here, 4:18 and you want to add a really crazy amount of noise. 4:21 We want this to be monochromatic, and we'll go ahead and click OK. 4:26 And then, we're going to actually copy our mask onto that noise layer. 4:31 So we'll go ahead and hold down Alt, 4:37 and then we want to adjust the blending mode on this particular layer, 4:40 so we could try maybe darkening it or multiplying it, 4:44 but the thing we want to go with here is Screen. 4:49 We'll go ahead and dial down the opacity, and we're going to turn this down quite a bit, 4:53 all the way down to 10 percent. 4:59 And in fact, I'd probably go with something a little bit lighter in most cases, 5:01 but for the sake of this screencast, we'll go with a heavy amount of noise 5:07 just to make sure that you can really see it. 5:11 Now, what this noise is going to do is it will add a lot of rich, interesting texture 5:14 to this flat area of gradated color and it will also help with dithering, 5:19 if this image is ever seen at a lower bit depth than what we currently have it at. 5:27 We've added in a nice, smooth gradient with some interesting color, 5:32 but there's still more we can do. 5:36 In the next video, we'll work on the lighting. 5:38 [?mellow guitar music?] 5:41 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 5:42
You need to sign up for Treehouse in order to download course files.Sign up