If you haven't read "Intro to Sketch: The Basics" yet, please do so before moving on as this tutorial assumes you understand the features covered in that post.Creating basic shapes, moving them around, and resizing them is all well and good, but working with just those tools is extremely limiting. This week we're going to expand your repertoire with some more vital Sketch tools. Like last time, don't worry about being perfect. This tutorial is designed to help you feel comfortable with what Sketch has to offer. To start, open Sketch and create a new document. If you don't already have them, add the 'Vector' and 'Text' tools to the toolbar. These are the super handy tools that we will be covering in this tutorial. Typing With the Text ToolBeing familiar with this tool is extremely handy, even if you're not doing much typography work. It's thankfully a pretty straight-forward tool to use, especially since working with text is a pretty fundamental computer skill. If you've ever used a word processor some of these things will be pretty familiar to you.Select the Text tool and you'll immediately notice your cursor change to the famous text cursor. With this cursor click anywhere in your canvas to create an area where you can enter text, known as a text box. If you've ever used a text box in Microsoft Word, Pages, or any other word processor the concept is pretty much the same.The placeholder text (Type something) should be automatically selected so you can start typing immediately. If not, triple-click the text box. Type your name then press 'return' to create a new line. On the new line type "uses Sketch". Now look to the Inspector panel on the right of the Sketch window. You'll notice it's pretty similar to how we've seen it before but there's some new stuff. Most of these should be pretty familiar to you, but I'm going to take you through each step.'Typeface' is what you would call the font in a word processor. There's a heated debate as to which terminology is correct, but I won't get into that now. Click on the button to the right of the label (labelled 'Avenir' in this example) and you'll get a dropdown of all the typefaces on your computer. Scroll down the list or click on the search field at the top and look for Helvetica Neue. Click on it to select it and your text will update.Next we're going to 'Weight', which allow you to adjust how heavy (or thick) you want your text. The contents of this menu vary depending on the typeface you have selected as weights need to be created by the font family's designer. Helvetica Neue has a nice selection of weights, so try a few out to see how they affect your text. Select the weight 'Thin' when you're done.On the next row there are 3 items. For now we'll be ignoring the first and second buttons, labelled 'Options' and 'Color' respectively. The third item, labelled 'Size' is what you use to adjust the size of the text (as the name implies). There are 2 ways to do this. First, you can double-click on the number and type whatever number you want. Second, you can click the dropdown arrow on the right and select from a range of preset sizes. Try out both methods, and when you're done set the text size to 36.Finally, we get to 'Alignment'. This works just as you would expect, it sets the alignment of your text. In order, we have 'Align Left', 'Center', 'Align Right' and 'Justified'. For this tutorial we're going to pick 'Center'. When you're done you're text should look just like the example here, except with your name in place of 'Graham'...unless that's your name too.There are a few other tools you can explore. 'Width' determines wether the text box's size is determined automatically ('Auto') or by the user ('Fixed'). 'Spacing' gives you control over how much space is between each character or line of text. Adding ColorThus far we've focused on creating shapes and text, but now we get to the really fun part: colors! Until now all we've seen has been varying shades of grey, but that's about to change. In document we created in the last section create a 220x220 oval and move it behind the text. Get the text to the center of the oval using the alignment guides.With the oval selected let's take a look at the inspector, specifically the bottom-half. The 'Opacity' slider allows you to adjust the transparency of your shape. 'Blending' allows you to determine how your shapes colors blend with the layer underneath. Take some time to play with 'Opacity' to see how it affects your oval. You can play around with 'Blending' as well but you won't see very much difference as your shape is on a blank white backdrop.'Fills' is where everything starts to get really fun. This is where you can set the colors of your shapes. By default you have one layer, but you can add as many layers as you'd like by clicking the '+' button, but for now let's stick with one layer.Click the button with the grey rectangle and the color picker will pop up. Along the top you have different tabs to pick from a variety of fill modes. By default you're set to the first tab which is a flat color. The second, third, and fourth tabs set the fill to a linear, radial. or angular gradient respectively. The fifth tab allows you to fill your shape with a pattern, either from one of the built-in patterns or from any image on your computer. The sixth and final tab simply fills your shape with a noise pattern.For now though we're going to stick with the first tab. The first thing is a large box that is currently showing the various saturation, and brightness levels of the color red. Essentially, these are the many shades of red (or whichever color you have selected). Click anywhere in this box to change the shade to something you like. A little circle will indicate where on the spectrum you've chosen. Alternatively, you can click and drag this circle around. For now, let's leave it somewhere in the top right corner. Moving on to the next row, first we have a button with an icon that looks like an eyedropper. This button is the Color Picker, which, when clicked, enables you to grab a color from anywhere on your screen. Click the button and your cursor will change into a loupe that will enlarge the pixels of the area you're overing over. Drag it over to your desktop wallpaper and click when you see a color you like. Next you have 2 sliders. The top one is a spectrum of colors, this allows you to change the color hue which you can then adjust with the large box above it. On the bottom is checkerboard pattern that fades gradually to whatever color you have selected, this is used to adjust the opacity. Play with both sliders until you get the gist of how they work, then drag the opacity slider all the way back to the right. Finally, to the right of the sliders there is a little box that simply serves as a preview of your color.The next row has text boxes with numbers. We can safely ignore these for now, but just as an overview, the first one is an input for hexadecimal color values (if that means nothing to you, don't worry about it), and the next 3 boxes are numerical adjustments for hue, saturation, and brightness and are more precise than using the controls above.Finally we have 2 sets of color presets, which I have circled for clarity. The first set (circled in red) are colors currently used in the document, this comes in handy when you need to duplicate colors across multiple shapes. The second set of colors (circled in green) is used for color presets. Press the plus in the bottom right to add the currently selected color, this is helpful if you use the same color a lot and want an easy way to reproduce it across multiple documents.Establishing BordersNo, not the defunct bookstore chain...Putting borders on your shapes can be a great way to accent or highlight your shapes, and can be used to great artistic effect in some obvious and not-so-obvious ways. However, they should be used sparingly and only when necessary. Sketch has an annoying habit of enabling borders by default when you create a shape, but they can be easily removed. But first, let me tell you how to use them..Close out of the color picker by hitting the 'esc' key on your keyboard. Looking back over at the Inspector, below the fills section we were just working in you'll see a section called "Borders". You'll see it looks very similar to the Fills panel above, with a couple differences. The first thing is that the dropdown menu in the middle is labelled 'Position" instead of 'Blending', and second the text box at the end is labelled 'Thickness' rather than 'Opacity'.The 'Position' dropdown allows you to chose where the border sits on the edge of your shape. You can chose from 3 different options; 'Center', "Inside', and 'Outside'. 'Center' centers the border along the shape's edge. 'Inside' puts the border on the inside of the shape's edge. 'Outside' puts the border on the outside of the shape's edge. For now just set it to 'Inside'. You can't really tell any difference between the different settings right now as our border is 1 pixel wide, but if you want to see how it changes come back to this later.Finally, the text box labeled 'Thickness' enables you to set how think you want the border to be, measured in pixels. Typing in any positive number and hitting enter will change the thickness of the border. If you look over to your oval you'll see the grey along its circumference. If you want a different color (because grey is boring) click the grey button on the right of 'Borders' in the Inspector and you'll be presented with a color picker just like the one we used earlier. Final ThoughtsAnd that brings us to the end of Intro to Sketch. Your final product, which is hopefully prettier than mine, is a testament to how much you've learned about this great design software. It's a very rudimentary example of what Sketch can do, but it's a start and even the best had to start somewhere. There is just so much I didn't get to cover in this 2 part tutorial, just taking
