sketch怎么使用？

1、实现创建界面流程图 *** 作如下

2、使用Sketch会隐藏掉artboard边界以外的部分的 *** 作如下

3、通过导出这个背景artboard来将全部界面放置在一个大的文件中--》而不是常规的那样分页导出。 *** 作如下

4、使用sketch时经常需要插入一些元素 *** 作如下
5、100%实际大小：CMD + 0完整画布预览：CMD + 1

6、

从今天开始，我将向大家介绍Sketch的一系列实用小技巧，这些小技巧能帮助大家更好的使用Sketch，提升工作效率。

这是该系列教程的第二篇——灵活运用描边属性。

本教程的第一篇：>在图层面板中，如果要同时选取两个图层。那么可以先点一个，再按住ctrl键点击另外一个。如果两个图层中间没有其他图层。可以先点上面一个图层。再按住shift键点击下面一个图层。选取多个图层也同样可以这样，只要点第一个，再按住shift键点击最后一个。那么都可以选取这两个中间的所有图层。（包括被点击的两个）。

使用编辑工具。
如果想要得到端点圆头的描边，需要使用居中描边样式才行。内描边/外描边的非封闭路径进行路径合并后，描边样式会变为居中，且不可修改；当你执行路径合并后，描边样式发生变化就是这个原因。当遇到有曲线的拼合路径时，需要把锚点转换为Straight才能加圆角。
Sketch Mac是一款为设计师量身定做的优美界面和强大工具兼有的专业绘图工具。能够满足网页、用户界面、图标等的设计需求。

这些天看到很多很棒的设计图，也想试着了解一点关于设计的东西。最终还是没敌过心里那个毛毛虫，尝试着做了一个 Twitter Logo 的阴影效果，这里总结下自己做的过程。

附件：
Twitter Logo 素材
完成后 Sketch 源件

用 Sketch 打开 twitterlogo_white ，选中 TwitterLogo 点击左上角 insert 创建一 Artboard （width-600px，height-400px），这样 TwitterLogo 会自动加入到新建的 Artboard 中。完成后锁定 TwitterLogo 层；

新建矩形放在 Artboard 中（与 Artboard 等宽高），为其填充色值 #73D7FD ，不使用 border ，矩形可更名 Background 。调整图层，将 Background 移至 Twitter Logo 下面，并水平垂直居中 Twitter Logo（右上角有居中快捷键）。完成后锁定 Background 层。

在 Twitter Logo 图层下新建椭圆（ oval ）图层，我们可以直接用圆形，色值设定 #000000 ，不使用 border 。调节圆形大小至圆形边界与 logo 的边界相触，如图。更图层名为 Shadow 。

添加 Motion Blur 并调节属性， Amount - 50px，Angle - 135º 。（图右下属性）

因为我们只需要下半部的阴影，所以我们要想办法拿到下半部分的阴影。
首先画出一组辅助线，然后以辅助线为参考创建一普通形状遮住阴影。

绘直线 快捷键 L ，按住 Shift 可绘倾角 45º 直线。如图相应位置绘制四条，也可直接 copy 后放到相应位置。将 4 条直线放到一个 Group 内，锁定 Group。

快捷键 V ，利用之前的辅助线确定位置，按 1-2-3--1 顺序作图，按住 Shift 可绘倾角 45º 线。之后可命名矢量图为 Mask 。（如上图）

将 Mask 放到 Shadow 下，右击选择 Use as Mask 后锁定。这样 Twitter Logo 和 Shadow 就只会显示 Mask 层上的部分。但会发现 Twitter Logo 有部分没显示出来。选中 Twitter Logo ，右击选择 Ignore Underlying Mask 就可以显示出来了。
接着隐藏辅助线（或删除），基本算是完成了，但我们会发觉阴影颜色还比较深，更改下 透明度（opacity） 为 30% 左右。

再一看我们的成果，好多了～

一个小小的练习算是暂时满足了自己的好奇心，这里只用到了部分 Sketch 的功能。当然设计本身更多关注的是设计部分， Sketch 只是一个把抽象转化成实例的工具。
自己后面多多利用闲散时间来练习，就先从临摹学习别人的作品开始吧～ ：）

最近一位小伙伴遇到个Sketch问题，作为UI设计师的你肯定也会遇到，而且牵扯到Sketch一个神奇功能。

这个问题来自于四月份推出的Sketch课程，自己也从中总结了很多经验。

自从 《Sketch加薪进阶-组件管理与团队协作》 课程上线以来，吸引了很多设计师伙伴的加入。课程可以从UI黑客公众号热门课程获得。

除了视频课程之外，学员每天在会员群中提出的设计问题也都及时地获得了比较好的答案，包括技术的、工作的、求职的。同时也给自己积累了不少典型案例。

问题描述

具体问题是这样的，下面是一个常见的日期选择控件，我们都会把它整体作为一个symbol组件，以便统一调用。

日期symbol内部的结构主要分为左边的文字和右边的图标。

为了让日期组件在不同的页面环境下适应不同的宽度需求，我们一般会使用Sketch的智能缩放功能来对内部元素进行整理：让文字左侧固定，图标右侧固定。

左侧文字定位设置

右侧图标定位设置

这样设置好后，不管我们怎么拉伸，永远是两边固定，实现d性组件的需求。

但是这位同学遇到了一个怪现象，拉伸后，图标没有固定在右侧，而是紧紧跟着文字。

这是什么原因呢？明明左右元素都已经固定好了，难道Sketch的智能缩放失效了吗？

其实什么问题都没有，而是我们无意间触发了Sketch的一个神奇功能，没有官方叫法，我把这个称作：文本右侧内容自动跟随。

Sketch的特殊机制

Sketch的这个特殊机制，简单描述就是：在symbol组件内部，文本的右侧元素始终和文字保持固定间距。

利用这个特点，我们能做出很多省时省力的效果。除了刚才的右侧固定跟随图标之外，还可以多个文字跟随，适用于导航标签的制作。

以上两个例子中，文字都是左对齐，如果是居中对齐，还可以做文字+图标整体居中的效果，具体 *** 作可以看这篇文章： 《你不知道的Sketch黑科技-图文浮动居中》

解决问题

我们回到刚开始的问题，为什么日期symbol中右侧图标没有固定？

原因就是右侧图标触发了Sketch 文本右侧内容自动跟随机制，而且这个机制的优先级是大于智能缩放的。

另外在上述机制中，只有文字和右侧内容间距≤20才可以触发，大于20就不起作用了。

如上图所示，文字和图标间距为18，这样便会触发机制自动跟随文字，而且优先级要大于已经设置好的智能缩放。

所以我们只需要把日期symbol中的文字和图标间距变大就可以解决问题，在页面中调用，需要多大的宽度再进行设置即可。

总结

利用这个机制，我们可以不借助第三方插件做很多d性化的组件，解决很多棘手问题，大大提升设计效率，真正为设计赋能。

所以说，设计师面对的任何问题都需要从实际工作中来，解决之后再成为推动项目向前迭代的动力。

PS

很多设计师把Sketch仅仅作为一个画图工具，完全没有发挥它的潜力。如果你在样式整理、组件化设计、团队协作等方面遇到瓶颈的话，就来加入 《Sketch加薪进阶-组件管理与团队协作》 课程吧，专属的会员群也会每天为你及时提供设计问题解答。

END

---