Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up