Sketch App tutorial: Artboards

 

We will learn one of the most significant features of the Sketch app in this lesson. We shall focus on another important design of this interface which is the worksheet and how you can create Artboards. 

The interior part of the Sketch document has a white surface which is known as the Canvas. You can place every object used for design on the canvas. With an infinite dimension, the Canvas can be used without any limit. The worksheet is designed with infinity, you can scroll the sheets and the pixels will move continuously. This is clearly illustrated in Figure 1. 

Figure 1. Infinite Dimensions of the worksheet

sketch-tutorial-image-23.jpg

 

However, the infinite feature of Sketch Canvas can prove to be a hassle when you want to work on specific dimensions such as an A4 format, website or so forth. Nevertheless, you can overcome this problem by using a tool provided in the interface. 

Now let us take a look at the other support features of the Canvas. To choose Rulers for the canvas, all you need to do is press Ctrl + R keys. You can also find the properties of the document on the Inspector Panel which appears on the right hand side of the screen. You can use Rulers and Guides to align the worksheet. This option can be activated by choosing the numerical values of the Ruler. 

In this manner, we can create a frame and limit the space in the canvas, as shown in Figure 2. 

 

sketch-tutorial-image-22.jpg

Figure 2. Rulers and Guides

Another simple and accurate way to classify the workspace is with the help of Artboards. This unique app offers a wide plethora of options that can be altered and used as required. Above the Layers Panel, you will find a “+” icon, in the Insert menu. You can select Artboard entry and a list of choices will be shown on the right side of the screen. You can find options such as size for responsive websites, size for iOS screens and many more. Refer to Figure 3. 

Figure 3 Artboard Options from Sketch

sketch-tutorial-image-21.jpg

 

You can find the pixel size near to each and every label. If there are no dimensions that suit your work in the list, you can choose an approximate unit and then modify it accordingly. You can choose appropriate width and height from the Inspector panel. 

For instance, if want to choose 320x568 pixels, you can choose the sizes from the Artboard as shown in Figure 4

Figure 4; choose an Artboard

sketch-tutorial-image-20.jpg

 

Here we illustrate how to alter these dimensions easily. To obtain a double size screen, we have two fields in the inspector panel which displays the size of the sheet. We can easily change these values by doubling them. As illustrated in Figure 5, the base height of the screen can be altered from 568 to 1136 pixels. 

Figure 5; Alter the size of the Worksheet

sketch-tutorial-image-19.jpg

 

In case, you design a page with vertical scrolling, you will notice that the height is much greater than illustrated before. You can utilize the Zoom tool to know where the sheet ends. This will also diminish the document as shown in Figure 6. 

Figure 6 Zoom Tool

sketch-tutorial-image-18.jpg

 

Now, we will take a look at the last feature of the Artboard- duplication. We often need more screenshots when we design an interface. Here we can duplicate an Artboard by simply pressing the Alt Key. You will find the sheet highlighted with a blue colored outline. Now press the Alt key and add the Shift key to align the duplication. You can then drag the Artboard to the right hand side. Please refer to Figure 7. 

Figure 7 Duplicate an Artboard

sketch-tutorial-image-17.jpg

With the duplication tool in the Artboard, it is quite easy to replicate constant elements in the website such as headers and footers. 

To summarize, the Sketch app allows you to work on a Canvas where you can create infinite Artboards of any size you desire. The next lesson throws light on how to organize a project on several pages. This can be particularly useful if you want to design an entire website in a single Sketch document. 

 

 
pierluigi giglio