If you decide that you placed the origin of your new shape slightly wrong, hold down the Space bar. While the Space bar is pressed you’ll be dragging the shape’s origin instead of changing its size: （space空格键）

View › Canvas › Show Selection Handles ，

### Overlapping Layers# 右键，selecting layers 中选择，

Hold the option key, sketch will select the second layer under the pointer instead of the top-most one.

Quickly Selecting Layers in Groups

hold down Command and select that deeply buried layer straight away.

Option key while dragging, you will clone the layer,

Command-D (duplicate)，

View › Canvas › Show Smart Guides ，

## Moving an Obscured Layer# Option-Command and then clicking-and-dragging will not change your selection.

Distribute layers 只有当layer是不均匀分布的情况下，这两个功能才会亮起来。

To align layers to a specific object, first lock that layer by using the lock button in the Layer List or by using Shift-Command-L. If no specific object is selected, Sketch will align the layers to the outermost layer of all those selected.

Resizing Layers

If you hold down the Option key, the layer will resize from the middle instead of from the opposite edge，

cmd+触摸板两指头上下移动，可以缩放绘图视窗，

scaling

Layer › Transform › Scale… Command-K，

如何快速跳转到想要看的页面，affinity那样？ cmd+3，

editing shapes

double-click it (or press the Enter key) to begin editing，

holding the Command key and dragging one of the selection handles.

mask

Restricting Masks， If you don’t want all subsequent layers to be clipped, the best way to restrict the ‘influence’ of the mask is to put the mask and the layers you want clipped inside their own group.，

another way to stop a mask is to do the following:

Select a shape that is currently masked but that you don’t want masked，

In menu, choose Layer › Mask › Ignore Underlying Mask，

## Mask with Shape# Select a shape layer and an image on the Canvas and choose Layer › Mask › Mask with Selected Shape .

## Alpha Masks# gradient, and the opacity ，

Vector Editing

Layer › Convert to Outlines，

Layer › Path › Offset，

Layer › Path › Reverse : there is a start point, and an end point if a path is open.

Asymmetric# When clicking-and-dragging to adjust a handle control point, holding down the Shift key will adjust the distance between the control point, and its vector point without affecting the handles’ angle. Perfect for trying to fine tune the curve at one side of a point.

Disconnected# You can also do this with existing Mirrored or Asymmetric points by holding Commandbefore clicking-and-dragging a handle control point.

Pressing the Command-A shortcut will select all the points within a shape, and pressing the Tab key will jump between points in the order they were placed.

text> Convert to Outlines

Layer › Convert to Outlines ，

3.Images

Images, or bitmaps， Layer › Flatten Selection to Bitmap ，

Layer › Image › Minimize File，

Layer › Image › Set to Original Dimensions : revert an image back to its original size，

Bitmap Editing

插入图像后，双击图像，进入编辑模式。

Selection: Select a rectangular area on the image. Magic Wand: Click and drag anywhere on the image to select an area. The further you drag away from the start the greater the tolerance will be.

Shift:add selection . Option : subtract.

Once you’ve made a selection you can either cut/copy the selection and use it for a new bitmap layer or select one of the two options in the Inspector:

选择好选区后，选择inspector下面的工具操作；invert，crop, fill，

data

Command-Shift-D,Refresh Data，

### Adding New Data# Data pane in Preferences. a .TXT document, or a folder of images ，

Grouping Layers

Groups can be nested, Command-G，

Editing Groups

double-click ， the Enter key ，

Click-Through

hold down the Command key, select any layer contained within a group.

“Enable click-through for new groups” checkbox, under the Layers tab in Sketch’s preferences.

select the “Click-through when selecting” checkbox.

总的说来：通常选择group的时候，不能直接选择group内部的内容。需要按住cmd然后才能选择group内容。

可以在preference 中设置，或者在inspector中设置。这样可以跳过group选项，直接选择内容。

Artboards

cmd+D, 复制画板，能直接让画板等距排列着增加。比按住option拖动要速度快。

Resizing Artboards

ensure that you’ve applied constraints to the right layers.

Click the on the preset label to reveal a popover containing all the saved Artboard presets, and choose your new size.

设置好限制后，然后调整画板。或者直接更换画板的尺寸，换成不同平台上看效果。

### Resize to Fit# fn+左右方向键，逐个切换画板。 fn，function.

## Deleting Artboards#

remove an Artboard, deleting by pressing Backspace will also delete the content within.

to delete the Artboard only, Ungroup (or press Shift-Command-G).

pages

最好还是分页呈现。

different pages for a web design, contain a style guide, or the extra Canvas can just be used as a playground to experiment with ideas.

switching pages

Function-Up/Down Arrow，

Styling ，

Quickly Adjusting a Layer’s Opacity

press the 1-9 keys ，

Changing a Style’s Blend Mode

click the icon to the right of where you can change a property’s color.

Organize Properties

rearrange the order in which multiple Fills, Borders, and Shadows will appear. You can even quickly remove unwanted styles this way by dragging it outside the Inspector.

Removing Unused Styles

the delete button that appears on the section title.

Copying and Pasting Styles

Edit › Copy › Copy Style(or press Option-Command-C) ， Edit › Paste › Paste Style (or press Option-Command-V).

Using the Touch Bar

这个需要在fill中保存相应的global ,document color. 然后才能在toolbar中显示出来。

Fills

Adding Fills

the HEX value ：一个#号开头的数字，代表色彩数值。

Image Fill

可以从unsplash中获得的图像保存在这里。用的时候直接添加。

Fill Settings

(Fill image ) Fill: Fit: Stretch: Tile: This will keep the image at its original size, but tile it to fit the layer. Its size can be manually adjusted. Useful for creating tiled patterns.

Borders

Border Position

If you apply a border onto an open path, then the only available option would be center.

inside, center, or outside

Border Colors

pressing the B key:quickly toggle the visibility of all borders ，

Arrowheads

Layer › Path › Reverse Order，

Dashed Lines

虚线 To create a dotted line, first set the end type to use a round cap, and then set the dash value to 0. Adjusting the gap distance will change the look of your dotted border.

Shadows

Spread

延展 it isn’t possible to adjust the spread of a shadow on a text layer.

Blurs

Gaussian Blur: Motion Blur: Zoom Blur: Will blur from one particular point out. Background Blur: This will blur any content that appears behind the layer.（需要先填充，然后降低透明度到0，才能显示背景模糊）

Performance

applying many blurs to your document may cause Sketch to slow down，

Colors

Eyedropper

在RGB数值下面有一个隐藏的按钮，鼠标放上去才会显示，可以切换rgb，hsl色彩模式。同时鼠标放在这个地方的时候，可以按住触摸板来回滑动微调颜色，不需要一个数值一个数值的按动。

Find and Replace Color

edit > find and replace color 在这里，所有的色彩都自动变成了符号颜色，改动一个颜色，系统里面所有同样颜色的色块都改变了。

### Color Management# ?

Gradients

Linear Gradients

Radial Gradients

可以在色彩渐变条上添加color stop，这个时候形状的控制点都变出来了，可以随时修改形状。（之所以会这样是因为双击了形状，让形状进入了编辑状态。这种状态不能调整渐变色。最好还是退出编辑状态，）

Angular Gradients

同上，色彩条右边有改变顺序的按钮，分别是invert , rotate .

Gradient Bar

Shortcuts

press the 1-9 keys on when a stop (that isn’t the start or end) is selected to position it on the relative percentage of the gradient. So pressing 4 on a third stop, will place it at 40% along the line.

只针对中间的点，两边的点不管。

use the Tab key ,to quickly switch between color stops,

the arrow keys, to adjust the position of a stop ，

incrementally.,Holding down the Shift key will amplify the movement.

Preset Types

Color alpha: transparency /

### Managing Presets# 在document color，global color中，右键点击色彩，出来一个clop to clipboard, 后面是nccolor， ui color .还有swift ， c语言，

click-and-drag to reorder presets.

To delete a preset simply move it outside of the popover or choose Delete from the Control-click menu.

Control click ，ctrl+点击，=右键。

Layer Styles

Creating a Style

Layer › Create new Layer Style，要layer中的元素保存到library中。

右边inspector中style里面有星号，表示这个style被修改过了。但是不影响library中的style。

6 symbols

A Symbol is made up of two parts:

a “master”, which takes the appearance of an artboard，

an “instance”, which is a flattened ，representation of the master.

主次区别。

### Symbols and Other Documents# Any properties such as borders will increase or decrease in size, in proportion with the Symbol itself, without affecting the master.

Symbols can also be individually resized and you can apply resizing constraints to layers.

when resizing a Symbol in this way its stylistic elements will not scale up or down accordingly.

对symbol使用缩放功能，只单独修改目前layer中的symbol instance，对于整个master，更高层面的symbol，是不会产生改变的。

在这种缩放下，在symbol内部给layer添加约束，被约束元素不会改变。

Symbol可以被用于多个文档。

Creating Symbols

在添加symbols的时候，会弹出一个页面，页面下面有个选项，send symbol to "symbols"page，如果选择，那么新的symbol会自动建立一个page，叫做symbol，然后所有的symbol都在那里。如果不选择，那么这个新的symbols就在在正在操作的页面建立一个symbols画板。就在设计区域旁边。

Layer › Convert Symbol to artboard ：to convert a Symbol master back into a regular artboard.

Layer › Detach from Symbol，

### Editing the Master# double-click on an instance，

master是不是指在symbols page页面中的源符号，而instance则是文档中的复制品？

这个功能的出来过程：首先在工作页面点击符号，想要修改，于是双击符号，进入到符号总页面，master，然后修改。修改好了之后，点击return to instance ,继续做别的设计。

所以在工作区域的复制符号，是instance，在总的符号页面，是master。

Editing Instances with Overrides

Overrides allows you to update each inserted Symbol instance independently with unique content.

可以override改动的内容有：the contents of any text layers, images, as well as any shared text and layer styles.

also edit the size, scale, blend mode, and opacity for Symbol instances independent of its master.

Symbol Overrides

Focussing Overrides

有多种选择方法。当选中symbols的时候，鼠标在上面hovering，能够用来override的元素会高亮显示。

Text

When you update the text contents, its total length may change. As a result, Sketch will automatically move any trailing layers on left or right aligned text, and respect the distance between it and the end of the text layer so you can fully take advantages of Symbols and overrides, no matter your design.

修改文字后不会改变文字间距之类的，让设计更便捷，不必太关心这个。只要改文字就可以了。 trailing layer？下垂的。 trailing layer应该是指下一层的图层。可能误点，所以可以先锁定。

Images

To remove an image override, click the image preview and press the Backspace key.

在inspector中点击override下面的图像，del即可。

Text and Layer Styles

change a text’s color，

##### Hotspots# Hotspot，热点，比周围温度高的地区。

Prototyping properties such as Hotspots can also be overridden. Adjusting a Hotspot’s override allows you to select the target artboard, when it is part of a prototype.

Resetting Overrides

the Reset icon at the top of the overrides section. 会一键reset所有的内容。

Organizing Symbols

制作symbols的时候没有添加到默认页面，后面可以拖进特定的页面管理，还可以对symbols右键，选择send to symbols，

Symbol Naming

If you include a slash (/) in your Symbol’s name, Sketch will treat these as group separators.

two Symbols named Button/Normal and Button/Pressed will be grouped together into a submenu called Button.

Swapping Symbols

any layer can be swapped with a Symbol.

Control-click the layer， choose your Symbol via the Replace With option in the contextual menu.

Nested Symbols

select multiple instances of different Symbols press Create Symbol in the toolbar.

Nested Overrides

7-libraries

A Library is just an ordinary Sketch document that contains Symbols, Text Styles and Layer Styles, which you can then use in any other Sketch document.

Adding Libraries

To add a Library, need a Sketch document that contains Symbols, Text Styles or Layer Styles，

Sketch’s Preferences (Command-Comma)> Libraries tab.

Libraries and Teams

For example, if you’re storing a document you would like to use as a Library on Dropbox, just navigate to that location when you’re adding it to your Library list.

运用云路径即可。

Any document uploaded to Sketch Cloud can be used as a Library,

host your Library file on any online server, publish an RSS that points to it， have Sketch subscribe to the RSS to get updates sketch://add-library?url=URLEncodedPathToRSS，

Library Symbols

Library Symbols some color difference from local Symbols.

Editing Library Symbols

Opening the Symbol in its original document will allow you to edit it，

Detaching Symbols from Libraries

This converts the Symbol to a local Symbol, so it can be edited in your own document. Unlinking a Symbol from its Library will add the Symbol’s master to the “Symbols” page in your document.

Organizing Imported Symbols

Library Styles

Editing Library Styles

Unlinking Styles from Libraries

If you want to unlink a style from a Library, without creating a new local style you can also choose to detach it instead of unlinking.

detach功能在inspector中appearance中，右键下面有。

layer> unlink form library ，

Library Updates

### Accepting Changes# 当library有更新的时候，软件右上角会有提示。可以选择更新，或者挑选部分更新。

Shared Libraries

Shared Libraries are built on open web technologies, they can be stored anywhere on the internet.

Shared Libraries on Sketch Cloud

Apple UI Design Resource

8-prototyping

Links

select a layer ， click the Add icon next to “Prototyping” in the Inspector or press the W key.

To remove a Link, you can set its Target to “None” or select the layer and choose Prototyping › Remove Links from Selection from the menu.

Hotspots

A Hotspot can be added via the Insert menu, or you can press H to start drawing one.

selecting the layer and clicking the “Create Hotspot” icon in the Inspector.

Hotspots are particularly useful as they can belong inside Symbols where their target destination can be overridden, allowing you to reuse a Symbol but change the Target destination each time ，

View › Show Prototyping (or press Control-F) to toggle them on and off.

Fixed Elements

Fixed elements are layers or Hotspots that will stay in one place while the rest of your content moves behind them, to mimic a scroll view in your prototypes.

Fix position when scrolling ，

Prototyping › Fix Layer Position when Scrolling in the menu，

Start Points

can also define multiple Start Points — a feature that will be very useful when you’re building more complex prototypes that contain many artboards, or if you only want others to view a particular part of your Prototype.

在演示的时候，上面有一个小旗子，在起始页点亮就可以。

Previewing

Canvas

Zooming

hold down the Z key on your keyboard to enable the tool，

⌘ + Zoom in， ⌘ - Zoom out， ⌘ 0 Zoom to 100%， ⌘ 1 Zoom to all elements on Canvas， ⌘ 2 Zoom to selected layer(s)， ⌘ 3 Center selected layer(s) in the Canvas，

Pixel Zoom

View › Canvas › Show Pixels on Zoom ，

Rulers, Guides, and Grids

Rules，左上角小锁，打开后可以移动尺子。

Measuring

In addition, you can also hold the Command key at the same time, this will allow you to measure against layers inside groups in the Canvas.？

holding Option ，text’s bounding box. Control key with Option,measure against the text layer’s baseline at the bottom, or cap height at the top for more accurate measurements.

View › Canvas › Show All Guides，

9-sketch cloud

10-exporting

Make Exportable

### Export Settings#

Size

#### Prefix/Suffix# 前缀，后缀 Typically, objects exported at a ‘2x’ scale will have the suffix of “@2x” as this meets the naming conventions required by Apple when designing for their operating systems.

If you’re designing for Android however, ‘2x’ is represented by the “xhdpi/” prefix.

#### Format#

Exportable Layers or Slices

### Layer List# If you click-and-drag any layer from the Layer List out of the application, Sketch will quickly export it as a PNG.

If you hold down the Option key, it’ll export as a PDF instead.

Sharing

Slices

Adding Slices

With the tool selected, click-and-drag anywhere in the Canvas to define the area.

Naming

Command-R with a layer selected.

Giving your slice an appropriate name is important as this will also be the filename when the slice is exported.

if you include a slash (/) in the layer name, it will place that slice in a new folder. For example, if you named your Slice foo/bar.png, it would first create a folder named foo and then create a image named bar.png in there.

Multiple Sizes

将图层直接从sketch拉出来，就可以导出，按住option，打出pdf

Trim Transparent Pixels

When Trim is selected, the height and width of the Export will change to fit your content.

Make exprotedable 里面的一个选项，减去多余的边。

Export Group Contents Only

当切片在一个group中，在右下角导出中会增加一个组导出的选项。点选后，导出的仍然是这个切片的内容。（这个功能只有在这个group下面有内容的时候，才会有区别。）在这个切片的窗口中，只有属于group的内容才能导出。

Background Color

File Formats

Bitmap：jpg, png, tiff, webp

Save for web: This will strip out additional file datathat is contained on some images, such as EXIF metadata, and color profiles.

Interlace PNG: When used on the web, an interlaced image will load at its intended size, as soon as possible, whilst successively downloading more data until it is at its full quality.

Progressive JPG: Similar to an interlaced PNG, when loading on the web, a JPG will progressively load atits full size from a low-quality, blurry image becoming sharper on each successive load.

Quality: Found on JPG, and WebP images, you can adjust the exported image’s quality to make the file size smaller, but this will impact the look of the image.

Vector

Svg, pdf, eps,

SVG: Stands for “Scalable Vector Graphic”, a format most commonly found on the web as the image is generated in code. Code which can also be copied straight from Sketch.

PDF: The most common type of vector format typically associated with documents. Applications now tend to use PDF images for assets and simple icons.，

EPS: Commonly used for print design with some additional features, but a filetype that has mostly been superseded by PDF.

Note: Some effects you can perform in Sketch are not supported by all vector file formats, including transparent gradients in PDFs, and inner and outer borders in SVGs.

Pdf 无法导出半透明的渐变，内外边无法用svg导出。

Exporting Artboards

in the case of sharing your designs File › Export Artboards to PDF…

Code Export

CSS Attributes， Control-click and choose Copy CSS Attributes，

SVG Code，

Printing

File › Print，

11-preferences

Presentation Mode， View › Hide Interface ， press Command-Period，

Sketch 官方文档阅读笔记汇总

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Sketch 官方文档 阅读笔记汇总