Sketch 官方文档 阅读笔记汇总
1.sketch 前面部分
layer basics
[Moving an Obscured Layer][moving-an-obscured-layer]
Resizing Layers
scaling
editing shapes
mask
[Mask with Shape][mask-with-shape]
[Alpha Masks][alpha-masks]
Vector Editing
text> Convert to Outlines
3.Images
data
[Adding New Data][adding-new-data]
4.
Grouping Layers
Editing Groups
Click-Through
Artboards
Resizing Artboards
[Resize to Fit][resize-to-fit]
[Deleting Artboards][deleting-artboards]
pages
switching pages
5
Fills
Adding Fills
Image Fill
Fill Settings
Borders
Border Position
Border Colors
Arrowheads
Dashed Lines
Shadows
Spread
Blurs
Performance
Colors
Eyedropper
Find and Replace Color
[Color Management][color-management]
Gradients
Linear Gradients
Radial Gradients
Angular Gradients
Gradient Bar
Shortcuts
Preset Types
[Managing Presets][managing-presets]
Layer Styles
Creating a Style
6 symbols
7-libraries
Adding Libraries
Libraries and Teams
Library Symbols
Editing Library Symbols
Detaching Symbols from Libraries
Organizing Imported Symbols
Library Styles
Editing Library Styles
Unlinking Styles from Libraries
Library Updates
[Accepting Changes][accepting-changes]
Shared Libraries
Shared Libraries on Sketch Cloud
Apple UI Design Resource
8-prototyping
Links
Hotspots
Fixed Elements
Start Points
Previewing
Canvas
9-sketch cloud
10-exporting
Make Exportable
[Export Settings][export-settings]
Size
[Prefix/Suffix][prefixsuffix]
[Format][format]
Exportable Layers or Slices
[Layer List][layer-list]
Sharing
Slices
Adding Slices
Naming
Multiple Sizes
Trim Transparent Pixels
Export Group Contents Only
Background Color
File Formats
Bitmap：jpg, png, tiff, webp
Vector
Exporting Artboards
Code Export
Printing
11-preferences
1.sketch 前面部分
Moving sketch to a new Mac: Sketch › Unregister Sketch，
图形长宽缩放技巧， 鼠标放在输入框内上下添加数字的按钮上来回移动，按住shift/option以10或者0.1加减。
math， 使用数学加减乘除以及百分比来调整数字。
对圆角的批量调整，双击。然后单独点击各个圆角进行调整，
Fill 填充里的设置。 非零性，填充整个形状，non-zero, 奇偶性：保留重叠的路径孔。even-odd，
2. layer basics
元素在layer之间移动，不能拖拉，只能复制粘贴。或者在左边工具栏的范围内拖拉，不能从绘图区域拖拉。
Option :duplicate ，
locking the layer
holding down the Option key and hovering the Layer List, a padlock icon will appear instead of the hide icon.
在工具栏toolbar的空白处右键，可以编辑工具，
when you’re inserting a Rectangle, you can hold down the Shift key to make your new shape square:
you can hold the Option key to draw the new shape from its center (instead of the top-left)
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 ，
4.
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，
5
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，