7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 14Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 What is Sketch?

Welcome to the first lesson. In this chapter you’ll learn the basics of Sketch. We’re going to start with a quick tour, to show you where to download it and what the app looks like. From there we’ll move on to taking a look at Sketch’s drawing tools, layers and artboards, and more.

2.1 What is Sketch?

Hi, welcome to the first lesson. In this chapter, you'll learn the basics of Sketch. And a good place to start is a quick tour, that shows you where to download it and how the app looks like. So let's get started. You can download Sketch by going to its website, bohemiancoding.com/sketch. Now, this is a Mac only application. So if you have Windows, you won't be able to use it. And being a Mac application, you can buy it from the App Store. You can also download a free trial. To move on, go ahead and download the free trial or buy it straight away if you want. But, probably, the best thing you can do is download the free trial first. So, once you do that go ahead and install it, just by dragging it into the application folder and then open it and this is what you'll see. So, right from the start, you can see that it looks like a native Mac OS application, from the toolbar on top to the sidebar to the fields. Everything looks really nice. Now there are a couple things that I wanna show you here. First of all, it's the toolbar. The nice thing about the toolbar is that it's customizable. You can choose a display mode. And you can choose what icons you want and where you want them. So for example, if you don't want this mask icon for example you can simply drag it away. If you want a new tool, let's say you use the rectangle very often, well you simply click and drag this and you'll always have it there at your disposal. If for some reason you want the default sidebar, you can simply drag this one, and all of the changes that you made will be deleted, and the toolbar will be replaced with the default one. So, right there, you have big potential for customization, which is always a nice thing. On the left side we have a side bar. Now this side bar will host the layers. And we'll talk about those in lesson number four. Also, in lesson number four we'll be talking about pages, which can be controlled with this drop down here. You can rename pages, you can add new ones, and so on. Down at the bottom we have a filter field, which will be used to search for specific layers. On the right side we have another sidebar, which is used to display and change properties for selected objects. So for example if I draw a rectangle here, you can see I have options for the position, I can change it from here. For size, again I can change the size, I can even perform math operations here. For transformation, if I wanted to rotate it. For radius, opacity, fills, borders, and a few cool effects like shadows, inner shadows and blurs. Now, the cool thing about shadows and inner shadows, and actually all of these effects, is that they are easily reproduced in CSS. So Sketch is designed in such a way that whatever you make here can be reproduced in CSS later on. Whatever effect, you can either add multiple shadows here. Yeah, so both of these shadows can be easily made with CSS. So this is great news for UI design. Also on the bottom here you have a button that says Make Exportable. Now if you click it, it's gonna give you some options and basically you can export that image directly from the application. We'll talk more about that towards the end of the course. Also, if I have two objects selected, I can use the alignment tools. For example, align horizontally, vertically, to the top, to the right and so on. These work just like you'd expect from a graphic design application. Now, there is one last thing I would like to talk about in this lesson and that is the infinite canvas. Now with a typical graphic application, you would have a predefined canvas, with a certain height and a certain width. Well, not with Sketch. Right here you have an infinite canvas. So, watch as I zoom out, at just how big this canvas is. There's virtually no limit to it. You can resize your objects. Right here, as you can see, I have a rectangle that's almost 6,000 by 4,000 pixels. In Sketch, you have the option to show a couple of helper tools. For example, you can show the rulers if you want. And notice what I was talking about, the infinite canvas. You can go anywhere you want with your elements. Or you can show a grid, and you can alter the grid settings, like the block sizes, the thickness of lines. And also you can show a vertical grid. Right, and you can control the number of columns, the total width, the offsets, and also the gutters. So let's say for example you're building an application with Twitter Bootstrap. Well Bootstrap has certain dimensions for its grid, like certain widths, certain gutters, and so on. Well, we can easily change those using the layout settings. Or let's say you're using the 960GS grid system. This is actually, I think it's based on the 960 grid system, but you can virtually use any kind of grid system, because you have access to all of its settings right here, and that is very cool. Okay, well that's about it for a quick tour of the application. Next time on Practical UI Design with Sketch, you'll learn about the available Sketch tools, from rectangles, lines and ovals to freehand paths. So, I'll see you there.

Back to the top