App Design Sketch Tutorials (04)-Pens and paths

App Design Sketch Tutorials (04)-Pens and paths

Sketch is a vector software, lift the vector software, then we will certainly think of various paths, think of the path, there are nodes, think of the node, there is a Bezier curve, and then there will be something is a pen. To the pen, for many people, this must be a not very happy memories, pen is the drawing software is difficult to master one of the tools. If it is not good, we can not draw a variety of irregular shapes come out, either not smooth enough, or grotesque and miserable.

So what will the pen tool look like in sketch? We found the pen shape icon in the interface, if not found, you can right-click in the toolbar, and then select the custom toolbar, the Pen tool to the toolbar for ease of use, incidentally, the Pen tool's shortcut is V, that is, the first letter of the vector, so you do not forget, Tools similar to the Pen tool also have pencils (Pencil, shortcut P), edit (edit, wooden shortcut keys).

When you click on the pen tool, your mouse will become a pen shape and you can click on the canvas to add nodes. Static electricity draws a triangle on the canvas. At this point, we will find that the property bar on the right has changed, and there are many alternative items. The edit icon for the toolbar also becomes selected.

Right Property Bar

1.Finish Editing-If we finish the operation of the pen or edit, then you can click this button to complete the editing, the mouse back to the arrow.

2.Open path-If we draw a closed graphic, when selected, the path opens to open.

Four icons below:

1.Straight-If we draw a curved node, then click this button, the node will be directly into the polyline, the radian disappears, and in this mode, can only adjust the node position, cannot set the radian. (In this mode only, the corners option below will take effect and the corners parameter will be smoothed in radians.) This way has good and bad, the disadvantage is not easy to further adjust, you can choose to use their own)

2.Mirroed-If we want to add a corner of the triangle to radians, then we switch to mirrored, where the slider appears on both sides of the node, we can adjust the length and position of the slider to the curvature of this node and the line on both sides of the node conditions, but in this mode, no matter which one you drag the slide bar, The adjustment effect is mirrored by the node position and is suitable for drawing symmetrical shapes such as circles.

3.Disconnected-This time the slider effect is only effective on the side of your current drag, and the adjustment is more flexible.

4.Asymmetric-translation is asymmetrical. When this state is selected, the sliders on both sides of the node always remain straight, but the position of the side adjustment node to the node can vary arbitrarily.

Below the Round:full Pixels and the other two options in the dropdown box, electrostatic check a lot of information, but also do some experiments, but always do not understand the specific role is what, if there is a great God understand, welcome to communicate together.

Continue below the fills and borders, one for the fill color and one for the border color. The blending option in fills can be interpreted as a different color overlay pattern. For example, we use a red circle superimposed over a green circle, With different blending options on a red circle, different color overlays appear, which is somewhat similar to the layer overlay pattern in software such as Photoshop.

Simple Filter effect

The next option is sketch provides some simple image effects, namely shadows, Inner shadows, blur, and projection effects. We can apply multiple image effects to an element at the same time. By clicking the plus sign on the right, you can set multiple image effects at the same time, such as projections, and projections in multiple directions make the projection effect more realistic.

Scissors Tool (Scissors)

For the operation of the path, sometimes we need to create an unclosed path, and at this point we can use the See tool to "cut" the path between the two nodes, which will form an unclosed path. You can also fill in colors. If you can't find the scissors tool, drag it from the custom toolbar to the Standard toolbar.

You can get a hands-on approach to better understand the unique features of the pen tool in sketch, which is somewhat different from the software we use often, such as Photoshop.

Operation of multiple paths

For multiple paths or vector graphics, the sketch provides four ways to combine them. This is a common feature in graphics operations.

Union (COMBO): Combines two vector graphics, such as the second row of the first shape

Subtract (minus): Subtracts the outline intersecting in two graphs from the first contour

Intersect (intersect): Take the intersecting portion of two graphs

Difference (knockout): Takes a disjoint portion of two graphs.

Unique features: text arranged along a path

A few days ago a friend in the tutorial under the message to ask static, sketch whether there is text along the path of the function of the arrangement, static electricity to tell everyone, this is some. Come and see how static electricity is done.

1. Create a piece of text with a path

First use the Text tool to create a piece of text, and then use the Pen tool to create a path, such as.

2. Select the text and Type>text on Path

3. Drag the text to the path. At this point, we can drag and drop to see the different text along the path of the effect, while you can adjust the text spacing and other properties to achieve their own satisfactory effect. If we are not satisfied with the curve effect, or if we are not satisfied with the text, double-click to enter the text or curve editing state, You can edit them separately.

4. If you want to remove the effect of text along the path, use your mouse to drag the text out of the path. Or, in the menu Type>text on path, uncheck the checkmark for this option.

Convert Text to Path function

Break the text, can be based on their own needs to make a unique font, which is static electricity in AI or FW often used in the function, but unfortunately, static electricity to tell everyone, this function in sketch is basically a chicken, when you choose the menu Type>convert Text to After the outlines, the font is converted into a path, but the static electricity of the computer basically belongs to the state of one step card. So if you want to use sketch to do the font, then static electricity or persuade everyone to slowly. It's a good choice to use other tools to design and then import sketch.

App Design Sketch Tutorials (04)-Pens and paths