sketch新手入门(中文版)-8样式

当我门选择一个层的时候,我们可以在右侧检视口为我们创建的层创建样式。

一.填充

有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)。

按个位数可将此图层的不透明度降低到90、80和70%,然后按7和5可将其快速更改为75%。

#如何组织样式特性

单击样式属性控件之间的空间上的拖动,将其移动到其他属性的上方和下方。

选中或取消选中每个样式属性旁边的复选框以启用或禁用它。如果对禁用的样式属性进行调整,则将启用该属性。

若要完全删除样式属性,请单击并将其从Insetter中拖出,按住control键并单击它并选择“删除”,或者单击面板顶部的“回收站”图标(如果已禁用)。

样式特性

#如何复制和粘贴样式

选择要从中复制样式的图层,然后选择“编辑>复制>复制样式”(或按⌘+⌥+C)。然后选择要将这些样式粘贴到的图层,然后选择“编辑>粘贴>粘贴样式”(或按⌘+⌥+V)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容