如何在Sketch中快速创建调色板?

今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。


首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。


我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。


选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上选择的“Around Selection”(周围选定)。让我们来重命名画板为“Color Palette”(画板与调色板)。


现在我们要给这些矩形添加阴影,将它们划分成三个垂直相等的部分。在画板顶部的正方形上创建两个相同宽度的的矩形。高度应该是正方形的高度除以三-在我们案例中高度为80pt。


对齐矩形到画板的顶部并且改变填充色为白色。对齐另外一个矩形到画板的底部并且改变填充色为黑色。


现在改变透明度为20%-这样做我们就可以从我们的红色、绿色和蓝色中分别得到3组不同的形状。让我们来重命名这两个图层,稍后我们就知道它们是做什么的。


我们要再次划分这些正方形-这次是水平方向的。创建一个和正方形高度一样的矩形。这个宽度是正方形的基础宽度除以三。水平对齐矩形到红色正方形的中心,现在让我们来重复的这个矩形并右对齐到红色正方形。


现在到有趣的部分,用些充满活力的东西来更改这两个图层的填充色。我们会用黄色(#FFE200)修改中间一层的透明度为40%,右边的为80%.最后改变这两个图层的混合模式为叠加(overlay)。


重复上面的步骤,把2个矩形分别复制到绿色和蓝色的正文形里,这样他们就分成了9个相等的矩形,完成调色板!


如何在Sketch中用这些颜色

Sketch有一个隐藏的功能-我们可以在文件中检查使用频繁的色彩。当我们选择填充颜色的时候,就可以在检查器面板找到它。它位于透明度值的右上方。当你点击了那个颜色面板扩展,你就会看到常用的颜色。


在Sketch中置入颜色是很简单的。一旦选中一个颜色,你可以在检查器中找到两个面板—全局颜色、和文档颜色。全局颜色是哪些可以固定在所有文档中(所有文档都可以使用全局颜色)。而文档颜色只会出现在你当前处理的文件中(当前从文档中导入的颜色,只能在当前的文件中使用)。


要保存颜色只要点击插件,在全局颜色或文档颜色面板中任选一个。用这个方式你就可以将当前选中的颜色置入到面板中。想要把颜色从面板中删除,只需要拖动颜色到面板外面即可。


小技巧:想要快速的选中颜色,只需要在键盘上按“Control+C”,然后去点击你想要的色彩。这是吸取色值(拾色器)的快捷方式。


Sketch 调色板插件

当你在做一个有许多文件的大型项目时候,手动的创建文档颜色会是一个繁杂多余的过程。


在这里 Sketch Palettes(调色板)插件就派上用场了,这样做你就可以把调色板保存成文件,然后导入到不同的文档中。用这种方式你就可以快速的给一个新建的文件添加品牌色。


要保存你的调色板 前往 Plugins (插件)》Sketch Palettes(Sketch 调色板)然后保存你的全局或者文档调色板。这个选项就是用来加载和清除调色板。

本文来自:Medium

原作者:Marko Vuletič

译者:设计师@OneZero

金主时间

如何在Sketch中快速创建调色板?

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36502/

(0)
交互精选交互精选
上一篇 2018-04-16
下一篇 2018-04-17

相关推荐

  • 小编来告诉你交互设计是什么啦!

    什么是交互设计用户界面有两部分的设计:交互设计和视觉设计。交互设计的产出物是可交互的低保真原型,设计内容包括:信息架构、页面布局、流程跳转。1. 信息架构信息架构,是为了让用户在使用APP、软件、网页的时候,能够快速找到自己需要的信息、资料、功能,并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息(功能)的重要程度和关系。信息架构的组成部分:组织系统:关注如何组织信息。比如小说,按篇幅,可以分为短篇、中篇、长篇;按年代,可以分...

    2018-04-12
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • B2B、SaaS 等企业软件中的交互设计总结

    ♝点击上方“交互设计学堂”关注我们,送电子书我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件。在现代企业中,大...

    2018-04-20
  • 4月最新便民信息!政府、企业、医院、社工...你想要的岗位都在这里!

    各类招聘求职生活信息关注后回复发布查看更多4月啦,又是新的开始没有工作的同学快快看有哪些好工作吧...   ...招聘信息类首先,是我们玩转郫县的招聘啦邀请你一起来和我们玩营销经理▲薪资待遇:社保+底薪+全勤+提成+奖金(4000-10000元)▲职责要求:1.开拓郫都地区美食、休闲、旅游市场2.建立并维护平台与合作商家良好关系3.能熟练运用word、Excel办公软件▲任职资格:1.工作主动、责任心强、具有良好的团队合作精神、抗压能力...

    2018-04-08
  • 4K已至,保障用户体验是成功的关键

    4K技术介绍1.1什么是4K分辨率图像的大小一般用像素分辨率来表示,例如1920*1080的分辨率就意味着图像是由水平方向每行1920个像素以及垂直方向每列1080个像素组成的。出于方便交流的原因,业界也常常以图像水平方向上的像素值来表示图片大小,而且为了简化交流过程,一般情况下会用“K”来描述像素值,其中1K相当于1024个像素,几K就是指图像的水平方向每行像素值达到或者接近1024的几倍。以此为标准,4K图像就是指水平方向每行像素值...

    2018-04-04
  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08
  • 刺猬公社招聘汇 | 通往offer之路

    ■更多招聘信息,以及1对1职业咨询,尽在offer之路。扫描上图二维码,即刻加入!本期招聘概览北京:商业新媒体  中国国家地理  北大出版社  音悦台  华谊兄弟    光合映画腾讯研究院猫眼电影  一点资讯  人民日报  摄影之友  经济观察报智云图  鱼眼视频上海:GQ杂志爱奇艺(绿色为正职,黑色为实习,红色可转正)全职信息1  商业新媒体 | 新媒体采编来源:@商业新媒体岗位职责1.关注并监测娱乐内容营销行业内的最新动态,策划行业...

    2018-04-08
  • 【招商零售】海底捞VS胖东来:用户体验背后的成功基因

    点击上方“聪聪说零售”可订阅哦!招商证券零售组:许荣聪、邹恒超近期的“老鼠门”事件再将海底捞推向风口浪尖,食品安全问题再次引发关注,但与一般公关危机不同的是,本次事件发生后没有出现一边倒的对海底捞的口诛笔伐,反而海底捞及时坦率的回应得到不少消费者的理解和支持。海底捞能坦然面对此次

    微信热点 2018-05-02
  • 【优秀作业展示】交互设计基础(二)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第二期申婉彤产品设计15101高铁购票界面设计地点选择日期选择车次车座选择身份认证界面支付界面支付宝支付银行卡支付01Te...

    2018-04-22
  • Axure RP 8.0 安装教程

    Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。•可以在公众号后台回复『042』或『Axure RP』获取下载链接。安装步骤:❶下载并解压安装包。❷双击安装程序。❸同意,并下一步。❹选择安装路径,下一步。❺下一步。❻取消勾选,点击Finish结...

    2018-03-20