Sketch基础教程034:图层样式

0 2021-06-03 15:15 内容校对:夭夭吃桃
收藏(0) 共有 83 人学习了本教程

本教程被收录到了 Sketch基础入门课程 , 开始你的系统性学习吧!

《Sketch基础教程034:图层样式》是一篇关于Sketch的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Sketch技巧;你可以通过此加强画布,文本等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-03发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Sketch技巧;请给他一个赞吧。

许多小伙伴刚接触Sketch,还不太了解Sketch,以下为大家整理了Sketch教程,带领大家详细了解Sketch。以下为Sketch基础教程034:图层样式的内容。

属性检查器会显示出选中图层的所有样式选项。

从共享样式开始,接着是全局不透明度、混合模式,再下面是填充、边框、阴影、模糊和镜像,会在手册中分章节一一介绍,但现在先讨论几个通用的小技巧。

文本输入框

Sketch 有一个很特别的输入框,鼠标悬停上去时你会看见上下两个小剪头出现在文本区域右边,你可单击它们来增减图形的大小。如果按住 shift ⇧ 键则会以 10 为增量变化。按住 option ⌥ 键,则会以 0.1 为增量变化。

Sketch基础教程034:图层样式

上下箭头

一旦你开始直接编辑输入框,上下剪头就会消失,但这个功能依然可用,你可以用键盘上的上下方向键配合 shift ⇧ 键或 option ⌥ 键来完成。

数学运算

文本输入框另一个很棒的功能就是可运算,进行加、减、乘、除操作,以加快设计工作流程。一些情况下还可输入百分比来调整形状,如下图所示。例如,选中一个图层,然后执行( 、-、*、/)和(%)操作。在半径调节框中,可以直接输入百分号。当然,你也可以分别指定每个圆角的值,使用“/”分隔即可(比如 40/0/40/0)。

如要调节某个存在于组中的元素,也可以对这个元素的宽高指定百分比数值。(例如,这个组的宽度是 960px,指定组内一元素的宽为 10%,则实际宽度为 96px)。

Sketch基础教程034:图层样式

模糊值

调整文本框大小更快的方式是直接拖拽文本框底部的手柄。如果你已经很确定理想的文本框大小,只是想看看在画布上的效果,这能帮你做最快的测试。

返回画布

大部分时间你将会在画布和检查器中来回操作,先在画布上选中一个对象,去检查器修改一些数值,然后再回到画布。然而正常情况下应用仍会以属性检查器上,所以如果你想按 R 键来快速新建一个矩形,结果会是你在检查器的输入框中输入了 R。

绝大多数时候这都不会是你想要的,所以先按 return 键来确认输入框中的任何编辑。然后再按一次 return 键,即可返回到画布中,并可以使用任何其它画布专用的快捷键了。

拖放

任一边框、填充或是阴影都可以被拖拽,只需在按钮和输入框的中间点击开始拖拽即可。你可通过这个方式来重新排列填充层,或是直接拖出检查器以删除某一填充。

移除无用样式

一个高效尝试不同样式的方法是添加多个边框和阴影,然后选择性的打开或关闭一部分。也许是这个原因,发现很多设计师的检查器里都有好几个无用的样式。

Sketch基础教程034:图层样式

为了让删除无用样式更方便,Sketch 增添了一个小垃圾桶图标,一旦属性检查器中出现无用的样式,这个垃圾桶就会显示出来,点击即可删除所有的无用样式。

复制粘贴样式

这并不是和属性检查器完全相关的内容,但你也可使用编辑菜单的选项,在不同图层之间复制粘贴样式。如果你不想图层始终保持链接,但又想共享其中一部分元素,这便是最好的选择。

对齐

属性检查器的最顶端是一些关于对齐的按钮。右边的 6 个按钮是让多个图层相对自身对齐,当只有一个图层的情况下则是与当前的画板对齐。

左边的对齐按钮则是让图层垂直或水平均匀分布,比如说水平分布,最左和最右的两个图层的 X 轴保持不变,其它图层则会均匀的分布在它们中间。更详细了解使用方式,可查看移动图层章节

Sketch基础教程034:图层样式

图层不透明度快捷键

同样不是严格属于属性检查器相关的功能,但却非常实用。在选中图层时,可按 1-9 的数字快捷键来快速将图层不透明度从 10% 调至 90%,按下 0 则会表示图层完全不透明。

0

赠人玫瑰,手有余香

本内容由zilin原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

本文标签

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

zilin

阿里巴巴UI设计师——你的想像,世界的模样。

共发布了870个文章 共获得48个赞

最新发布的教程

查看更多此作者的教程

文章中所使用的软件

您可能会帮助到他

查看更多
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员