如何在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

相关推荐

  • 用户体验设计大赛开始啦

    关于举办福州大学第五届大学生用户体验设计大赛的通知用户体验是用户使用产品(服务)的过程中建立起来的心理感受。用户体验设计(User experience design,简称UXD)结合工业设计、心理学、界面设计、信息设计、人机交互、计算机科学、认知科学,以及人类学、社会学、传播学、建筑学、工程学等领域的知识,通过创新设计带给用户良好的交互反馈,提升产品(服务)的用户体验,是一个高度跨学科的领域。随着社会发展和经济增长,国家大力推动“互联...

    2018-04-04
  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 为了生存!QQ空间升级改变非主流印象,论用户体验的重要性

    关注留学签证移民的新资讯分享学习工作生活的新鲜事JT EDUCATION点击上方关注非主流、火星文、酷炫的QQ空间45度叫仰望天空、明媚的忧伤十年前,谁还不是个中二症患者?曾经的中二少年变成了大人大人不再点开的QQ空间也变样了面对微博微信这样的对手总要活下去这次QQ空间品牌升级重点在于对用户体验的设计哦?又是用户体验这个词真的是使用频率越来越高什么产品和服务都强调用户体验但具体说起来是什么意思呢?比如有人说现在发微博就像玩扫雷不知道发个...

    2018-03-06
  • 灯塔激光定位技术——多人大空间交互体验的最优选择

    ——映维网——国际影响力VR信息数据平台声明:本文系第三方稿件,非映维网官方稿件,望读者知悉。本文内容涉及任何法律问题均与映维网无关。禁止以“来源映维网(YiVian)”名义转载本文。空间定位是VR 市场中一个非常关键的技术,当今排名前列的VR硬件设备厂商(HTC/Vive和Oculus)分别采用了不同的空间定位方案Oculus 的 Constellation 系统红外摄像头定位HTC/Vive、大朋VR的 灯塔激光定位系统尽管这两种定...

    2018-01-30
  • 阅读类产品中的交互设计逻辑分析

    ↑  点击上方蓝字,加个关注吧~ ↑话题:阅读类产品的交互设计该怎么做?本文共1285字25图,预计阅读时间: 4分钟阅读体验阅读类的产品交互核心所有阅读类产品围绕的产品核心是:阅读体验好的阅读体验会让用户感到熟悉性,由于用户习惯长久的累积,对于阅读产品的使用逻辑,在用户脑海中已经有了一个基础的操作定位。在阅读体验中,不同习惯的交互动作设计所带来体验也不同,通过分析阅读产品中的交互方式,来解剖其交互中设计逻辑。阅读方式我们参考了三款阅读...

    2018-02-27
  • 交互设计中的人为本与用户需求究竟谈的是什么?

    以人为本和建立用户需求,是开展交互设计的首要任务。以人为本指的是:理解用户,理解人的感知和认知的本质,分析用户的思维模型。如何理解以人为本以人为本的两种理解:人本工具论之说和人本实质伦之说。人本工具论:这是从统治者角度出发的,出于实现自身利益的需要,把以人为本作为实现其利益的一种手段。这是伪以人为本、虚假的以人为本。人本实质伦:这是从人的立场出发,以人的自身角度研究问题的“人本观”作为出发点。在满足人的需求时,还应考虑对交互系统可持续发...

    微信热点 2018-02-26
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • 看世界之Google对话式交互设计规范

    目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

    2018-02-24
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15