如何用sketch 3js 绘制复杂表格图形

来源：蜘蛛抓取(WebSpider) 时间：2016-03-15 05:52 标签： css3绘制各种图形效果
看类型：看行业： 看公司：
larens& 22:01UI设计交流新群：（每天一款UI设计源文件分享）电商设计群：8083755使用Sketch 3设计水滴图标最终效果&Sketch是一种非常灵活的设计工具，你可以使用它来设计制作网页和应用程序的界面。在本教程中，我将向你介绍Sketch中的画板，层，投影，内阴影，文字，边框和填充功能，并告诉你如何使用它们来创建一个简单醒目的图标。&如果这是您第一次打开Sketch 3，要记住关于Sketch界面中的四个要点：顶部，设计工具组（如矩形，三角形等）左侧，图层面板中间，设计的主控制区，是一个无限的画布右侧，选定工具的设置选项1. 添加画板画板是组织你的设计自由分割的简单方法。Sketch 3为您提供了一个默认画板，当您按A键（或Insert & Artboard）。你可以看到，你的Sketch界面的右侧有苹果主要设备的各种屏幕尺寸：选择iPad screens &Landscape。现在，您可以看到它出现在左侧的图层面板。如果你的窗口比较小，别忘了缩小画布，按【Command】+【-】缩小画布比例就可以看到整个画板。&通过双击它图层面板的名称，可以为这个画板重命名。给它命名为【Water Icon】。你可以看到界面上是这样的效果：2.创建背景目前我们有一个1024px＊768px的iPad画板。让我们首先添加背景。按R键（或Insert & Shape &Rectangle），在画板上按住并拖动鼠标/手指做出一个矩形。现在，您可以看到它在图层面板中。重命名【Background】。接下来，我们去右边面板，将我们的【Background】的属性调整为：&Position&x 0& y 0Size&&&&（译者注：最新的Retina尺寸为）让我们添加一些样式。找到边框并取消它。现在，点击默认灰色的填充属性更改为渐变。下拉菜单中显示有五个选项：纯颜色，线性渐变，径向渐变，角度渐变，图案填充和添加杂色。从左到右依次是【纯颜色】，【线性渐变】，【径向渐变】，【角度渐变】，【图案填充】和【添加杂色】点击【线性渐变】。现在可以看到一个滑动器，白色在渐变滑动轴的前面，黑色在渐变滑动轴的末端。要改变它们的颜色，你只需要点击他们上面的滑块：让我们来设置颜色。Sketch可以点击RGB或HSB标签上的字母，在RGBA和HSBA的模式之间切换。我比较熟悉HSBA，本课程都将使用这种模式，我选择的颜色前面为H190，S50，B100，A100，末端为H210，S50，B100，A100。3. 创建图标我们现在将创建包含水滴的图标。首先添加一个新的矩形。按R键，然后单击并拖动。然后重命名你的新层【icon】。通过右侧面板的顶部的【垂直居中对齐】工具使它居中，并设置宽高都是515：使用上面的位置工具来设置层相对于画板的位置设置倒角半径为144，取消边框的颜色，然后选择白色填充图标背景。投影现在我们将添加一些投影。投影的功能有五个选项：颜色，X位置，Y位置，模糊，和扩展。投影设置为：Color: H210, S70, B80, A100X: 0Y: 24Blur: 55Spread: 0用于【icon】的最后一个步骤是在底部添加内侧阴影。内阴影遵循投影功能完全相同的设置方法，但它仅扩散到您的形状的内侧。我们可以通过设置调整内阴影：&Color: H190, S30, B100, A100X: 0Y: -13Blur: 21Spread: 0最后你应该得到这样的效果：4.创建水滴这将是您学习如何创建水滴图标最后的步骤。首先我们需要一个椭圆形的，所以按O（或Insert & Shape &Oval），并定义其尺寸为宽度：200，高度：200。接下来，将Insert & Shape &Triangle（这个没有快捷键）创建一个三角形。到右侧面板中，勾选Equilateral设置为等边，并设置宽高都为200。这个选项是变为等边三角形的关键。现在快到了关键的步骤，定位你的图层是这样的：选择这两个图层，在Sketch界面的顶部点击【Union】按钮。现在，我们有了水滴形状，但是顶部太尖锐了，为了让它看起来更柔和友好，我们给它加入上面的倒角。要做到这一点，选择形状，然后在顶部工具栏中单击【Edit】工具。恰好选择的第一个点就是我们要编辑的。到右侧面板改变倒角为34。恭喜！水滴形状现已完成！现在你可以使它通过点击在顶部的菜单栏图标（向右旋转）。选择在图层面板中的层并重新命名【Droplet】。到右侧面板，设置宽度为266，高度为377，然后在右侧面板顶部的工具选择居中：现在的最后一步：样式！首先取消边框，然后填充颜色，选择【径向渐变】。前面H190，S70，B100，A100，和末端H210，S70，B100，A100。然后，我们将增加一个内阴影：H190, S100, B100, A100X: 0Y: -34Blur: 55Spread: 0恭喜！它完成了！感谢您阅读本教程。我希望它帮助你学会使用Sketch中一些基本的工具。ifec译者：larens&原文地址：
热门文章人气：1675
人气：1355
人气：1934
人气：1647photoshop教程子分类如何用sketch 3 绘制复杂图形_百度知道
如何用sketch 3 绘制复杂图形
我有更好的答案
绘制一个合适大小的圆。
绘制一个矩形，置于圆上。调整两者相对位置关系，直到适合绘制最终结果的程度。
使用路径相减功能，利用矩形对圆进行切削。该功能在 菜单栏→ Edit → Combine → Substract
中。因为各个路径组合命令相当常用，建议添加 Combine 工具图标到工具栏中，或是记熟快捷键。
使用剪刀功能（菜单栏→ Edit → Paths → Scissors），将弓形的弦切去。
这是上述操作得到的结果。
复制一份，垂直翻转，移动位置直到两者节点相接。
然后连接路径（菜单栏→ Paths → Join，快捷键为 Command + J），得到如图结果。
调整描边粗细至所需的值，并且将路径端点形式设置为圆弧。位置在界面右侧的参数调节区域中。
最后，将描边矢量化为形状。命令的位置在 菜单栏→ Edit → Paths → Vector...
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁

我要回帖

更多关于 css3绘制各种图形效果 的文章

 

随机推荐