exploring sketch documentation - interface, canvas, shapes, layers etc
12 Sep 2019
An amazing piece of advice in the Pragmatic Programmer is to equip yourself with tools that you know extremely well. This means knowing the quirks and personality of your tools so that you feel extremely comfortable using them.
So this is a little adventure exploring sketch by reading through the documentation for it.
Sketch's interface is designed to be minimal.
- Toolbar: contains all the important tools and actions
- Inspector: lets you adjust the propertiesof the selected layer(s), as well as the options for the current tool. The inspector adapts to show you the tools you need at every moment, and hides everything else.
- Layer List: is the pane on the left, which lists all of the layers and Artboards in your document.
- Canvas: is where you see all of your designs in the middle.
Switching to dark mode
Preferences >> General Pane >> Appearance and select light or dark mode. Note, I need to update my mac to 10.14, it's on 10.13.
Sketch's canvas size is infinite. No limit on where you can scroll in any direction.
You can insert Artboards to create fixed frames inside the canvas. Many designers create an Artboard for each screen in the app and lay them out in order of appearance.
You can view the canvas in a resolution-independent view where you have infinite precision (vector), or in a pixel preview so you know how the pixels will look when exported to JPG or PNG.
NOTE: Some effects like blur will force parts of the Canvas to be displayed in pixel preview mode - blur is inherently a pixel-based effect.
When you have a layer selected, the inspector is divided into sections. Though not all of these sections may be visible dependinf on the layer you have selected etc.
Sections below the 'Layer properties' can be collapsed and expanded so you can hide or reveal their content.
Alignment options allow you to align and distribute layers. They become active when you have more than one layer selected.
Visible in the top part of the Inspector. Includes the layer's position, size, rotation value, flip origin, and (depending on the layer type), a few special options, such as changing the number of points for a polygon shape.
If you click on the padlock in between the width and height, this will lock your shape's aspect ratio. When you resize the width, the height will scale to match and vise-versa.
You can also adjust the corner radius. You can choose between rounded corners and smooth corners. Smooth corners is a technique that apple uses. Their rounded corners have no obvious rounding edges. The corners curve seamlessly in both the hardware corners and icon corners. Both their software and hardware are part of the same design language. more info here
Flip buttons allow you to flip layers vertically and horizontally. You can also flatten a flipped or ratated shape to reset its origin.
The basic building block of a shape is a point. Points are connected by straight or curved lines into a path. They can have multiple paths. You can combine simple paths into complex shapes.
You can assert different shapes into your canvas. Standard shapes are rectangles, ovals, triangles and polygons. If you need a different shape, you can create it with four different boolean operations: union, subtract, intersect and difference.
You can also create shapes by directly editing it's points by entering the vector editing mode by double-clicking it.
- Click on points and drag them to change their position (and the shape).
- Add a new point by hovering over the path between two points and click to insert.
- Delete a point by clicking to select it and pressing the backspace key
- Paths can be straight lines or curves (depending on the type of point that's connecting them). Double-clicking on a point will change it to create a curved path. This will cause two handles to appear, which you can use to control the curvature of the path (pulling the paths towards themselves or away from themselves).
In the case of a rotated layer, Flatten will set the layer's rotation to 0º, whilst working out the total height and width of the layer as a whole. Flattening a rectangle with rounded corners with apply new vector points at the start and ends of a curve, rather than having a single point in the corner.
- Union: A vector that is the sum of both vectors' areas.
- Subtract: A vector where the area of the top shape is removed from the one under it.
- Intersect: A vector consisting of the parts where the original shapes overlapped.
- Difference: A vector that is exactly the part where the original shapes did not overlap.
Combined shapes are shapes that are built from multiple shapes, which are called subpaths. A combined shape can have as many sub-paths as you want.
Layers are rendered in Sketch from the bottom to the top. Boolean operations work in the same way. A final path for a combined shape is arrived at by starting at the subpath at the bottom, and then applying each subsequent subpath to it with the boolean operation it specified.
When you use boolean operations, you want to use them with at most two shapes at a time. Then you can use boolean operations on two shapes that consist of two boolean operated shapes each.
When you combine shapes, if you look at the layer list, you will see a triangle on the left of it. Clicking on it will reveal the sub-shapes, even if they are now combined. The individual shapes will still be accessible as if they had not been combined.
If you add a shape into this layer list, the effect will be the same as if the boolean operation used to create the combined shape was selected manually from the toolbar.
You can also hide sub-shapes (without deleting them) by control clicking them in the layer list and choosing 'hide layer' from the shortcut menu. This will change the way the shape appears as if it didn't exist.
When you flatten shapes in Sketch, it will try to flatten the hierarchy into one path. But not all paths can be flattened into one, like shapes that have a hole inside of them.
Combining other layer types
You can also combine shapes with text layers and symbols.
Rotate and transform
A rotation is a value that is measured in degrees. This value can be changed to a plus or negative value, or to rotate clockwise or counter-clockwise.
For more rotation control, click the 'Rotate' button, then click anywhere outside of your selected layer and drag in any direction to rotate. Holding the shift key will rotate in 15º increments, which is great for right angles and diagonal effects.
Layers rotate around their center point by default, but you can click and drag the cross-hair marker anywhere inside or outside your layer to rotate around that point. Reselect the layer to reset its origin to the middle.
This tool needs to be added to the toolbar through the customize toolbar option. You can use it to create a number of copies of a shape that you then rotate around a certain point. For example, you can take one leaf shape and make multiple copies of it, then rotate the copies around the center to form a flower shape.
Used to distort a shape by skewing its points or by creating a fake 3D effect. When you transform a shape from a corner, the opposite corner moves in the opposite direction as well.
Masks are used to selectively show parts of other layers. Masking an image layer to a circle will give the image a circular shape. Any layers above the mask are clipped to the shape below.
If you don't want all subsequent layers to be clipped, put the mask and the layers you want clipped inside their own group. Or you can select the shape that is currently masked in the layer group and select 'Ignore Underlying Mask' in the Layer - Mask toolbar options.
Or you can select a shape and an image on the canvas and choose 'Layer mask with selected shape. Sketch will place both layers inside a new group and turn the shape into a mask.
You can also change the mask mode to 'Alpha Mask' to give the mask a gradient, and use the opacity of the gradient to determine what should and shouldn't be visible.
The scissors tool allow you to cut away lines from a vector. E.g. if you cut the top and left lines from a rectangle, you will be left with a triangle.
The pencil tool allows you to freehand drawings. When done, sketch will try to smooth out the curves and simplify the path for you.
A really awesome article about mastering the bezier curve in sketch.
A great way to practice bezier curves is by tracing letterforms: Take a photo or drawing of a beautiful letter (something curved, like a “G”, “Q”, “R”, or anything from a script alphabet), bring that image into Sketch, and use the vector tool to trace the outline of the letterform. Try to position your vector points at the outermost places on the shape, use vertical and horizontal handles, and fine-tune them by manually entering coordinates.
Joining two or more paths will combine them into a single continuous path.
Convert to outlines
You can convert a text layer to outlines and also convert a layers border to outlines too. When you do this, the border on your selected layer will become a path with its own fill.
You can expand or contract the outline of a selected shape by choosing 'Layer' - 'Path' - 'Offset' from the menu. This is a destructive action, so you'll have the ability to duplicatethe existing layer to preserve it.
A path's direction is determined by the order in which its points are placed. There is a start and end point when paths are open. Reverse Order swaps the start and end points. This part of Sketch's documentation wasn't all that clear.
There are different types of points available which can affect the paths that lie between them.
- Straight: The default point, it will give you a straight line, which is useful for drawing things at angles, like corners.
- Mirrored: This will create a bezier curve, which is a curved path. Dragging one of the handles will move the other to create a completely smooth curve.
- Asymmetric: Similar to the bezier curve, the handles share the same angle but one can be moved to a different distance to the other one. They are still connected.
- Disconnected: The handle points are completely independent of the other. You can delete one of the handles to allow a curve to sharply turn into a straight line where the point lies.
Bookmarking place in documentation