Lesson 1, pt. III | Learn Sketch: The Basics

Today I will complete Lesson with this final part three of designing the “Everyday Things” website. To start this final part, I began with the atmosphere section.

Before I began, I wanted to turn on the Layout columns to help position the content. So I went to the View menu and clicked Show Layout. To make the columns lighter, I went back to the View menu and clicked Layout Settings. At the bottom of the Layout Settings menu you have the visual settings for the Layout guidelines. In the Color settings I clicked on Lighter and lightened the columns so that they were less visible, but still enough for me to be able to align my content to the columns or gutters.

Next, I went to the Insert panel, scrolled to Shape and selected Rectangle to click and drag out a rectangle under the main section that I created in the Part II. I dragged the section out to the full page width and 280 pixels tall. I deleted the Borders property before going to the Fill property and choosing my color swatch, using the Orange color I created in the Document Colors.

Now, with that item selected, I wanted to add another rectangle by going back to the Insert Panel. Going to about 20 to 30 pixels from the top of the original rectangle, I clicked and dragged another rectangle to be about six columns wide and about 20 to 30 pixels from the bottom.

I went back to the Insert panel, chose Image, and selected the lounge.jpg from the Exercise files. After opening the image, it will take up the entire artboard so I zoomed out so that I could scale the image down a little.

Once I had scaled the image down, I went to the Layers panel and right-clicked, or option-clicked, on the Rectangle and selected Mask. I then adjusted the image by scaling and repositioning it to how I wanted before moving on.

I moved my artboard further to the right of the image, and then went back to the Insert panel to select the Text tool. I clicked and dragged another six columns wide text block and typed “Creating a modern atmosphere. I set the font to Open Sans with bold weight and 32 pixels in size with a line spacing of 43.

After setting the alignment to left and clicking away from the text, I noticed that the text disappears. To fix this I simply went to the Layers panel and right-clicked (option-clicked) on the text and selected “Ignore Underlying Mask.” This allowed my text to be visible.

Once ensuring that my text aligns optically with the top of my image to the left, I went to Create New Shared Styles and titled this stile of the text “h2.”

To finish up my atmosphere section, I created another text block (six columns across) below the h2 heading. I then went to the placeholder.rtf file in the Exercise files and copied the text under the Main Section and pasted it into the text block.

Selecting all the text in that text field, I set the typeface to Open Sans with a Regular weight and 16 pixel font size. After setting the text properties, I created a new styles for the text and called it “body – reversed.”

Before organizing my Layers panel and moving onto the next section, I needed to create a button label underneath this heading and text. To do that, I simply went back to my “hero” section and selected the “Get advice…” text and the rectangle with a border, copied and pasted in the atmosphere section. After placing the button where I needed, I selected the text and typed “Learn more,” before making the bordered rectangle to fit the text.

Now, back to organizing my Layers panel. I first renamed the Rectangle with the orange fill and called it “orang box.” I then selected the lounge image and its rectangle and pressed command+g to put it in a group naming it “lounge.” Selecting everything in this section, including the orange box and lounge group, I put them in a group selection and named it “atmosphere.”

Next, I worked on my “How To” section starting with going to the Insert panel and selecting the Rectangle tool that is 320 pixels tall underneath the Atmosphere section. After placing the rectangle, I went to the fill property and set the Red to 238, Green to 233, and Blue to 218. I then deleted the Borders property before turn gin the Layout columns back on under the View menu.

Going back to the Insert panel, I used the Rectangle tool again to place a rectangle in the left-hand corner that is about 228 pixels wide (or 2 1/2 columns wide) and 130 pixels tall. I then went back to the Insert menu to select Image and place the seating.jpg in the Exercise  files on the artboard. After scaling the image down to about the same size as the Rectangle, I clicked selected the rectangle in the Layers panel and right-clicked (or option+clicked) and selected Mask. In the right-hand panel, I flipped the image horizontally before finishing with the image.

Next, I selected the Text tool and placed a text block underneath the image and typed “How To: Seating” Clicking away from the text field, the text disappears because the mask is applied to this as well. To fix that, I went to the Layers panel and right-clicked on the text and selected “Ignore Underlying Mask.” In the Typeface properties I chose Open Sans with a bold weight, and 16 font size with line spacing of 20. After selecting black as the font color, I chose the left-align for the text.

I placed another text block underneath the heading, and used the placeholder.rtf file to copy and paste the text under the How To section in the text field. I used Open Sans for the typeface with a Regular weight and 16 pixel font size. I also created a New Shared Styles and named it body.

To add another “How To…” I went to the Layers panel and selected all the items in the “How To: Seating” and copied these items with command+c and then pasted with command+v. Using Shift+click dragged this copy to the right about 100 pixels. Underneath the copy, I double-clicked on the heading and changed the “Seating” to “Lighting.”

Back in the Layers panel, I selected the second seating image and right-clicked on the image and chose “Replace Image…” in the Exercise files and chose lighting.jpg to replace the seating.jpg. Since the lighting image had the same horizontal flip applied, I clicked that again to set the image back to its original state.

I also wanted to add two “Learn more” buttons underneath both How To images. I set a text block underneath the “How To: Seating” and typed “Learn more.” I used the orange color swatch I created in the Document Colors to apply to the text before applying an underline to the text in the Options settings. I used Open Sans with a bold weight and 16 pixels for the font size with a line spacing of 20. Finally, I option+shift clicked and dragged the text to the right directly underneath the “How To: Lighting” image.

For the final touch of the “How to” section, I wanted to add a pull quote. I first used the Rectangle tool to place one to the right of “How To: Lighting” that was five columns wide. After changing the fill color to white, I added a text block to copy and paste the text from the placeholder.rtf file under the Main Section. I made the text color a dark grey before choosing Open Sans for the typeface with an Italic weight. I used 16 pixels for the font size with a left-alignment and the line spacing at 28.

I then added another text block to the right of the text and put a single quotation mark there. This time, I changed the typeface to Times and kept the Italic weight. I changed the font size to 90 pixels with a line spacing of 60. I then changed the color to have a Red of 210, Green of 187, and Blue of 105. I then used the arrow keys to optically align the quotation mark with the text.

Finally, I added the attribute with the Author name in bold, the Title in italic with the company name underneath before making some minor adjustments.


To keep the Layers panel organized, I selected every element in the how to section and grouping them together with command+g and naming the folder “how to.”

The final touch to the large screen webpage was the footer section. I started placing a text block in the white space underneath the how to section. I created a copyright text with option+g and typed “Everyday Things.” I then option+Shift clicked and dragged that to the right about 40 pixels and typed “Privacy Policy.” I did the same with “Terms of Service.” The only difference between these two and “Everyday Things” is that I put an underline for those two texts to signify a link.

To finish, I wanted to create a symbol for all three of these text blocks. To that I selected them individually and clicked on the “Create Symbol” icon in the toolbar. I then renamed each symbol to correspond to their function before grouping them into a folder called “footer.”

Now, the large web screen layout is complete!