Lessons
Introduction to Sketch
05:23 2Beginning the Web Page Design Project
05:10 3Designing the Header Section
24:57 4Designing the Main Section
12:16 5How to Replicate Layouts to Other Art Boards
12:24 6Creating the World Map Section
06:06 7How to Draw with Sketch
28:37 8Exporting Assets
12:31Lesson Info
Creating the World Map Section
For the width of the text, let's give ourselves some room for our map. So we're gonna bring this down here. Gonna make this about seven columns wide. Back to our exercise files, and what we're gonna is bring this into Sketch. Let's grab our spices_map. This is also an EPS file. That's the preview of it. Just drag and drop this. Drop it into Sketch and, as I mentioned before, Sketch will then parse through the EPS file, and show us everything that's inside of this document. So if I toggle this open, we can see there is a ton of stuff in here. It's all the continents with all of our little dots here indicating the different areas of the world that some of these spices are from. The nice thing here is that we can modify these if we need to. The spice_map is selected inside of a group. Let's come up and create a symbol out of this. We'll just call this spice map. Press okay and now with this selected, let's make this the remaining five columns wide. So just click and drag and move this out...
. Then the last piece of content we'll go grab will be for the caption for this. So grab the caption. Let's come back. I'm gonna option + drag the heading to here just to make it quicker to get a text block on the screen. Let's do a select all. Let's paste and then we'll use the body-centered for the caption for this. Now, just like before, I'm not gonna follow the grid exactly. The grid is just, again, to give me sort of an idea. Optically, I don't wanna have too much of the content going out here. The lower right hand corner with Australia here is creating the graphic to be-- I'm sorry, the graphic looks a little heavier down on the left hand side since we have so much negative space over here to the left of South America. So I'm just gonna not conform to the grid like this, and just gonna bring this in a little bit here. If we optically look at this, that'll sorta look more aligned. Again, these are things we can also do in CSS when we start building this page. Back to our desktop HD, let's select this entire group. We'll hit command + G. We're gonna name this world. Press return, hold the option key, click and drag. I'm pretty sure you're getting the idea now. This is just really fast to start getting all this content around. For where in the world, I'm gonna come in here. Let's deselect the spice map, so I'll grab these three text blocks here, click and drag to conform these to our size, and for these screens here we want to have the map show up after the content. We'll come in here and make the width of the content full width. We'll grab the map, move the map down to the center here, come down, and grab the caption. We'll move this over to the center, and move this up into place. Let's zoom out. Let's take a look at our two Artboards so far. This is looking great. The last little thing we'll add is just the footer, and we'll just do that with some rectangles. So come down and grab a rectangle, come over to the HD Artboard, click and drag, turn off the border, click on the fill, choose our green color, and we'll just go grab our content which will just say-- We can bring in our links, and just say Everyday Things. For the sake of time, I'll just copy the Everyday Things, fictitious name, and we'll just paste that down here and call this our footer. So insert text, click and drag, paste that down here. Do a select all. We'll set this to white. Set this to a semi-transparent white. We'll come in here and just maybe set this to about 70% white. Press return, set the text in line to the left, and we'll zoom up and make sure that we have our... make sure we have our footer set to the left hand side of the screen here. If we wanna set more type down in the footer, we did make a change here with the opacity, let's come in here and create a new textile. We'll call this body - footer and press return. Back in our HD Artboard. Again, let's keep organized. Create a group. We'll call this footer, this is just type and rectangles so we'll option + drag a copy of this to our tablet Artboard. Pan over, the whole thing's selected, we'll zoom out, and we'll just simply resize all of this real quick. (computer mouse clicking) Alright, so that's given us a chance to take a look at cropping images, putting them on the stage, creating text styles, creating multiple compositions, getting really used to how our Artboards work especially with all of layers and the pages panel, the relationship between all of these individual pieces. And, paying attention to how Sketch treats all of these items, in addition to the fact that symbols, I come up here and select this, all get assigned to their own page. So far we have these two individual symbols. These are getting assigned to their own page inside of our document. Again, pretty quickly, we're able to come in here and create our different pages. We can actually do a pretty fair amount of illustration work inside of Sketch that can all be exported to the SVG format that we can use in our final website as well. SVG files, on the web, will scale to any individual size. We refer to those as the EPS of the web. They can be scaled to any size. They'll look great on any device, and they're all mathematical. We can not only draw that artwork in Sketch, but we can export it out as well.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Hannah Pearce
I thoroughly enjoyed this Intro course to Sketch by Chris. He broke things down and explained things clearly, and it was great to see the layout come together. I picked up so many tips and tricks, which I hadn't come across before from youtube tutorials. I would definitely recommend this Intro course.
Anastasia Rozhkova
Liked it very much! I am completely new to Scetch and UX design - and it was a really good and not to long intro. Thank you very much
Linda
Chris is really clear on explaining how things work on sketch. He makes it fun and easy to follow along as we go.