Lessons

Lesson Info

Designing the Header Section

Let's start making some art, and making this look like something. So let's switch back, I'm gonna come out to the exercise files, and what I wanna start with is, let's grab the countertop JPEG file. I'm gonna drag and drop this, and I'm gonna drop it into the HD area. So when I drop this, this image is rather large. If the area I drop this on is assigned to the desktop HD, we'll see this showing up down here, and I can see the bounding box all around the outside. So this gives me a sense of how large this graphic is in relation to the artboard that we're working with. Now, the artboard is 1400 pixels, and the size of this JPEG file is 2400 pixels. Later on, when we start exporting assets from Sketch, we're gonna use this extra resolution to create graphics for high definition screens, screens that have 266 or 300 or even higher resolutions. So we'll need that extra resolution for our final website. I'm gonna just move this around a little bit, I'm actually gonna come down here and scal...

e this. I don't have to hold the Shift key when I grab the corners, I can just scale this down. So I'll scale this to about right here. Now, I don't want this to take up that much space, so I wanna crop this image, and the way that we crop images in Sketch is to use a mask. So I'm gonna go back to the Insert menu, come down to the rectangle tool, and select this. With the rectangle tool selected, I'm gonna click and drag. The tool is sticky, so if I get near the edges, it'll stick, and I wanna create something that's as wide as the canvas, so about 1400 pixels, and I want this to be about 400 pixels tall. So I'll drop this about right there, get my magnification tool, I'm gonna zoom up here, hold the Space bar, move over. One thing to keep in mind that I always forget is that we need to make sure that we hit the Escape key when we get out of the zoom. Let me do that one more time. So I'll zoom up, I hit the Escape key to come out of the zoom, then the Space bar, move over. Okay, I'm gonna select the rectangle. Over on the right hand side, we get an inspector panel. The inspector panel is contextual to anything that is selected on the canvas. So with the rectangle selected, I can see the width is 1440. The height, I'm gonna come in here and change this to 400, and it might be hard to see, but the little lock here is actually unlocked, which means I can set these values independently. Later on, we will use the lock to make sure that we can use proportionally scale elements by putting in numbers here. Now, let's come down to the fill and stroke. I'm gonna use this as a mask, so I don't really need the stroke or the border, so I'm gonna uncheck that. And then for the fill, this doesn't really matter what color I'm using, because again, I'm gonna use this as a mask. So now on the layers panel, what I need to do is get the rectangle to be underneath the countertop JPEG file. So I'm gonna click and drag, and just drag this underneath. Then I'm gonna hold the Shift key, select countertop, and then click on rectangle. I have both of these items selected. I'm gonna right-click, and come down and choose mask. So what that's gonna do is put these items into a group, and then inside the group, we see this little down arrow here, which is telling us that the countertop JPEG is being clipped or masked into the rectangle shape underneath. If I select this and I move this around, we can see that now, we still have the same size JPEG in the background, but it's not being clipped to that rectangle size. Later on when we export this, if we export this masked layer, we will get the countertop JPEG file, but it will be conformed to the size of the mask, so this will give us pixel level precision on artwork that we export out from Sketch. So with that in place, let's go back to our exercise files. Let's come down here and grab that native Photoshop file, just drag and drop this right in. This is gonna come in huge. Again, we wanna have all that extra resolution for our high definition screens. And so now, let's come in here and make a few changes. First, we're gonna come in and we're gonna set the width of this particular item. So let's come in here to the properties panel. The size is 1600, we're gonna come in here and change this to something just a little bit smaller. We're gonna set this to 687. I'll hit the Tab key, we had the lock turned on, so it'll automatically figure out the height. Move this over a little bit. We're also gonna come over to transform, and just set this to negative 45 degrees, and then press Return. Now we'll just drag and drop this right about where I want it. I'm looking at this little corner here, where we have the napkin on the side. I wanna make sure that, I wanna crop this out a little bit, so I want this over to the left-hand side. And let's see, get it about right there. Show a little bit of the garlic at the top, and again, you can make your own artistic decision on where you wanna place this exactly. And so we'll get this to about right here. So again, all of the transparency that we had set up in the Photoshop file is being supported here, so Sketch is basically reading all of those Photoshop layers and giving us a composite, with all the transparency, color, and everything that we have inside that original Photoshop file. So that can be really powerful and helpful for your workflow. So with that in place, I'm gonna hit Command S to save, and we're just gonna throw this on the desktop. We'll just name this herbs_and_spices.sketch, and then I'll hit save. So now if I come out and look on the desktop, we have our brand new Sketch file out here. So before we start laying out additional pieces, I do want to set up some guides inside of Sketch to help us create our different layouts. And so we're gonna use the 12 column rule, and so what we'll do is we'll start by coming up to the view menu, and coming down and choosing show layout. So if I turn this on, the layout guides will show up right here. If I come down and choose layout settings, I can come in here and I can set different properties for this. So I'm gonna move this down a little bit, so we can see what's happening here. Go back to layout settings. So if we look down here, we can see all of the different guides showing up. I'm gonna come over here and click on the lightness value and just make these a little bit brighter, so we can see them. Change the colors. Alright. So each one of these guides here is being represented by the settings that we have up here. So for this particular design, we're working on the high definition screen, and we don't want the content to get too wide. About 1200 pixels is about the maximum. We have multiple columns, and we'll have different content, but anything wider than 1200, even if somebody has a 24 or 30 inch monitor, we don't wanna have the type going that full width. And so the maximum width is gonna be 1200. So I'm gonna start by coming up here and typing 1200 for the total width. Then I'll hit the Tab key. Now, we're working at 1440 pixels, so at 1200, we have 240 pixels left over. So on the offset, we wanna take that 240 pixels and just divide it by both sides. So we'll set this to 120, and then I'll hit the Tab key. And so we can see now that we have an even amount of space from the right-hand side to the left-hand side. And then for the gutter width, we'll come down here, I wanna set this to about 20 pixels. I'll hit the Tab key, and then Sketch will calculate that each column width needs to be 80 pixels. So now every one of those dark gray columns is 80 pixels wide with a 20 pixel gap, and we have our 120 total width up here with our offset. So again, this gives us a really quick way to set up a grid and be able to snap all of our content to this individual grid. And all these settings that we just did are now related to the HD artboard. Let the Space bar move over. For our tablet, I'll select the tablet, come down here and choose layout settings. And we'll do something similar to the tablet, but we'll use a little bit less space. So this is 768 on the width, so we're gonna subtract 50 pixels from this, so we're gonna set this to 718, then I'll press Return. That leaves 50 pixels left over, so I'll just set the offset to 25, and I'll hit Tab. And if you're not sure, or don't wanna do the math, you can come in here and use your arrow keys and just hit up and down, hold the Shift key and just move it around until it's somewhere in the middle. So 25, number of columns, I'll keep this at 12, we're gonna set the distance between them to 10, hit Tab, and then Sketch will figure out the 50 pixels that we need here. But again, these are just guides, so we're going to sort of fake this a little bit. We'll have some columns that we'll put right in the middle there, but again, this will just give us a way that we can have a design or layout in here, just to make all of our content more consistent. Okay, great. Okay, so let's go back to the desktop HD, and first we want to set up our navigation at the top. So I'm gonna go up here to the shape, let's come down and choose rectangle. Yes. Is there a reason why you decided to put the pictures first, versus putting the layout first on the screen? Is there a reason I decided to put the pictures first? No, you can do this in any order. I tend to, I kinda like the graphics here, so I get them in place and get them looking nice. But I think now that we're gonna start putting the navigation and some of the text in, I wanted to make sure I had those in there before we did that part. But yeah you could certainly get those set up right away. I got kind of excited, to put in the artwork first. Okay, so in our design, we're gonna have a navigation bar that goes across the top. It's gonna be semi-transparent. So let's come up to the insert menu, I'm zoomed up on the large artboard, so I'll come down to rectangle. Now I'm gonna click and drag, and I'm gonna draw a rectangle that's the full width. Again, it's a little sticky, so it'll stick to the right-hand side, so I can just let go. For the height on this, I'm gonna set this to about 50 pixels high. So with it still selected, I'll come over here to height, set this to 50 pixels. And now, for the color, I wanna use one of the colors from the color swatch. So I'll just pan over here a little bit, select my navigation box rectangle. I don't want a border, so I'll turn that off. So now I'll come down to the fill color, I'll click on the little swatch, and in here I have an eyedropper. Click on the eyedropper tool, now I can sample anything on my screen. So I'm gonna come over here and select the darker shade of green in my swatches. Sometimes in my swatches, I'll put my main colors, which will be the larger squares, and then I'll put a little complementary color over on the right-hand side, so this would be the light tan that would be a nice complement to the dark brown. Same thing with the green and the darker green, here. So for the nav I'll choose the darker green. And now, another nice feature in Sketch, which matches what we will do in CSS, is inside of sketch, we can use an alpha setting for the RGBA color space. So this means I can set the green color of this swatch to be semi-transparent. So I'm gonna come in here and type in 85 percent for the size, and I'll hit the Tab key. So now we can see through the navigation across the top here. So this is like using an ink color that's only semi-transparent, or 85 percent of that particular color, and this is something that we do in CSS all the time. This keeps us from having to make something completely opaque, or setting an opacity in CSS when we're building this website. So it's nice that we can set this color up inside of Sketch to work this way as well. Alright, so we have our navigation bar in place. I'm gonna set his down to about 98 pixels on the Y axis, so I'll just type in 95 and hit Tab, then I'll move this down here a little bit. I'll come in here and zoom up, hit the Escape key any time you zoom. And so now let's bring in some artwork. So back to our project files, I'm gonna grab Logo EPS. Gonna come in here and just drag and drop this in. Now what's interesting here is, when I drag in an EPS file, Sketch understands what that is, and it will put all of that artwork inside of a folder. If I toggle this folder open, I can see all of the individual shapes that are required. If I hover over a layer, and click on the I, I can turn this on and off, the visibility. And so we can see each of these layers turning on and off. So Sketch parsed through all of the information inside of this EPS file, and converted this to Sketch artwork, and put everything inside of a folder for us, so it makes all of that really quick, and gives us the ability to work with files. Especially if you're coming from a print workflow, where you might be using a lot of EPS files, for your pre-production workflow, you can make use of those same files. I'm gonna close this up, i'm gonna select this logo layer, and we're gonna use this on multiple artboards, so what I wanna do here is turn this into a symbol. The symbol is a piece of artwork inside of Sketch that gets encapsulated, and we can use multiple instances of a symbol across multiple artboards, or even multiple times on the same artboard. Then, if we need to make a change, we just change the symbol, and all of the instances get updated. So to do that, with the logo selected, we can come up to the toolbar, and there's an item up here called create symbol. I'm gonna click on this, and then we can name this symbol. So I like the name logo, that sounds great, so let's just click OK. And now if we look back in the layers panel, that folder is now being replaced with these circular arrows. Again, this indicates to us that we now have a symbol that is tied to another artboard. Now, you'll also notice that when I create a symbol, up in the pages panel, I got another page in my document. If I click on the pages, we'll now see that we have our logo artboard showing up here. Now, the artwork is actually there, we can toggle this open, here's all of our original layers. I can come in here and highlight these, and we can see the artwork showing up on the right-hand side. So again, it's really crucial to understand how that pages panel works, with the pages, the artboards and the layers, because as we make changes inside of Sketch, it's going to rearrange those layers as we're working. So if we come back to the design page, we can now see, the design page that we're on, we can see the desktop artboard, and now we can see that symbol on that particular layer, here. So with this selected, I'm gonna drag this, so that the left edge of the logo aligns with the first column, the left edge of the first column. And I'm gonna just scale this down a little bit. So we'll move this right into place, here. Our navigation bar is gonna have the logo in the left-hand corner, and then we're gonna have our items that are gonna be part of our navigation. So with that in place, I'm gonna zoom out. And now, let's come in here and add our type layer. So we're gonna go back to the insert menu, I'm gonna come down and choose the text object, here. So with the text object selected, I'll get a cursor in here, let's come in here and click and drag, and I wanna draw out a text block to about right here, to about the column over here. Once you add a text block inside of Sketch, Sketch is gonna automatically put in some text that says "Type something". You don't have to delete all of this, you can just start typing, but it's gonna put that text in there to sort of prompt you to come in here and start adding some content. Let's come in here and just add our navigation. So we're gonna type "About us". There's no Tab rulers inside of Sketch, so if we wanna create some spaces, we'll have to use the Space bar. I'll put in eight spaces, and then I'll type in the word "Cooking". Then to save time, I'll come in here and select and copy the eight spaces. Paste this again, type in "Resources", paste our spaces, and then we'll type in "Our blog". Gonna hit the Escape key, to escape out of the text editing mode. Get our text block right in the middle, here. Now with this selected, let's come over here to our inspector panel. The font we're gonna be using is Oswald, so this is a Google font that we've activated for Sketch to use at the operating system level. For the color, let's come down here and set this to be white. So I'll choose the white color, I'm gonna press Return. Let's come in here and set the weight to regular. And for the size, we're gonna come in here and leave this at 18 pixels, and then press Return. I'm also gonna come in here and set the alignment to the left, so align this over to the left, and then in our layers panel, we can come in and make sure we have the text layer selected, and we can move this over to the left-hand side. There we go. Zoom up, and take a look. If the layout bars are too strong, you can always go back to the layout settings. Come down here to the light color, and we can just bring this down a little bit. So I'll bring this down here, and we can change the opacity as well, so maybe we make them brighter but less opaque. And you can just do this, just so that you can get a sense of the design without being distracted by all the rules. Excellent, alright. So we're getting a good way through to the header, so let's continue on, and let's start adding our main headline copy. So we'll do the same workflow we did before. We'll come up to the insert menu, come down to type, put in a text block, gonna get the cursor on the left-hand side of the first column, and then click and drag. I'll drag this out to about six columns. Let go, and we'll type in our heading. "Herbs & Spices", make herbs upper and lowercase, hit the Escape key, we're gonna set the alignment to be left. Now, let's come down and make a few more changes. For the typeface, we're gonna come in here and use Lobster. I'll type in Lobster, select that. For the size of this piece here, we're gonna set the point size to 85 points, press Return. For the color, we wanna use the same green color. I'm noticing I can't see my custom color swatches, so what I'm gonna do is just pan over a little bit, so we can see the colors over here. I'll select this, use the eyedropper, and we'll come over and get our lighter green color. Click and drag, and just move this down into place. Now when we start getting into our second and third level headings, we'll start using the style sheets. There are no nested styles inside of Sketch, so anytime I have a text block on the stage that has a unique setting, either color or particular size or alignment, I won't bother making individual type styles for that, because a type style would be the same amount of work as editing the type on the stage. Any time we have text that we can reuse across multiple artboards or areas, we'll create some text styles, so we'll be doing that in just a few minutes. So now let's switch over to our exercise files, and I'm gonna open up the content.txt file. So here, we're working inside of the header. So here's the sub-head we wanna use. I'm gonna come in here and select all of that, copy it to my clipboard. Switch back over to Sketch. One more time, let's come down to the insert menu, choose text, gonna click and drag, make this about six columns as well. Paste in our content, hit Escape. With that selected, let's come back and let's change this to Oswald. Change the color back to white, and for the size, we're gonna set this to 28, press Return. Let's come down to the line height, let's bring this down a little bit, somewhere around 33 or 32. Line height in Sketch will translate to the line height in CSS as well. Now, let's use the arrow keys with this selected, and just move this up, get this to about right here. So once I have these in place, over in the layers panel here, we have all of our different pieces that are showing up. Every time we create new artwork or move things around or associate different art to different artboards, Sketch is gonna constantly be modifying what's happening over here. We also have the ability to create our own groupings inside of the layers panel, here. So to keep all of this together, let's come in here and first select the items that are part of the logo, so that's gonna be the rectangle, gonna hold the Shift key, select the logo and the navigation text. With all of these selected, I'll hit Command G. That's gonna give me a new group, and we'll name this nav. So now we can toggle quickly on and off the navigation piece. And we'll also use this to copy and paste or Option drag this to other artboards as well, so we can reuse that artwork as quickly as possible. Cutting board and countertop, we'll leave these, and we have our Herbs & Spices, so the two items that we've created so far. Now, let's create the button. At the top, we're gonna have a button that's gonna say "Watch a video", that's gonna be the sort of call to action in the main header area. So let's come down to insert text one more time, we're gonna make this about two columns wide. Type in the words "Watch now", when that's done, we'll hit the Escape key. Let's come in here and set the properties for this. So we're gonna set this to 18 pixels, Oswald, we're gonna set this to be bold, or no, let's set this to be regular, bold looks a little heavy. And then, we'll center this. So now this is gonna be the style that we're gonna use for all of the call to action buttons within our design, so this will be the first time that we'll use the text style, so that if we ever need to change that style, we can change it, we can change the style once, modify it, and everything else in the layout will be modified. So with "watch now" selected, let's come over here to the inspector panel, and where we see the type that says no text style, let's click on this, and let's come down and choose new text style. So when the new text style gets activated, it will show us all of the properties that we have selected here, and we'll see these showing up in the inspector panel. This is also highlighted, so we can name this. So we'll name this button label, and then I'll press Return. Once we hit Return, Sketch will also give us a little visual indication of what that style looks like. So as we start adding more and more of these styles, we're gonna be able to get a sense visually in that panel of what all these styles are gonna do. Next, let's come back to the inspector panel. Let's create the outer edge of the button. So we'll come down and add a rectangle. Let's click and drag, we'll make this about 40 pixels tall. For the color, for the fill, we're gonna use our yellow color, so let me scroll over here a little bit. Use the eyedropper, we'll grab our yellow color. I can use the keyboard shortcut in the layers panel to put the rectangle behind the text, which is Command Option down arrow, that'll just put that behind. And now, we have our watch more button. With multiple items selected, we can also resize these as well. So if I wanted these to be three columns wide instead of two, I can select both of these items, and then transform both of these. And since the type is centered, it will automatically center between the width, and the rectangle of course will size to whatever size I drag this in here as well. So all of the call to action texts are going to fit within two columns for this layout, so we'll keep this at a two column width. Now with these two selected in the layers panel, I'm gonna come in here and hit Command G, and we're gonna just name this button, and then press Return. So I'm gonna zoom out a little bit here, and what we're looking at is our header information. All of the header area for our design. So with all of this in place, I'm gonna come back to the layers panel, select button, hold Shift, select all the way down to countertop. Grab all of these together, hit Command G, and we're gonna put all of this into a group called header. So just like any other graphics application, being really organized is key. The quicker we can get into our content, find the individual layers in the groups, the quicker we're gonna be able to make changes, if your clients ever make changes, and just be able to modify all that content.