A new chapter for sketchtips

I’ve been a big fan of Sketch and Christian’s blog since first discovering Sketch 2.0 on the recommendation of a friend who converted from Adobe Illustrator. I’m extremely excited to pick up the mantle and carry this while Christian is on his sabbatical and he indulges other pursuits.

For my initial post, I was going to go talk a little about the team at Bohemian Coding so I reached out to them but Emanuel Sa wrote back:
“Inspiring words? Hehe, don’t get me wrong, but we don’t really develop with that in mind, we’re discussing everything with everyone, twitter, facebook, internally, and that’s what really leads our development, it has no magic steps, it’s just that.
We're not much to give interviews or insights into our process, as it has nothing special to begin with, we just focus ;).”

Honestly, I was initially taken aback somewhat, given that I saw it as a opportunity to connect with their customers (YOU) but once I thought about it more, it makes sense that they actually completely focused on bringing us great updates such as version 3.1.

I’ve reached out to a few interesting groups using Sketch such as Teehan+Lax so hopefully we’ll have some interesting insights soon but in the meantime, my next post will be focused on the improvements in Sketch 3.1.

For those who want to connect with me, look me up on Linkedin au.linkedin.com/in/ahjwu/.


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.


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.


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.


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.

Load more tips o