Styling Your Layers7:43 with Christopher Downer
Learn about fill, fill types, and how to use them.
We now know how to draw layers on the canvas and how to resize and 0:00 move them around. 0:03 But they don't look very colorful or special, so 0:04 let's take a look at styling layers. 0:07 To change the color or style of a layer, we need to look at the Inspector sidebar. 0:11 You should notice the colored button under the Fills title. 0:16 Click that and a popover will appear. 0:21 If you click anywhere in this large area, or click and drag, 0:26 you can make the color more or less vibrant by moving the marker left and 0:30 right, or brighter and darker by moving it up and down. 0:34 I think this is a nice red color for now, but what else is there in this popover. 0:41 These icons along the top are the tabs for the different field types. 0:47 Right now the default option is a solid colored fill, 0:52 which is a single flat color. 0:56 Next we have a linear gradient which is a transition from one color to another. 0:59 You can change the color of these points, add more of them, 1:07 and even pick them up in the canvas to move them around, to change its position. 1:12 [BLANK_AUDIO] 1:20 Next, we have radial and angular gradients, 1:24 which can create this cool effect. 1:27 These points can also be moved around the canvas to manipulate them. 1:31 [BLANK_AUDIO] 1:35 Finally we have a pattern fill where you can import your own images to fill 1:45 a layer. 1:49 And noise fill which can be used for adding a grainy texture to your designs. 1:51 But let's go back to the solid colored fill on the left. 1:57 Underneath the main color we were playing around with are two sliders. 2:02 The top one adjusts the hue or tone of the color. 2:07 Click and drag it around to see the color you have picked change. 2:11 [BLANK_AUDIO] 2:14 The slider below adjusts the opacity of a color, making it more transparent or 2:18 opaque. 2:23 We can always see the results of our fill in the preview box to the right of 2:29 the sliders, with the checkered background indicating transparency. 2:34 On the left, is a color picker. 2:39 Click the button, and you can now sample any color on your screen. 2:42 It doesn't even have to be in the Sketch window. 2:47 These text fields below store the selected color as a value computers will 2:53 recognize if you're going to be coding a website, or application. 2:57 Hex stands for hexadecimal value whilst R, G, 3:02 B and A represent the red, green, blue and alpha values of a color. 3:07 Common colors will populate these boxes below, and 3:14 they are the most frequently used colors in your document. 3:18 Colors in the sketch don't just come under the form of fields. 3:22 You can apply colors to other styles, such as borders and shadows. 3:25 The Borders option is found under Fills in the Inspector. 3:33 Here, you can apply a color. 3:37 [BLANK_AUDIO] 3:38 As well as adjusting the thickness. 3:43 [BLANK_AUDIO] 3:45 Or defining whether the border should sit on the inside, center, or 3:50 outside of a shape. 3:55 If you press this cog icon above the Thickness field, 3:58 you can view some advanced options for borders, such as changing the join type. 4:01 [BLANK_AUDIO] 4:07 And enabling a dashed border. 4:09 [BLANK_AUDIO] 4:11 Shadows, both outer and inner, are also incredibly easy to apply. 4:15 Just press the add icon on the right of the cell. 4:21 Along with changing the color, you can adjust its X and 4:26 Y offset, the blur radius, and the spread, 4:29 which can be used to grow the size of the object casting the shadow. 4:32 [BLANK_AUDIO] 4:36 With Sketch, you can add as many fills, borders, and shadows as you like. 4:44 They can each be added by pressing the respective add icon. 4:51 Creating multiple fills, borders or shadows is a great way for 4:55 getting unique effects. 5:00 Let me update some of these values so 5:02 I can create a typical button you may see in a website. 5:04 [BLANK_AUDIO] 5:07 Now, I've just tweaked some of these values. 5:27 So feel free to pause the video at this point and style your own button, 5:30 playing around and experimenting with some of the styles. 5:34 With the layer as a whole, you can edit and alter its opacity 5:39 which we saw with the solid fill type as well as changing the layer's blend weight. 5:43 Blend modes are used in digital design to to mix layers or colors into each other. 5:52 Adjusting the master blend mode for 5:59 a layer will only work when there's two or more layers 6:00 with one of those being underneath the layer whose mode you're adjusting. 6:04 Let me draw a rectangle and give it a black to white gradient and 6:09 place it partially above our button. 6:14 [BLANK_AUDIO] 6:16 By default a layers blend mode will be set to Normal, 6:23 meaning you can't see any of the layer below it. 6:26 But by altering the blend mode, parts of the layer underneath 6:30 will show through depending on the mode it is set to. 6:34 For example, all the lighter parts will disappear from this layer 6:38 if it set to multiply, even the darker colors. 6:41 The opposite effect will happen if you set the blend mode to Screen. 6:48 [BLANK_AUDIO] 6:52 Blend mode can also be applied to individual colors for fills, borders, and 6:55 shadows, as well as adjusting it for the entire layer. 7:00 If you are designing a website, you can also output your layer styles in CSS too. 7:04 Just right-click a layer, and select Copy CSS Attributes. 7:09 [BLANK_AUDIO] 7:13 Everything such as corners, borders, shadows and gradients will be copied. 7:17 So your site elements will look just as they do in Sketch, 7:23 without using any images. 7:26 Just paste the code into your HTML or CSS document. 7:28 Save and preview. 7:35 [BLANK_AUDIO] 7:36
You need to sign up for Treehouse in order to download course files.Sign up