Feb. 8, 2017 | Lesson 1, pt. II (Learn Sketch: The Basics)

In part two of this first lesson I started with creating the logo using the type tools from Sketch. Again, for the sake of consistency with the video, I used Open Sans from Google fonts. To start, I clicked on Insert and chose Text before going to the white space underneath the background graphic to click and drag out a large text block.

I typed out “Everyday Things” in all caps and changed the font color to black so that I could see the text on the white space. I used the condensed version of the Open Sans typeface and changed the font size to 55 with the line spacing to 37 so that the text would have a little bit of an overlap.

I then made sure that the text was selected in the Layers panel and went to the Layers menu to convert the text to outlines by choosing “Convert to Outlines.” In the Layers panel, you could now see each individual layer with its own path. However, the logo now had some issues that I would need to fix with some white space showing on the overlapped text.

To do this I would need to unite both the overlapping paths by selecting the “Union” operation in the toolbar. However, simply selecting both paths then clicking the Union icon would not fix this issue. To do this, I first focused on the first “E” in “Everyday” and the “T” in “Things.” I renamed the both to their respective letter, then moved the “T” layer all the way next to the “E.”

After both layers are next to each other, I selected both layers then clicked the Union icon so that the two layers would merge.

I repeated this process for every letter, making sure that the two letters I was merging were next to each other in the layers panel.


With that finished, I dragged the logo to the background graphic next to the nav bar. I then changed the fill of the text back to white. After, I made some adjustments to the nav bar.

Finally, to continue keeping my Layers panel organized, I selected everything and grouped it into a “header” folder.

After, I started working on the section of web design by creating individual icons by using the drawing tools. The first two icons I created were the start and the marker.

I went to the Insert panel, scrolled down to Shape and selected Star. I then shift-clicked and dragged a star in the white space until the shape was 80 x 80 pixels. After creating the star, I unchecked the Fill box then went to the Borders property to make some color adjustments. In the RGB numbers I changed the “R” to 203, the “G” to 101, and the “B” to 55 to get an orange color for the border of the star.

To make sure that I could use that same shade of orange, I went to the Document Colors and added a new preset.

I then upped the border thickness to three before clicking on the settings of the Borders property and setting the “Joins” to rounded corners for the points. Before finishing with the star, I created a “New Shared Style” and called it “icon – border” so that I could use the same styles for my other icons.

After finishing with the star, I then moved onto creating the marker icon starting with the Insert panel, scrolling to Shape and choosing Oval. I shift-clicked and dragged the oval out to 80 x 80 pixels as I did with the star. With the Oval selected I went to my Shared Styles and selected the “icon – border” that I created with the star.

I then option-clicked on the oval to create a copy of the oval before changing the width and height to 25 x 25 pixels and centering the smaller oval in the original.

I then double clicked on the outside oval to enter the Bezier Curve editing mode and now I have a pen tool that can be used to manipulate certain segments of the oval. Before using the pen tool, however, with the bottom most point selected I changed that “Y” position by adding 20 more pixels from 614 to 634 pixels. With the bottom part of the oval elongated, I manipulated it into a point with a slight in curve by command-clicking on the handles. With the marker icon how I wanted, I scaled the icon to the same size of the star.

After finishing the marker icon, I then went to the Layers panel to place both the marker and the star into their own folder to keep them organized.


Then to the final icon. The gear. This time in the Insert panel, I chose the Polygon shape to begin the Gear. After choosing the shape, I shift-clicked and dragged out the polygon till it was 80 x 80 pixels before applying the “icon – border” styles to the object. After I upped the sides of the polygon from 5 to 24.

To help create the gear icon, I created an oval shape by going to the Insert panel. After applying the “icon – border” styles again to the object, I made the oval 58 x 58 pixels and centered it in the polygon.

To create the gear, I clicked on the top most point and dragged it into the center oval. I then went three points to the right and dragged that third point to the oval as well. I continued this process until I was finished.

To finish, I selected the inner oval and changed the dimension to 25 x 25 pixels before centering the oval. I then selected both and rotated the object 22 degrees so that one of the tooth of the gear was at the top. After finishing, I made a group selection of the oval and polygon in the Layers panel and labeled it “icon_gear” to keep my Layers panel organized.

I then began to create some content to the main section of the site by first showing some layout guidelines. In the toolbar, I chose “Show Layout” so that gray transparent columns showed on the page.

I then went back to the same toolbar icon to go to “Layout Settings…” and change the layout guideline settings so that they were evenly spaced across the page. I changed the Total Width to 1140 pixels and the Offset to 30 pixels.

Next, I went to the Insert panel to select Text and dragged out a text block that was four column lengths wide and typed “What’s Trending. I made sure the typeface was Open Sans with a bold weight and a font size of 22 pixels with a center alignment. Before moving on, I created a New Shared Styles call “h3”.

I dragged and dropped the Star icon until it was at the center of the four columns then did the same to the text I just created. I then created a new text block than spanned those same four columns then went to the Exercise files to select the placeholder text to copy and paste that text inside. I chose the Open Sans typeface with a Regular weight and 16 pixel size with a center alignment.

I then placed the marker icon and the gear icon at the center of their respective four columns. To make the next process faster, I selected both text blocks underneath the star icon and option-shift-clicked and dragged until there was one underneath the marker and the gear. The only thing I changed was the heading. For the marker I typed “Where to find it” and for the gear “Tools of the trade.”

Finally, to keep this organized, I went to the Layers panel and selected all three icon folder along the text blocks I just created and grouped them together in a folder called “main.”


One thought on “Feb. 8, 2017 | Lesson 1, pt. II (Learn Sketch: The Basics)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s