当我门选择一个层的时候,我们可以在右侧检视口为我们创建的层创建样式。
一.填充
有5种状态的填充工具
1.纯色
2.线性渐变
3.径向渐变
4.角度渐变
5.纹样填充
#如何添加一个新的填充样式
若要添加新填充,请单击“填充”面板中的+图标。您可以创建任意多个填充添加到单个层,它们将堆叠在一起。对于创建的每个填充,您将有以下选项:
1.启用/禁用 fill前面的方框中的小勾
2.色彩模式。单击此按钮可选择其他颜色或更改填充类型。
3.混合模式。单击图标并选择混合模式。如果您选择了正常以外的任何选项,图标的颜色将变为蓝色。
4.填充选项。如果您使用纯色填充,您将在此处看到该颜色的十六进制值,以便于复制和粘贴。如果您使用的是graident或图像填充,您将在此处看到更改其类型的选项。
5.不透明。除了混合模式,还可以将填充的不透明度更改为组合并显示两种或更多填充类型。
Tip: 按f键可切换任何选定图层的所有填充的可见性。相当于改变透明度,或者等于图层的眼睛
#如何添加一个图案填充
单击填充选项上的颜色井,然后单击弹出窗口右侧的图像填充按钮。通过选择“选择图像…”选择您自己的图像,从弹出窗口底部的预设中选择一个,或单击数据图标从数据源中选择一个。
你可以在下方选择图片的填充模式,有四种可选项:
1.充满
2.适合
3.拉伸
4.平铺(可选择尺寸大小)
您还可以滑动图像预览上方的时钟图标以查看文档中常用的图像,或者从底部的全局预设中选择基本图案或噪波填充。
#如何更改重叠路径的填充设置#
对形状应用填充后,单击“填充”部分标题附近的“设置”图标。从这里你可以选择是否使用非零或奇偶规则来填充形状,这是用来确定如何填充路径重叠的形状的。非零的规则会填充整个形状,非奇规则将会保留重叠路径所创造的缝隙。
二.拾色器
点击颜色/填充,边界或阴影,以显示颜色选择器弹出窗口。
1.顶部的填充图标在实体、渐变和图像之间切换,并将颜色弹出框的设置更改为匹配。
2.颜色选择器使用HSB(色调、饱和度、亮度)颜色模型。从左向右拖动点可更改颜色的饱和度,向上或向下拖动点可更改颜色的亮度。
3.滑块控制颜色的色调(颜色)和alpha(不透明度)。
4.预览将显示颜色设置的最终结果。
5.滴管允许您从显示中选择任何颜色,在草图内部或外部。您可以通过选择一个层并按Ctrl+C快速访问它。
6.文本字段使您可以快速访问用于复制和粘贴的颜色十六进制值,以及使用RGB(红、绿、蓝)和alpha值手动设置特定颜色的选项。您可以单击RGB标签切换到HSB(色调、饱和度、亮度)或HSL(色调、饱和度、亮度)。
7.时钟图标为您提供文档中常用颜色的列表,以便您可以快速选择正在使用的颜色。
8.折叠箭头切换隐藏和显示颜色选择器,以便为颜色预设(如果正在使用它们)提供更多空间。
#如何查找和替换特定颜色
从菜单中选择“编辑>查找并替换颜色…”(或按⌘+⌥+F打开“查找并替换颜色”菜单)。从中,选择要在设计中找到的颜色以及要替换为的颜色。
启用“包含此颜色的所有不透明度”以查找具有不同字母但具有相同RGB或HEX值的所有颜色。
启用“保留原始不透明度”以在替换颜色时保持这些不同字母的完整性。
#预设
在颜色弹出框的底部,可以存储颜色、渐变或图像填充预设,以便在文档中或作为库的一部分进行快速访问和重用。
#如何增加预置
若要添加预设,请选择颜色、渐变色或图像填充,选择是否将其添加到全局(所有文档)或文档(仅限此文档)预设,然后单击+图标。
若要重命名预设,请确保在列表视图中查看预设,控制单击它并选择“重命名”。您还可以控制单击并选择在全局或文档位置之间移动或复制预置。
可以拖动预设以重新排序,或将其完全拖离颜色弹出框以删除它们(或控制单击它们并选择“删除”)。
最后,控制单击纯色预设时,可以选择将其十六进制、RGB、HSL、Objective-C或Swift代码颜色值复制到剪贴板。
#如何创建库预设
保存文档预设并使该文档成为库时,它将显示在“预设”菜单中的“全局”和“文档”项下,供添加该库的任何人使用。
您添加的库中已更新的任何预设都将显示一个小点,以指示它们何时更新。
三.渐变
若要将渐变填充应用于层,请单击检查器“填充”区域下的“颜色”按钮,然后选择弹出窗口顶部的“线性”、“径向”或“角度”渐变按钮。
#如何创建线性渐变
使用线性渐变,Sketch会向层中添加一条带两点的线。
若要更改渐变上的颜色,请单击任一点,然后使用检查器中的颜色弹出框选择颜色。若要向渐变添加其他颜色,请单击渐变线上的任意位置以添加新点。
拖动颜色点以更改渐变的外观。或者选择一个点并按backspace键将其删除。
#如何创建径向渐变
编辑径向渐变与编辑线性渐变类似,不同的是其中一个点现在设置效果的中间,而其相反的点设置效果结束的位置。通过拖动非颜色点,可以控制效果的大小。
#如何创建角度渐变
角梯度放置在一个圆上创建的任何颜色点(基于层的最大高度或宽度)。可以拖动点以调整其位置,或单击圆以添加新点。
#如何使用渐变条
除了图层上的渐变点之外,还可以使用颜色弹出框中的渐变栏来调整和控制渐变。它的工作方式完全相同。单击某个点以更改其颜色并将其拖动以移动,单击栏上的任意位置以添加新颜色,或选择某个点并按backspace键将其删除。
#如何使用快捷方式调整渐变点
可以使用以下快捷方式调整渐变:
四.边框
您可以添加任意多的边界到您的层,具有不同的厚度,颜色和混合模式。唯一不能有边框的层是文本层。
边框可以是纯色,也可以是线性、径向或角度渐变填充。
Tips:按B键可以快速显示或隐藏任何层上的边框。
#如何设置边框位置
对于闭合形状,可以在其轮廓的内侧、外侧或中心放置边框。对于开放路径,唯一的选择是中心。
#如何自定义边框
单击“边框”标题旁边的“设置”图标,显示大写、结束、箭头和虚线边框的选项:
1.对于线图层和开放路径,可以从三种类型的边界端点中进行选择:Butt cap(将边界向右绘制到矢量点)、Round cap(创建延伸到矢量点的路径的圆形、半圆形端点)或Projection cap(类似于round cap,但具有直边)。
2.对于具有三个或三个以上点(创建角点)的开放和闭合路径,可以从三种类型的连接中选择:斜接连接:(创建有角度的连接)、圆角连接:(为边界创建半径与边界厚度相关的圆角)或斜接连接(在边界角点上创建倒角边)。
3.对于线图层,可以使用下拉菜单为路径的起点和终点选择箭头。若要切换显示在哪个端点上,请选择“层>路径>反转顺序”。
4若要创建虚线,请在“虚线”字段中输入值以设置虚线的长度。设置虚线之间距离的“间隙”字段将自动匹配此值,除非将其设置为其他值。要重置间隙值并使其再次匹配,请删除该字段中的任何内容。
Tips:若要创建虚线,请将“结束类型”设置为“圆形大写”,然后将“短划线”值设置为0。调整间距将更改虚线边框的外观。
五.阴影
阴影和内部阴影具有相同的控件,但工作方式不同。阴影在层外渲染,而内部阴影在层内渲染。
可以将多个阴影应用于同一层,并控制其颜色、混合模式、X和Y位置、模糊半径和扩散。
注意:当缩小约400%时,画布上不会显示具有模糊值的阴影。这是为了确保使用大量阴影的文档能够快速渲染。这不会影响您导出。
六.模糊
若要向层添加模糊,请单击检查器中的“模糊”标题,然后从下拉菜单中选择模糊类型:
高斯模糊在所有方向应用模糊。可以使用其滑块设置模糊量。
运动模糊在一个方向上模糊表示运动。可以使用滑块设置模糊量和角度。
缩放模糊将从一个点向外模糊。你可以设置模糊量和它的起点。
背景模糊复制macOS和iOS中覆盖和窗格后面的模糊。图层下面的内容将模糊,您可以在检查器中设置该内容的饱和度和模糊量。如果这个图层上有任何填充样式,它们必须是透明的才能看到这种模糊。透明的颜色填充也是一种很好的着色方法。
注意:应用大量的模糊(或大的模糊)可能会导致草图速度减慢,因为它们需要大量的内存和处理能力来渲染他们。
七.文本样式
使用文本样式,可以存储一组样式,并在设计中的不同文本层中重用它们。对应用了文字样式的图层进行更改时,可以选择更新文字样式本身,以便具有该文字样式的所有文字图层也随之更改。
#如何创建文本样式
选择已应用样式的文本层,然后从菜单中选择“层>创建新文本样式”。也可以单击弹出菜单下的“创建”按钮,该菜单在检查器的“外观”面板中不读取文本样式。键入新文本样式的名称,然后按回车键保存。
#如何应用文本样式
选择一个图层,然后在“检查器”的“外观”面板下选择不读取文本样式的弹出菜单,然后在“组件”弹出菜单中,选择要应用的文本样式。您可以使用顶部的搜索栏来帮助您找到所需的样式。
#如何编辑文本样式
选择一个图层,确保应用了要编辑的文字样式,然后对其样式进行更改。完成此操作后,将在文本样式名称旁边显示星号(*)。从这里,您可以单击“外观”面板中的下列按钮之一:
1.更新:会将您的更改应用于此图层和使用相同样式的任何其他图层。
2.创建:将创建一个新的文本样式,并应用您的更改。
3.分离:将保留对该层所做的更改,但删除文本样式。
4.更多:将提供重置样式(如果已进行更改)或重命名样式的选项。
提示:您可以将文本样式包含在库的一部分中,以便与其他人共享。查看库样式以了解更多详细信息。
八.图层样式
图层样式的工作方式与文字样式完全相同。唯一的区别是它们与形状层一起工作,而文本样式与文本层一起工作。若要创建层样式,请选择已应用样式的形状层,然后从菜单中选择“层>创建新层样式”。编辑和应用图层样式的过程与文字样式完全相同。
Tips:可以将图层样式包含在库的一部分中,以便与其他人共享。查看库样式以了解更多详细信息。
#如何将文字或图层样式作为新图层插入
可以将文本和图层样式从“组件”面板直接拖到画布上。这将创建已应用样式的新文本或形状层。
也可以选择工具栏中的“插入”并选择要使用的文本样式。然后单击画布上的任意位置以插入新的文本或形状层。
九.组织样式
#如何创建样式组
若要在“组件”面板和“插入”菜单中将样式组合在一起,请使用以下格式命名它们:组名/样式名。例如,名为Background/Light和Background/Dark的两个符号将位于名为Background的组中。
#在“组件”面板中组织样式
可以在“组件”面板中组织文本和图层样式。双击样式或组以重命名它。您还可以拖拽样式到现有的组或创建一个新的组,只需拖动一个样式在另一个上面。
样式在“组件”面板中按字母顺序排列。
十.小贴士和窍门(非常有用)
#如何调整图层的透明度
除了拖动不透明度滑块或在其旁边的字段中键入百分比外,还可以通过选择层并按0-9(例如,3表示30%不透明度)快速设置层的不透明度。快速按两个数字将设置更精确的不透明度(例如,25%不透明度为2和5)。
#如何组织样式特性
单击样式属性控件之间的空间上的拖动,将其移动到其他属性的上方和下方。
选中或取消选中每个样式属性旁边的复选框以启用或禁用它。如果对禁用的样式属性进行调整,则将启用该属性。
若要完全删除样式属性,请单击并将其从Insetter中拖出,按住control键并单击它并选择“删除”,或者单击面板顶部的“回收站”图标(如果已禁用)。
#如何复制和粘贴样式
选择要从中复制样式的图层,然后选择“编辑>复制>复制样式”(或按⌘+⌥+C)。然后选择要将这些样式粘贴到的图层,然后选择“编辑>粘贴>粘贴样式”(或按⌘+⌥+V)。