搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > UI头条 > 奇葩的Sketch教程

奇葩的Sketch教程

UI头条 2018-06-30


经验分类: 教程 / 原创文章

原创会员:JaminWoo


有奇葩的Sketch问题?

首先说明,楼主是个奇葩,所以请温柔呵护,奇葩很脆弱。

奇葩是丛生植物,因此身边总是围绕着一群奇葩的,我们这群奇葩很多都是Sketch从1.0版本就开始用的,到现在,积累下很多遇到过的奇葩Sketch问题,这些问题,尤其是新手,肯定遇到过——而且你看遍各种教程也还是不懂。在多次被问之后,我决定从床上跃起来写这个教程贴。

本帖不定期更新各种奇葩问题解决方法。(登录UI中国关注作者后续更新


Question1:

什么是shared style?我该如何应用?

Answer:

你看,我们先画个矩形,旁边会有个No Shared Style属性

咱们随便给它来个红配绿赛狗屁的配色

奇葩的Sketch教程

Ok, 此时点击旁边的No Shared Style

奇葩的Sketch教程

选择Create New Shared Style, 输入“红配绿赛狗屁”作为Style命名,并按回车保存,一个Shared Style就诞生了!

奇葩的Sketch教程奇葩的Sketch教程

然后我们来看看这个Shared Style 可以用来干嘛,再新建个矩形,然后点击No Shared Style对话框,选择红配绿赛狗屁。

奇葩的Sketch教程

可以惊奇的看到新建的矩形的外观自动变成和之前的矩形一样了!

奇葩的Sketch教程

另外,仔细观察图层,你会发现具有Shared Style属性的图层是紫色的

奇葩的Sketch教程

而Rectangle 2在不具备Shared Style的时候则是灰色的

奇葩的Sketch教程

现在你知道Shared Style可以干嘛啦!中文名其实是共享样式,有点像word里的格式刷。但Shared Style精妙的是,如果你对任何一个具有Shared Style的图层进行修改,那么其他具有相同shared style的图层都会随之变动,换句话说,你改动的是他们共享的那个图层样式。

在Sketch中,字体的Shared Style叫Text Style,字体图层只能使用Text Style。

Shared Style学完后,你可以探索一下Sketch中的Symbol如何创建和使用,和Style有异曲同工之妙。


Question2:

我会画一个正圆,半圆,四分之一圆...但是一个标准的三等分,也就是120度角的扇形怎么画?

Answer:

这也算是比较经典的问题了。。。其实很简单的布尔运算就可以解决了(老天,这里又有人问我布尔运算是什么,简单说,就是那些打孔、交并矢量图层的动作)

我们先画个正圆,然后画个正Polygon(多边形。。。),然后。。。看图吧

奇葩的Sketch教程

正六边形内角是120度,刚好和三等分扇形一样,那么我们把两个形状取交集Intersect一下,就得到了我们要的三等分扇形。然后。。。然后就有了三等分环形。(怎么做不用我讲了吧)另外,其他奇奇怪怪角度的扇形都同理可得。

当然我还有其他变态奇葩的绘制方法。。。大家可以自行研究。。。


Question3:

哥哥,人家想画个这个,怎么画嘛

奇葩的Sketch教程

Answer:

为了画出完美的标准的可自动随着放大缩小改变粗细的圆头镂空圆(名字好长说完快断气),许多人付出了很多努力却到头来效果不理想。

其实TMD真的很简单哇!

先画个圆,不要fill。描边必须设为Center!!!颜色粗细我先随便定个。

按回车进入Edit编辑锚点。随便添加两个锚点,退出编辑锚点。

奇葩的Sketch教程

点击Scissors剪刀工具,没有的话右击上方toolbar,选择customize toolbar,找到剪刀工具自己拖出来。

奇葩的Sketch教程

移到圆上把那段我们刚刚添加的描点之间的弧线删除

奇葩的Sketch教程

然后在border选项的小齿轮里,把Ends和Joins都设置成中间那个。圆头就出来了!!!

奇葩的Sketch教程

故事当然还没结束,我们采用描边,所以,在放大缩小时,粗细永远不会改变。如果想要应用于icon中适配不同分辨率的时候就麻烦了,我们该怎么做?

在toolbar中有个按钮叫Vectorize Stroke

奇葩的Sketch教程

我们对这个环使用这个命令,然后进入编辑锚点,发现。。。已经成为路径型矢量了!

从此妈妈再也不怕我放大缩小描边不变了!!!大功告成。

累死了,先不更了。。。你们把你们的奇葩问题甩在评论里吧,奇葩需要光合作用一下。


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《奇葩的Sketch教程》的版权归原作者「UI头条」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注UI头条微信公众号

UI头条微信公众号:uicner

UI头条

手机扫描上方二维码即可关注UI头条微信公众号

UI头条最新文章

精品公众号随机推荐