Switch to Sketch. Part 2

  • Tutorial


So, we continue to research the Sketch 3 program with the goal of subsequent switching to it from Photoshop. The first part can be read here .


One of the main reasons for pride among developers from Bohemian Coding is the absolute sharpening of all the tools for working with pixels. Surely the creators of the program themselves once suffered with Photoshop and Illustrator, until they came up with the idea to create a graphical editor from scratch, where the most optimal pixel fitting algorithms would be implemented.

When you create graphics in Sketch, it is automatically snapped to the pixel grid, so you never get fractional values, which means blurry edges, fluffy lines and other absurdities. All edges are formed perfectly even, and the roundness is smoothed out in the best way.

But the most impressive feature of Sketch is the ability to fix any objects in one fell swoop, which for some reason formed bumps and blurring around the edges.

Let's take a set of simple glyphs created in illustrator as an example. When transferring them to Sketch, all of them turned out to be somewhat blurry, which is clearly visible with a strong increase:



Now, let's use the Layer> Round To Nearest Pixel Edge command. Voila! All icons are aligned in such a way that there are no deviations from the normal line thickness:



This surprisingly simple but effective feature can dramatically reduce your uptime. Personally, I remember many tedious hours spent cleaning and trimming icons and logos for the client. Moreover, each object had to be processed manually in order to fit to the pixel grid. In Sketch, this is a matter of a couple of seconds. Impressive.

However, be careful. Sometimes this function does not work in the best way and corrects some bezier splines, artifacts may appear. It is worth hoping that the developers will finalize the algorithm, and the guarantee of pixelation will be completely predictable.

Of course, Sketch perfectly implements the ability to create rounded rectangles. Whatever you do with your rectangles, there is always the opportunity to change the rounding of the corners of both individual rectangles and all selected at once, as well as specifically selected angles:



By the way, by double-clicking on an object or pressing the Enter key, you enter the mode editing its components. And then you can select and sip nodules of bezier-splines, convert the nodal point to one of four types and do a number of other useful manipulations.

In this mode, you can select individual points, as well as indicate how they interact with each other. Bohemian Coding decided that pixel splitting is not very desirable, so integer values ​​are taken as the basis. But sometimes there are cases when a finer adjustment is needed. And in this case, the ability to correct nodes on the object with a value of half a pixel was added:



In this mode, you can select one or more nodes and use the mouse to gently shift so that the desired border with half transparency is formed. In some cases, this can be very useful.

In editing mode, nodes and segments of the curve are highlighted when you hover over.

You can easily add new nodes on the curves. It is enough to move the cursor over one of the faces, which is highlighted with a blue line. When clicked, a new anchor point will be created. Double-clicking on the created point will switch it between a corner (Straight) and a smooth one with symmetrical guides (Mirrored). When the Cmd key is held down and when you hover over any of the segments of the curve, a probable point in this section of the curve will be shown, equidistant from the existing node points, which can be created with a subsequent click. Very convenient function:



You can delete any point by selecting it and pressing the Backspace or Delete keys.

It’s a pity, but the developers of the program overdid it a bit, hiding two important functions when creating Bezier curves. Both “Finish Editing” buttons (replaced by pressing Esc or Enter) and “Close Path” (alas, by default not replaced by anything) are barely visible at the top of the inspector panel:



When working with the Pencil or Vector tools, you cannot stop further curve drawing if you don’t The Close Path button or Esc key was pressed. After that, you will be able to select arbitrary points of your object (simply by clicking or frame around the desired points) and make any transformations with them, for example, change the type of selected points:



If you press the “Open Path” button on a closed curve, you will again receive a tool for drawing the curve without the ability to stop it and go to the selection of the required points. Nor can you close the vector shape by simply moving the cursor to the end point, as in Illustrator. The logic is not entirely clear, but you can get used to it.

I assigned the keyboard shortcut Cmd-Alt-P to the function Layer> Paths> Close Path, and now in the process of creating Bezier curves you can easily close the end nodes:



In general, creating and editing curves in Sketch is a pleasure, especially after rather awkward attempts to implement Illustrator functions inside Photoshop.

And by the way, remember one rule for Sketch:if you went somewhere wrong or pressed something wrong, always press the Esc key - almost everywhere in Sketch this cancels the inclusion of any mode, so it's hard to make a mistake.

Sketch has a function to change the stroke width in arbitrary sections. You need to select an object with a stroke and turn on the Layer> Paths> Stroke Width mode. You will be able to add or remove paired control points on the path that allow you to narrow or extend the stroke:



Any stroke can be easily turned into a fill using the Layer> Paths> Vectorize Stroke function. I assigned the keyboard shortcut Cmd-Alt-R to this function:



Text can also be turned into editable curves using the command Type> Convert Text To Outlines (Shift-Cmd-O):



In most cases, the conversion will succeed, but at times unwanted artifacts may appear.

When converting to curves, Sketch creates a group in which each letter of the converted text is a separate layer. Accordingly, only each character can be edited individually. It is not possible to select all the symbols at once and edit all the node points for different symbols at the same time.

The fact is that Sketch has a somewhat peculiar and not quite familiar work with Boolean operations. The developers of Bohemian Coding decided that any Boolean operations on vector forms would be non-destructive. That is, at any time, you can change the type of interaction of forms, as well as edit any component.

In this case, the result of a Boolean operation is a group containing the original forms in an untouched form. This group is displayed in the layer panel with a small icon, which is the outline obtained by joining the original shapes. A gray icon appears on the right, indicating which type of joint the overlying form interacts with the underlying. Clicking on this icon brings up a popup where you can select any other type of Boolean operation:



However, the developers provided for the possibility of combining several forms into one. Using the Layer> Paths> Flatten command (or by clicking on the corresponding button on the toolbar), the sections of the original forms merge that either complement each other (Union), or subtract one from the other (Substract), or intersect (Intersect). In this case, the result will be only one new object. If intersection or hole regions arise, then such regions will appear as separate layers. Therefore, in the case of the Boolean operation Difference, you always get at least two objects placed in a group. Much more unexpected options will come out if you try to apply Flatten to more complex types of articulation between multiple shapes. A bit unusual, but you can get used to:



By the way, you can hide the display of holes without changing the type of Boolean operation and without touching the forms themselves. To do this, in the inspector panel on the right, click on the small gear icon in the Fill section and select Non-Zero mode from the pop-up list instead of Even-Odd mode. However, this method does not always work. For example, in a converted A letter, the hole remained uncovered, while the circular hole inside the rectangle disappeared (although the circular shape is still present in the group):



If Flatten was not used, objects combined using any Boolean operations can be disconnected using the Layer command > Paths> Split:



In addition, you can join unclosed forms using the Layer> Paths> Join command. Select two or more such objects, apply Join, and one object will be formed in which the nearest ends of the original forms will be connected to one node point:



That's all for now. In the following parts I will tell about my further discoveries in the wonderful program Sketch.

Successful fotoshopinga sketchinga!






Also popular now: