Beginning the Web Page Design Project
When you first launch Sketch, you'll get this splash screen here. You can toggle between the Templates or the Recents tab. The Templates tab, we'll also see this in the artboards when we get into Sketch, and basically, this is just a whole group of different common sizes for things you might design inside of Sketch. The Recents tab here will have any project that you have recently worked on. And so I'm just gonna come down here and double click on New Document, and that's gonna launch us right inside of Sketch. So as I mentioned before, Sketch will look a lot like tools like Keynote, Numbers and Pages, from Apple. We have a toolbar across the top. Right-clicking on the toolbar and coming down to Customize will give you the ability to change the number of tools, and there are a ton of tools down here. You can just add and change and move these around and basically build your own custom workflow for the toolbar across the top. All of these items are also available in the menus as well. W...
e'll be taking a look at some of that. On the left-hand side is the Pages panel. So, in the Pages panel, we have a little icon here that will toggle open, and in addition to pages, this will show us artboards and layers. So it'll be a little bit different at first using this sort of metaphor for the left-hand side. All of the artwork we create will show up in layers. Layers can then be grouped into artboards, and artboards can be grouped into pages. So let's just take a look at how that would look real quick. So when I toggle this little button here open and closed, this will show me information that's on this particular page. So I'm looking at Page 1. Up here under Pages, this is where I can rename this, so I'm gonna come in here and name this Design. Press Return. Down here, I see the page, and then if I had artboards or layers, they'll show up down here. If I want to create a second page, I can click the plus sign here and I will see Page 2 showing up here. I'll just rename that. So when I click between the pages, that's in the top area here on this left-hand panel. When one of these is selected, I will see the artwork that relates below. So to demonstrate this, on the Design panel, let's come up to the Insert menu. We're gonna come down and choose Artboard. We're gonna be using this Insert panel a lot. So when I select Artboard, over on the right-hand side, I now have all of my artboards broken into different groups, and you'll notice these groups match the groups we saw on the splash screen when we went to Templates. So if I come to Devices, for example, we can see common devices from Apple. Material Design, Responsive, Paper, and of course, we can create our own custom sizes. So to begin, I'm gonna come down here and choose Responsive Web, and the one I want to choose is Desktop HD. So I simply select that, and now my artboard's been created. I'm recording on a slightly smaller screen here, about 720p, so in order to see this artboard, I'm gonna come up to the toolbar and click on the negative sign next to Zoom, and zoom out. So now here we can see the artboard. So this is 1440 pixels by 1024, and we're zoomed out, and we can see the zoom set here to 25%. So now we can see over in the Pages panel, under the Design page, we now have one Desktop artboard. If I were to come in here real quick and let's say just simply draw a rectangle, I have my first layer, so now we can see the total hierarchy of how this panel works. We have our pages listing here. When one page is selected, we have that selection down here, and then we can see an artboard and then a layer, so this will become really important as we work inside of Sketch. As we get more and more items into our layout, this is gonna become more and more important for helping us select items and be able to group and manipulate and even copy this to other artboards, so just understanding the hierarchy will help out a lot. Now, we're not gonna use multiple pages here, because I'd rather use artboards, so I'm gonna delete Page by right-clicking and just saying Delete Page. Okay, so I'm gonna delete that rectangle that we have. I'm gonna hold the space bar, click and drag to move around. If you're used to the Adobe interface, that is picked up from Adobe, so I can hit the space bar and move around and get the move tool. Let's add another artboard. So let's come down to Insert, choose Artboard, and we're gonna come down to Material Design and we'll choose a 9-inch tablet portrait. So I simply click that and this will pop on the stage. So these are the two that I'm gonna work with for now. Now I'm gonna switch back to the Project Files, and what I like to do is create a file of all the colors I want to use for my document, so now I'm gonna grab the colors png file and I'm gonna drag and drop it right inside of Sketch. If I drop it over the top of an artboard, it's going to be assigned to that artboard, so now in the Layers panel, I can see that the colors artwork, and this is the icon for image, is now inside of my Desktop HD. If I were to grab this and drop it into Tablet, that layer's now assigned to Tablet. But now what I like to do is, I like to move this outside of all the artboards, so I'll just drag this over to the left, in a sense, making my own artboard for just this particular block here, so now this is sitting outside of that area.
See what all the fuss is about. Sketch is a design tool, for the Mac, that has been gaining popularity over the past few years. With some of the latest updates, this design application has gained some amazing features that allow you to design and prepare graphics for any on-screen project.
Sketch combines a wide range of features, including drawing and layout tools, styles for text and objects, symbols, multiple artboards, advanced exporting capabilities, and integration with many 3rd party tools and systems.
Explore the possibilities with us in this introduction to Sketch.
What you’ll learn:
- The Sketch interface
- Working with artboards
- Importing and adjusting images
- Creating vector drawings
- Using Text Styles
- Working with Symbols
- Copying CSS attributes
- Copying SVG code
- Exporting assets for all screen sizes
- Finding Plug-Ins
Software Used: Sketch 2017