!

Give me a break!

You know, I love Sketch, and I love to contribute to the community. But sometimes everything else needs to wait, when there is one thing in life you really want, one thing you totally need to pursue. I'm at such a point right now, which deters me from updating sketchtips like I planned to. Can't say how long this break will take or if I even will come back to publish articles.

But since I totally don't want to abandon sketchtips I'd like to ask the community for help. Is there anybody amongst my dear readers who wants to continue for me a while? If you are interested, just drop me a line.

oOo

How to make a layout-grid

Shortcut: ctrl + L

Note: The terms of “grid” and “layout” are used a bit ambigious in Sketch. A grid, which you typically use on a website or app to align content, is actually called “layout”, while a “grid” is just a raster of evenly spaced vertical and horizontal lines for easier alignment. However, in this article I’d like to talk about Sketch’s “layout” option which I call “grid” in the following to use the proper term.

Screenshot of Sketch which shows the 'layout' dialog

Since grids are one of the most essential starting points for a design, they are an inherent part of Sketch. To toggle the grid press ctrl + g or select “View > Show/Hide layout” in either the menubar or toolbar. Now a default grid is shown which you can change with “View > Layout Settings...”. The following dialog has numerous options to adjust. On the top you can define the “Width” of the grid and the “Number of Columns”. Unfortunately the width can only be set in pixels – if you need a percentage you have to do the math by yourself. Right beneath is a handy “Center” button and the option “Gutter on outside”, which distributes half of the set “Gutter width” on the left and right outside of the grid. If you have set “20px” then 10px are added to the left side of the grid and 10px on the right side. If switched off the grid is exactly as wide as set at the “Width”.

Screenshot of Sketch with the description of the different parts of a grid

Next you find the aforementioned field for “Gutter Width”, which determines how wide the spaces in between the columns are and “Column Width”, which determines the width of columns set at “Number of Columns” above. The “Guter Width” is automatically adjusted based on the “Total width”, “Number of Columns” and “Column Width”, but naturally you can also adjust it which in turn affects the “Column Width”.

Apart from a grid based on columns it is also possible to make a “row” grid or combine the both. However a row grid is not as flexible as a column grid. The ”Gutter Height” directly affects the “Row height”, which is just a multiple of it. So the higher the latter, the bigger the rows get. To show every subdivision of the rows select “Draw all horizontal lines”. Unfortunateley the most essential “row” grid, a baseline grid, can’t be achieved this way.

oOo

Arrows and other border options

Screenshot of Sketch which shows the advanced options for borders

Some of the options in Sketch are rather hidden. Amongst them are the advanced settings for borders, which can be found if you click on the little gear icon at the border options in the Insector panel. They allow you to:

  • Set the ends of lines: They can either be angular and end right at the end of the line, jut out by the half width of the thickness and be rounded or angular (from left to right): Screenshot of Sketch which shows the end options for lines
  • Set the joins of lines: This determines how the corners look where two border lines meet. They can be angular, round or slightly bevelled (from left to right): Screenshot of Sketch which shows the join options for lines
  • Make arrows: Moreover the start and end points of lines can be equipped with three types of arrows. Unfortunateley they only work correctly for borders of 1 or 2 pixels because they are not sized according to their thickness.
  • Create dashed/dotted lines: You can set certain patterns, which determine how long the line and the following gap is. A dotted line for example is represented by the values “1-1-1-1”, a dashed line is “2-1-2-1”. The bigger the "dash" values are, the longer the line segments, the bigger the "gap" values are, the bigger the spaces between the lines.

In Sketch 2 these options can be revealed if you click on the little down-pointing arrow at the border options.

oOo

Make 9-Slice Image

Menu bar: Layer > Convert to 9-Slice Image (Sketch 2: Edit > Convert to 9-Slice Image)

With this option you can divide an image into nine sections, which act differently when you resize it:

  1. The corners get moved.
  2. The side areas get stretched.
  3. The part in the middle only gets scaled.
Screenshot of Sketch which descries the different sections of a 9-slice image
Browser frame by Medialoot

To apply it just select the bitmap, choose “Layer > Convert to 9-Slice Image” (Sketch 2: “Edit > Convert to 9-Slice Image”), drag the four handles to the desired location and confirm the operation with enter. Whenever you resize the image now the outer parts always keep their original appearance. Like in the screenshot you can use this function for example to make a frame of an app, which never gets distorted when you resize it.

oOo

Stroke width

Menu bar: Layer > Paths > Stroke Width (Sketch 2: Edit > Paths > Stroke Width)

Although Sketch is quite unflexible regarding irregular strokes there is still an option for this type of modification. After you have created a vector or path make sure that it has a border applied and select the above menu command, which allows you to set various width points. Just click on any position of the border and drag it outwards to set the width of the stroke at this point. Repeat this step until you have the desired result. Please note that the start and end point of the vector can also be modified.

Screenshot of Sketch which shows a vector with different width points

Unfortunately this tool is somewhat unflexible and can sometimes produce unexpected results. Hence it’s better to select and delete existing points with del or backspace if you are not satisfied. After you are vaguely happy with the width points select “Layer > Paths > Vectorize Stroke” (Sketch 2: “Edit > Paths > Vectorize Stroke”) from the menubar, which lets you alter each individual point. Of course the stroke width can also be altered for shapes, but the best results are produced for straight vectors or paths.

oOo
Load more tips o