Sketch(四)

一、自定义数据填充

sketch 素材库提供内部数据库的内容，如花纹、头像等图片素材，以及人物名称、世界各地名称等素材，方便我们在页面设计时进行模拟数据的填充，但是有时系统所提供的数据不是我们所需要的，我们想要使用自定义的数据(文字，图片等)，我们该如何操作？

自定义文本内容的填充

1. 创建新的数据源,使用Mac自带的文本编辑功能，设置文本为纯文本格式。
   
   
   
2. 在文本内添加内容，并把每个文本值放在不同的行上。
   
   
   
3. 文本写入完成后，确保将数据源保存在不会改变的地方。如果在添加数据源后移动它们的位置，Sketch将无法找到它们。
4. 保存之后进入sketch的首选项，在顶部找到sketch，点击之后里面就有首选项。
   
   
   
5. 点击素材，选择左下角的添加素材，将之前所保存的人物名称文本选中并添加至素材库
   
   
   

自定义图像内容的填充

对于新图像数据源，我们要做的就是创建一个文件夹，其中包含要在其中使用的所有不同图像，然后通过“首选项”中的“数据”选项卡将其添加。

自定义数据的使用

选择要添加数据的形状或文本图层，选择素材，然后选择要插入的数据类型。在这里就能看到我们刚才自己定义的数据了。



点击刷新素材可以更换图片哦！

二、导出

通常我们设计完之后就要以不同的大小或格式导出文档中的图层。最简单的方法就是直接导出。从顶部导航栏中找到 文件->导出 即可。

Sketch默认将所有内容导出为实际大小（1x）的PNG,要更改这些设置，或以两种或更多种不同的尺寸或格式导出，您需要在检查器中设置’导出预设’。

如何创建和使用导出预设

我们可以选择需要导出的图层，然后单击右侧检查器底部的"制作导出项"。将在此处看到默认的导出预设，以及一些可供选择的选项：

• 前缀 / 后缀： 如果要以不同的比例导出，则需要使用下拉菜单选择前缀或后缀。您可以通过在表示文件名的省略号（…）之前（前缀）或之后（后缀）输入文本字段来自定义此名称。
• 预设集 ： 单击“预设”按钮以选择一组预定义的预设，您还可以创建新的预设集并将其从此处删除。
• 创建切片 : 单击切片图标可在已设置导出预设的所选图层上直接创建切片。
• 已选中导出项 ：以使用上面的预设的内容导出该特定层。
• 分享 ： 另一个快速导出选项是单击“共享”按钮以获取通过邮件，邮件，AirDrop等进行共享的标准选项。

如何导出CSS代码

在文档中选择一个或多个图层，单击鼠标右键，然后选择“ 复制CSS属性”，将它们具有的任何样式信息作为CSS代码复制到剪贴板。例如：下面这个正方形，给他设置了背景色和圆角，因此复制它的css代码结果如下：

background: #EAA9A9;
border-radius: 20px;

三、制作立体图形

效果图：

一、 创建画板+镂空球体

1. 使用快捷键A，创建画板700*500，颜色值为：#1F1E1E
2. 使用快捷键O，绘制一个直径为300的圆形，Fills为径向渐变填充，色值为（#DED4F2-#8778A0-#4B3D61），如下图：
   
   
   
3. 使用快捷键O首先绘制一个椭圆形，旋转角度55，再复制两个右边、下面各一个。调整好位置，按住shift同时选中这四个图形，进行布尔运算，选择"减去顶层"，得到一个镂空圆形如下图：
   
   
   

二、创建小球体

1. 我门再绘制一个直径为200的圆形，颜色填充为径向渐变，色值为（#EFE8E9-#F1B3B2-#E67671）
   
   
   
2. 将粉色圆形图层置于大圆之下，如下图：
   
   
   
3. 大致形出来了，接着我们开始塑造球的体积感，即球体的厚度表现。首先画两个圆，重叠放置，利用布尔运算“减去顶层”，可以得到所需形状。
   
   
   
4. 将剪贴出来的形状放到我们的图形中，并且加上渐变色。
   
   
   
5. 再复制出来两个把其他两个位置摆放好。

三、细节塑造

1. 使用快捷键O首先绘制一个圆形，设置径向渐变色值都为#FFFFFF，透明度由25%-0%，去除边框放置在图层的最上层
   
   
   
2. 制作阴影效果。绘制出一个椭圆形，调整大小、形状，将它放置在整个图层的最下层。设置径向渐变色值都为#FFFFFF，透明度由20%-0%
   
   
   
3. 添加文字效果，就完成了