Lesson 3 | Learn Sketch: The Basics

This lesson was a little longer than anticipated, so I may skim through some of the steps, but only because they’re ones that I’ve covered in my prior blog posts. So in Lesson 3, I’m going to adapt this website to my smaller screens (the 600 and the optional 320).

First I’m going to start with the adjustments to the content to fit the 600 screen. Now unlike the changes from the large to the medium screens, these changes are going to be a little bit more significant. I started with making adjustments to the layout settings to better fit this smaller screen. In the below image you can see the settings I used for my Layout.

screen-shot-2017-02-28-at-2-59-35-pm

Next, instead of taking each section one-by-one to from the 768 screen to the 600 screen, I just selected all the folders then shift+clicked and dragged to the 600 artboard.

Now, It could get a little confusing having all of these elements on the artboard so I simply went to my Layers panel and clicked on the Eye icon for all the folders except for the “header” so that I wouldn’t have to deal with those sections just yet.

So now focused on the header section, the first thing I want to adjust is the logo and the navigation element. I started with the logo and, after making sure the proportion lock is on in the Inspector panel, I scaled the logo down to 42 pixels. With the logo scaled down, that gave me some more room to do some adjustments to my navigation bar.

With the navigation symbol selected, first I deleted the entire thing. It’s too big and will keep my header section too cluttered if I keep it how it is. So instead, I replaced that with a mobile navigation icon. To do this, I first went to the Insert menu, chose Shape then clicked on Oval.

screen-shot-2017-02-28-at-3-05-20-pm

With my cursor and with the Shift key held down to keep the oval proportional, I clicked and dragged till I had a 5 x 5 pixel circle. Next I turned off the borders and changed the Fill to white.

Since the circle was pretty small, I zoomed in and on Sketch at certain zoom-in level you will see a pixel grid. To turn the pixel grid off you simply go to the View menu, come down to Canvas and click Show Pixel Grid.

Now in that same location where I clicked on Show Pixel Grid it also has Show Pixels and this will show all elements on the page as pixels. If I was to zoom in on this page in a browser, everything would show in pixels since a the end of the day browsers render pixels, it won’t actually render the vectors. So I’ll check this as well before moving on.

With the oval selected, I copied the oval by pressing command+c and paste, pressing command+v. using the arrow keys I’ll position that second oval down seven pixels. I repeated this process once more to get three dots.

Next I’ll get the Rounded rectangle tool from the Insert menu and click and drag out a 20 x 5 rounded rectangle to the right of one of the dots. I then used the same process I used for the circles to create two more.

After I selected all of these I turned it into a symbol and call it “icon_menu.” Then, with the icon and nav box selected, I align the icon center by clicking on Align Horizontally. I also positioned the icon 27 pixels from the y-axis.

On the final touch to the navigation, I changed the width and height of the nav box to 600 x 65 pixels.

Though I’ve finished with the navigation portion, I’m not yet finished with the rest of the header section. Next, I worked on making adjustments to the featured image and the “hero” section.

Opening the featured image group, I selected the Mask and changed the width and height to 600 x 160. Then, with the featured image selected, and scaled it down to a width of 1150 pixels. I rotated the image about five pixels and positioned the graphic in the Mask till the shelf was not visible.

With the graphic image in place, I moved onto the final part of the header section by opening up the hero group. I aligned the group to the left of the third column on the Layout, then selected the text to the heading and changed the font size from 34 to 20 pixels.

I got rid of the line break so that the text was all on one line, then adjusted all the elements till I had them in the position I wanted.

Next, I worked on adjusting the main section, by first going to the Layers panel and clicking the Eye icon to make it visible on my artboard.

Next, I went into the Layers panel and selected the Star icon and positioned it in the center of the first column on the Layout.

With the Star in place, I’m now going to adjust “What’s Trending.” Unfortunately this has a Style applied to it, so any adjustments I make, other than positioning, will also affect my other artboards. So to be able to edit this, I first went to the Inspector panel and clicked on “No Text Style.”  I then change the Alignment from center to left-aligned. With that applied, I adjusted the text to be aligned with the second column. After finishing, I went back to the Inspector panel and clicked “Create New Text Style” calling it “h3 – small.”

I used the same process for the info text before positioning it underneath the “What’s Trending” text.

With the Star icon and it’s elements in place, I then selected the Marker icon and placed it 40 pixels below the star and placed the Gear icon 40 pixels below the Marker.

After applying the styles I created on “What’s Trending” and its info text on the other headings and their text I made some more adjustments to get the spacing right in this section. First I extended the bounding box on What’s Trending out to five columns and did the same to the info text block. Then I put “Where To Find It” and “Tools of the Trade” in their place extending their bounding boxes out to five columns as well.

Now to make adjustments for the “atmosphere” section and I first have to make it visible by clicking on the Eye icon in the Layers panel. Then, with the atmosphere folder selected, I clicked and dragged the content into place underneath the main section.

Opening the the atmosphere section, I selected the “lounge” group and scaled the image and its Mask down to the width of three columns.

Next I selected the orange box and changed the height to 490 pixels so I’d have some room to work with the text placement.

Next, i went to the Layers panel and selected all the text and aligned it to the left column under the image.

With the title and the text block selected I’ll stretch it out to a width of six columns. Next, I applied a different text style to the heading and info text like I did to the previous section.

With those two elements in place, I then selected the Learn more button and positioned it underneath the text block.

For the final touches, I made sure the orange box is selected in the Layers panel and scaled the height down and changed the width to 600 pixels.

Next, I worked on making adjustments to the how-to group before making  the final touches to the footer section. First I set the how to to Display with the Eye icon, then with the how to section selected I moved it into place underneath the atmosphere section.

Then I selected the outermost rectangle and extended the height out a little so that I’d have more room to work with.

I first selected all the elements in the pull quote and moved it down to the very bottom of this section before making my adjustments to the Seating and Lighting groups.

I worked with the Seating group first by selecting the image and positioning to the first column and scaled to two column widths. Then I selected the Lighting group to move it out of the way so that I would be able to move Seating’s text to the right of the image.

After I selected the text elements from the Seating group I positioned it to align to the third column to the right of the image. I then extended the bounding box to four column widths. All I had to do then was position each text element until I had the spacing right.

I then made the same adjustments for the Lighting group.

Next I needed to make adjustments to the pull quote. With the rectangle selected, I extended this out to a little less than six column widths. After finishing that, I adjusted the position of the quotation marks and the quote to the user left-hand corner. With those position, I extended the bounding box for the quote out to a little less than four column widths.

I then positioned the attribute underneath the quote and all the elements under the Lighting group. With the pull quote now position, I selected the outside container and changed the width to 600 pixels and scaled the height down till it snapped to the bottom of the pull quote.

All I had left to do for the 600 artboard was put the footer into position before finishing.

Here is the complete 600 artboard.

screen-shot-2017-03-01-at-1-53-09-pm

All I had left was the 320 artboard left. I’m not going to go through step-by-step because it’s pretty similar to the 600 artboard. All I had to do was make adjustments in positioning each of the elements. in their sections.

The only thing I really had to do some editing on was to the logo. Instead of being two line I had to select each path from the word “Things” and then position it to the right of “Everyday” so that it was all on one line. I then selected both and scaled it to a height of 17 pixels and positioned to the left.

The last big adjustment I made before going section by section was scaling the graphic image down to a width of 450 pixels and positioning it.

Now I’ll just show each section complete starting with the header:

screen-shot-2017-03-01-at-2-24-04-pm

Main:

screen-shot-2017-03-01-at-2-39-39-pm

Atmosphere:

screen-shot-2017-03-01-at-2-46-04-pm

How-to:

screen-shot-2017-03-01-at-2-55-58-pm

Footer:

screen-shot-2017-03-01-at-3-00-33-pm

Here is the complete 320 artboard:

screen-shot-2017-03-01-at-3-00-51-pm

Screenshot of all the finished artboards:

screen-shot-2017-03-01-at-3-15-38-pm

Advertisements