Sketch小试心得 - 简书
下载简书移动应用
写了68317字，被112人关注，获得了176个喜欢
Sketch小试心得
如果时光能倒流，我一定会在去年跟团先团一个，才33刀，现在要99刀了。可是时光不能倒流，是的，能倒流我也许会捡更重要的事情去做，比如买几支股票放着，到今日管它是99刀还是999刀。这些都是聊天打P的话，认真的小伙伴可以忽略，直接看下面的干货标题。
做移动端UI用啥工具好来？
首先，你得有台电脑加一部手机，这是硬件。
是台式还是本本，是PC还是MAC，这个看钱包君爱你有多少深吧。手机是智能的就可以喽。当然，如果下文里我偏重苹果手机，也请自行补脑。
其次，你得在电脑和手机上装上必要的软件。
据我所知大概有以下几种组合：1.Photoshop+Ps Play2.Illustrator+QQ or ScreenRunner3.Fireworks+FwPlay4.+Mirror
貌似还有其它，我觉得知道这么多就可以了。表打我，不是我不爱学习，是我懒。接下来问题来了，这四个组合，哪个比较好来？
1是我最初用的，当然我没说实话，真实的情况是Photoshop＋Illustrator＋Ps Play＋QQ。这主要是个人原因，我用PS就喜欢搭配AI，拷贝来拷贝去的，至于QQ嘛，这个主要是因为偶是7位数，习惯而已。
基本思路就是，用PS做界面，用AI做图标，QQ传送到手机，当有了Ps play以后，PS直接上手机屏。所以第二种组合，我就不解释了。
第三种组合，我没用过。Fireworks这家伙貌似已经不更新了，所以没啥前途。
接下来说说第4，是的。我现在就在用。我用它做了一个微信公众号的项目。一开始是，怎么用怎么不习惯，不是它不够好，是我PS用太久。但是一个项目结束，当我可以通过用Mirror在手机上划拉切屏的时候，我感觉，再不习惯我也要改过来，因为那种感觉实在太棒了，那速度，让我再也不愿意打开Ps Play.当然，Ps Play作为一款国产免费软件，我由衷的要赞美它。只是，它已经不更新了。貌似它有国外版，比如需要的话请自行查找。
再回来说，就功能来说，它是矢量的软件，跟Illustrator类似，但是大家更喜欢拿它跟Photoshop来比，偶也不是很明白。Illustrator可以吸样式，PS不可以，也不可以，但是它可以定义。你明白吗？它可以定义，你做好一个样式，可以赋予任何需要赋予的对象。当然，PS的样式也可以copy。重点是，当一个APP有几十个页面的时候，你需要更改一些共用的元素，比如，字的颜色，字体字号等等，就厉害了，你改一个，几十个页面都会自动更新。这点就好比，你做静态页面，通过css来控制样式，哇，随便改，所有的页面都会自动更新。太酷了。我曾经做过一个APP，几十页，每次改动输出的时候，我就想跳楼。一个一个打开，一个一个修改，再一个一个另存......当然，如果用PS，用智能矢量图层也可以起到这样的效果，不过，这要求你要有很好很好的工作习惯。用就相对容易多了，只需99刀，如果团购的话，200人组团只要33刀，。当然，你也可以用盗版。
最后的好处就是设计稿一键输出，你还不动心，我就死心了。设计稿输出，这点跟Illustrator有点相似，可以输出画板。估计都是矢量软件的缘故。这点尤其爽，几十个页面排的整整齐齐的，点一下就出来了。用PS，你还的手动排排排，一旦修改，还得再排排。当然，你会做Actions或则有很好很好的智能矢量图层的工作习惯，这也会很容易。但是，用只需轻轻一点，就没有然后了。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
优雅的Mac需要优雅的使用, 收集更多的Mac优雅使用指南
推荐文章和系列阅读:
1. Mac优雅使用指南——一个码字民工...
· 14520人关注
设计师的火花集；交互设计精髓，用户体验指南
· 7839人关注
· 834人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：对比才有看头！Sketch秒杀PS CC 2015新功能的7个地方
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
对比才有看头！Sketch秒杀PS CC 2015新功能的7个地方
编者按：相信同学们都想知道新版Photoshop的使用体验， 同学在上手感受了Photoshop CC 2015之后，发现这次比较抢眼的几个新功能都很捉急，单从UI设计方面说，Sketch压倒性完胜。特别认真的一篇评测文，强烈推荐 &&&
如果要问大家，这些日子哪件事在设计圈里最火，那你会想到什么？是各种让人炫目的动效设计，还是一个能说会道的“奇才”逆袭腾讯的故事？
不不不，都不是，他们比起这个来，简直是小巫见大巫。6月中旬，设计软件界的大拿Adobe发布了最新款的设计套件Creative Cloud 2015。这样的重磅炸弹无疑让每个还在辛苦P图的设计师犹如经历一场狂欢。所以这就是狂欢的原因？当然不是。Adobe的当家花旦Photoshop已然成为大家讨论的焦点。在加入了多画板支持，图层导出及设计空间等等的新功能后，使用Photoshop设计界面的设计师们终于看到了希望，一时间“Sketch去死吧”，“不支持Windows还搞个毛线”，“PS绞杀Sketch”这样的言论如洪水般遍布社交网络与各大设计网站的文章与评论区中。
那么对于作为一直在使用Sketch做界面设计的静电来说，Photoshop推出这样的新功能，到底对于我以及和我一样使用Sketch作为主要工具的设计师有什么影响呢？也许有，也许没有。但是本着眼见为实的原则，静电第一时间下载了Photoshop及其它Creative Cloud 2015套件中的软件，进行了粗略的试用，看看Photoshop到底为这些喜爱PS操作流的设计师来说，究竟带来了什么？
一、Sketch与Photoshop两种图层选择方式操作流的区别
在本文开始之前，静电先描述一下在设计软件中存在的两种操作流派。
第一类，是以Photoshop为代表的图层操作流。第二类，是以Fireworks，Illustrator，Sketch等软件为主的所选即所得的操作流。
大家知道，前者的操作过程中，图层操作在设计过程中所占比例极大，也就是说，当你需要选择一个图层的时候，需要首先转到图层面板，在图层列表中选择你要处理的图层，然后再对这个图形进行相关的操作。鼠标在画布元素上移动的时候，并不进行图层悬停提示框选的操作，当然Photoshop也为使用者加入了点击即可选择相应图层的操作，但是图层外框并不进行提示（即所谓的蓝色选取框的显示）。在第二类软件，也就是Fireworks，Illustrator及Sketch这样的软件中，鼠标悬停在某个元素上，此元素外围即出现蓝色选取框，再次点击即可选中此图层。如下图，左侧为Photoshop类操作流，右边为Sketch，Fireworks及Illustrator图层操作效果。
对于两种操作流的利弊，静电认为各有各的好，但从Fireworks时代转过来的我来说，这种所指即所得的图层选择模式，可能是我使用后者这些软件的最主要的原因之一。毕竟，在这个效率为王的时代，频繁操作图层对于设计师来说可能很大程度上是一种负担，特别是对于移动端界面设计师而言，这样的方式无疑效率更高，也更容易上手。
如果Photoshop想要在这方面赶上Sketch或者同类型的软件，它对于图层的操作和选择方式，也许应该成为一个首先要考虑的因素。对于后者的操作方式而已，在很大程度上，我们甚至不会过多的将注意点放在如何操作图层上边，这个可以最大限度的避免设计师在设计流程中的分心，从而更专注于设计本身。我们只需要在需要的时候点击图层进行操作，而不是每个步骤中都要点击选中图层，这节省了用户大量的选择和查找时间。对于此种模式，Mac中的Keynote软件同样可以参考，不同的是，Keynote在鼠标未选中时并不会出现提示框，但是在选择后会对选择图形进行标识。相关的操作流如今被越来越多的软件所采用，除了上文提到的使用此种选择交互方式的软件，我们也可以在诸如Axure，以及Xmind等等的工作软件中找到它的影子。下图为此种交互方式的动画展示效果。从所指即所得的逻辑来说，此种方式更符合用户的预期，也可以大幅提升设计效率（对于UI界面设计来说），是未来图层选择模式的更优方案。
二、画板（Artboard）诚可贵，逻辑在哪里？
为了尽快赶上Sketch的脚步，Photoshop CC 2015中新加入了画板（也叫做艺术板）设计模式。对于画板的溯源，可能追究起来，要算是Illustrator的原创。相比较Sketch的画板，Adobe的产品经理可是为了artboard操碎了心。这个功能的加入更被PS的粉丝们称之为逆袭Sketch之举，可是这个画板究竟怎么样呢？我们来对比一下Photoshop CC 2015和Sketch中的画板。
大家知道，一般的绘图软件，在新建文件时会提示我们输入画布的大小，分辨率及颜色模式等等参数。这也是Photoshop等Adobe系软件的常规操作，但加入画板后，Photoshop如何处理画板（Artboard），画布，图层分组这些层级的逻辑呢？首先我们在Photoshop CC 2015中新建一个文件，输入画布尺寸。静电在这里新建一个800-600的画布。
接着，静电费劲千辛万苦，终于找到了如何在这其中添加艺术板，首先它在标准模式下，是没有可以添加的入口的，我也找不到它的按钮所在，后来才发现他被藏到了选择指针的二级菜单中。
那么接下来，选择画板工具，看看会有什么情况发生吧。拖拽了一个画板后，画布消失了（如下图所示）。这个时候整个工作区变为灰色，我们刚才建立的画布就再也找不到，也回不去画布状态了。原来如此，Adobe硬生生的添加了一个画板模式进来，无比粗暴，同时右侧图层列表中新加了一个名为画板的类似于组的图层，此时的灰色区域，静电理解为工作区，这个区域是可以无限延展的，跟之前新建立的画布尺寸似乎没有任何关系。
静电研究了很久，感到非常的疑惑，艺术板和画布的关系到底是什么呢？难道我们不是在画布上增加的艺术板，而是Adobe把我们带进了一个无比奇妙的区域？这个区域可以理解为绘图板模式？在这个模式中，画布消失了，并且我们再也回不去画布了吗？这几个元素的逻辑，或者叫做包含关系，到底是什么样的呢？不知道，也许只有Adobe家的产品经理能说明白吧。
画布跟画板的关系，傻傻地说不明白？画板模式是来自外太空的神秘空间吗？
接着看看Sketch对画布的处理方式。在Sketch中，软件默认是没有画布这个概念的，工作区域是无限大的，这是艺术板模式的基础 。当然，最差的情况，我们可以在画布上摆放画板，但Sketch显然没有这么做，因为有了画板的存在，我们的工作区域就变成无限伸展状态了。
因此，Sketch中的逻辑更为简单直接容易理解，工作区&画板&文件夹&图层，或者工作区&文件夹&图层（未建立画板或者图层位于画板外的情况）。所以Sketch可以在画板外做你任何想做或者画你任何想画的图形，同样它会被显示在界面中。但是对于操作流不同的Photoshop，当我们要在画板外放置某些元素的时候，必须回到图层面板，操作图层从属关系将它拖动到画板之外，如果从属关系不改变，属于画板图层内的图层在画板外将不显示。Sketch则比较讨巧，如果将从属于画板中的元素拖动到图层外后，它们的图层从属关系也会发生变化。
对于Photoshop来说，我认为加入画板的功能固然值得大家兴奋一阵子，但是在加入这个功能时，请先将图层的逻辑关系搞清楚，然后再做处理会更好。否则这么简单粗暴的方式，只能让原本清晰的图层从属关系变的无比混乱。
三、画板（Artboard）向下兼容成为奢望
画板功能作为Photoshop创新的第一步，牵一发而动全身。在未搞清楚画板与图层从属关系的逻辑的情况下，匆忙作出改变，其后果必然是画板功能无法兼容老版本的Photoshop。当我们使用具备画板功能的Photoshop在画板模式下完成设计后，对不起，其他人的电脑必须也同样安装此版本的软件，否则画板兼容就会成为问题。
如下图所示，在Photoshop CC 2014中打开2015版本创建的具有画板的文件时，情况是这样的。看起来很好，是的，因为图层被合并了，要想不合并图层打开，抱歉，你的设计稿可能并不是那么的漂亮了，如果人品不好，你可能只会得到一张大白板画布。在此时，画板被作为图层文件夹存在其中，同时在最初我们新建立的画布尺寸好像不怎么起效了，Adobe你这么任性好么。
四、摆脱臃肿，你真的需要矫枉过正的“设计空间”吗？
对于越来越臃肿庞大的Photoshop而言，当CC 2015推出这个“设计空间”功能的时候，外界的反馈一致的好，终于变得轻盈了，终于从简了，终于瘦身了。可是，想要瘦身必须付出巨大的勇气。来看看这个新的设计空间，Adobe为我们提供了什么？首先你必须要保证自己的Mac OS X 为10.10及以上，Windows版本为8.1 64位及以上，才有机会目睹设计空间的芳容。那些还用着XP或者旧版本Mac系统的同学们，或者没有安装64位系统的朋友们可能无缘设计空间了。什么？不是说好的要瘦身吗?为什么系统要求却变得如此变态？好吧，鬼知道为什么。总之你可能是无法使用的就是了。好在我们看到那个括号里的“预览”二字，代表这还是一个beta版本。
我们打开被成为激动人心的设计空间功能吧，勾选上对勾。界面duang的一下就变的简洁了，左侧工具图标列表消失，并被右侧中部的仅有的五个图标代替，他们分别是箭头工具，矩形和圆形工具，路径工具及文字工具。右侧是属性检查器，下方是图层列表。Adobe将设计模式简化到了极致，但这真的是我们想要的吗？通过试用，静电发现这个设计空间实在是太过简陋，该有的功能一概没有，比如最常用的图层属性消失了，选取工具也消失了。但有一点值得鼓励的是，在这个模式下，本文开头提到的图层选取功能居然做了改变，这一点难道是Adobe也意识到了吗？希望如此。
对于设计模式来说，Photoshop的初衷是好的，静电推测Adobe也付出了很大的勇气来做改变。但是Photoshop到底是怎样一款软件，这样的模式附加在这个巨无霸上，总感觉有点不伦不类的感觉。毕竟船大难掉头，我们静观Adobe的改变吧。在这里静电提到一个词是“矫枉过正”，因为现在这个“设计空间”，不具备太多的可用性，仅仅是让我们预览一下效果而已。从另外一个层面上来说，我认为Adobe本身应该区分清楚软件的使用人群，对于不同的人群，推出不同功能的软件，而不是在一个软件的基础上兼顾所有人的需求，毕竟这个实在太难太难。静电在这里又一次回想起被Adobe收购的Macromedia公司，特别是Fireworks这款软件，也许是后妈不亲，也许是其他原因，Fireworks这款兼具移动设计功能同时又具备轻巧矢量功能的软件就这么停止更新了，CS6作为最后一版一直装在静电的电脑中。那么最终Photoshop又要走回fireworks最初所擅长的东西吗？不管设计空间也好，还是什么空间也好，我们基于Photoshop的期望已经足够的沉重，难道不应该为她卸下一个个包袱，让她轻装前进吗？也许，这只是静电的一个妄想吧。
下图为Sketch软件的界面，简单切容易上手，这才是真正意义上的“design space”。
五、切图与标注，问题或者不是问题
标注和切图一直是移动端设计最难解决的问题，面对种类繁多，分辨率各异的移动设备。Photoshop一直没有一个很好的解决方案，也许各种第三方插件已经为phptoshop使用者提供了不少的便利，但基于位图编辑的与操作的Photoshop仍然未能为移动设备素材的输出带来多少便利。
Photoshop CC 2015在新版本中增加了快捷的图层导出选项，多选图层则可以一次导出选择的图层，这在某种意义上不失为一种进步。但如果要适应更快速便捷的素材输出，Photoshop做的显然还不够。标注也是设计师面临的老大难问题，所以你需要的是Markman还是？
Sketch这款为移动端界面而生的软件，则对于此作出了最大限度的便利，我们可以一次导出多个所选择的图层，方式包括但不限于切片导出，拖拽图层导出或者直接选中图层进行导出，同时导出时可以方面的设置导出图形的缩放比例及后缀（如@2x，@3x等等），同时输出格式也更为多样，从常用的png，到pdf以及svg格式。而Photoshop仅仅为我们提供了位图及svg一种矢量格式。下图为Sketch的操作界面。
在标注方面，通过配合Sketch的Measure插件（开发者为国内的大神Utom，其插件开源免费，为Sketch上下载最多的插件之一）以及Zeplin，可以轻松完成标注，甚至你可以无需标注，前端工程师使用Zeplin即可轻松查看各个元素的属性，无需安装Sketch即可。下图为Zeplin操作动画。
六、使用Photoshop组件库下载素材？请您付费成为正版用户
看了激动人心的宣传片，想使用Adobe stock获取各种UI素材？不好意思你必须付费成为正版使用者。因为Photoshop提供的组件库是云端的。别光记得激动人心，喂，没付费你啥也没有。
相比于这个价格，精明的设计师同学请去算一笔账吧，是购买60美刀左右的Sketch划算呢，还是来一个每月79美刀的超豪华午餐合适？Sketch已经内置并会随版本更新最新的UI设计模型库。
七、Adobe Preview CC登场，但必须用美国区AppStore账号下载
千呼万唤，Adobe终于推出了自家的移动端预览软件-Adobe Preview CC，支持Wifi甚至USB链接，小伙伴们再也不用为手机预览总是断线发愁啦。当静电兴奋的点开链接，拿出手机准备下载的时候。你这时候一定会问为什么中国区没有？想当年Adobe含恨退出中国市场的时候，你应该可以预料到这一天。好了好了，快去折腾一下，准备好美国区AppStore账号吧。
其实预览软件Wifi连接不稳定的问题，Skala Preview已经率先解决，支持USB连接下的预览，更重要的是 Skala Preview完美支持Sketch，妈妈再也不用担心我预览掉线啦！
大块头虽有大智慧，灵巧专注更是未来方向
Photoshop发展到今天，经历过无数风风雨雨，已经成为设计师心目中不可亵渎的神圣象征。但不可否认，她正变得越来越臃肿和庞大，对系统配置的要求几近变态。作为从网页三剑客一路走来的设计师，静电更希望Photoshop及Adobe家的其它软件能更为专注和好用，Photoshop就是Photoshop，专注位图处理；Illustrator就是Illustrator，专注矢量绘图；Sketch也就是Sketch，将移动端界面 设计做到极致。在图像处理领域，PS是不可或缺的大块头，但在这个变化越来越快的时代，各种轻盈灵巧的软件俘获了越来越多设计师的芳心，也为他们带来了效率的巨大提升，让他们更专注于设计本身而不是软件操作技巧，不同的目的使用不同的软件，多个软件综合使用，最终创造出优秀的作品是设计师的最终目的。大而全固然值得崇拜，但小而美的Sketch，hype等越来越多的设计软件却让这个世界变得异彩纷呈。抛开自身的偏好，静电希望Photoshop和专注于移动界面设计的Sketch都能走的越来越好，我们无法抗拒资本运作对于软件设计团队的影响，但曾经的那些美好的点滴，至少会在我们心中存留，因为这个世界本来就不只有一种选择。
本文无意讨论Photoshop与Sketch软件优劣，仅仅指出各自问题与作者遇到的疑惑。“吊打Sketch”，“秒杀Sketch”等等言论更是可以休矣，多大仇多大恨才会说出如此狠话？最近Photoshop固然是主角，但狂欢过后，作为设计师的我们需要更理性的思考。
看了这篇文章，有人一定会说：“认真你就输了”。其实我想说，认真与专注才不会输，因为认真和专注成就了今天的Sketch以及Adobe，这些驻留到我们电脑硬盘和桌面上的美丽应用。
最后，你究竟是在为免费且毫无代价的使用而欢呼，还是发自内心的，为那些付出巨大努力而开发出来的，令人激动人心的功能喝彩？
静电的Sketch教程合集持续更新中：
静电的Xcode教程合集持续更新中：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量97万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
订阅更新：您可以通过
【推荐！设计师必备网址导航】
我们的团队
大家在关注人人网 - 抱歉
哦，抱歉，好像看不到了
现在你可以:
看看其它好友写了什么
北京千橡网景科技发展有限公司：
文网文[号··京公网安备号·甲测资字
文化部监督电子邮箱：wlwh@··
文明办网文明上网举报电话： 举报邮箱：&&&&&&&&&&&&前言：静电说：之前有用户提过类似的问题，他发现在photoshop中图片的色彩和sketch中图片的色彩不一致。下面看看静电翻译的一篇&bohem
静电说：之前有用户提过类似的问题，他发现在photoshop中图片的色彩和sketch中图片的色彩不一致。下面看看静电翻译的一篇 bohemiancoding团队发表的博文，详细阐述了这种现象产生的原因和解决办法。不要排斥这篇深度技术文章， 我们需要知道原理，才能工作的更好。总结下这篇文章的要点：
1. 大部分图片文件内存储有色彩配置文件文件
2. 每一个应用会使用自己独立的色彩配置文件或者由图片色彩配置文件来决定。
3. “Save for Web”功能会丢掉图片文件的色彩配置内容，让其体积稍小。
4. 如果一张图片没有色彩配置文件，那么这张图片的显示效果将由显示这张图的应用程序优先决定。
5. Sketch使用sRGB色彩配置
6. 另外，我们Photoshop等应用则可以在新建图片文件的时候选择不同的色彩配置文件。
7.每种色彩空间显示的颜色数目会有差异，因此导致图片颜色不一致。
在一个色彩空间里存在的颜色并不是你能想象到或者看到的所有颜色；在这个三角形之外的颜色是这个显示设备所无法显示出来的，即便是你的显示器在制造特性上标明它能显示更多的颜色。（译者注：显示的颜色数除了跟自己的显示器有关，还跟这个软件所使用的色彩空间有关系。）
由于每一种色彩空间在这个色彩区域内都用不同形状的三角表示，所以在不同的色彩空间，即使是你认为的同一种颜色，显示效果也可能有差别。
当当购买(推荐/免运费) & &&&&天猫购买（推荐/包邮）
第一手原创设计文章及内容，尽在静design
觉得本文有帮助
请赐个赞并在下方发表评论
本文来自网，转载请注明！关键词：
关注我们微信trackbacks-0
这期分享来自 Marko Vuleti? 写的配色板技巧文章，主要用 Sketch 来操作，但 Photoshop 上也是同样道理的，对于配色不熟悉的设计师们可以试试这个方法来创建调色板，简单快捷！
Photoshop 用户推荐尝试「」
首先我们先创建三个正方形，它们是可以被三整除。在我们的例子中，我们将先创建一个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 调色板插件
当你在做一个有许多文件的大型项目时候，手动的创建文档颜色会是一个繁杂多余的过程。
在这里&（调色板）插件就派上用场了，这样做你就可以把调色板保存成文件，然后导入到不同的文档中。用这种方式你就可以快速的给一个新建的文件添加品牌色。
要保存你的调色板 前往 Plugins （插件）》Sketch Palettes（Sketch 调色板）然后保存你的全局或者文档调色板。这个选项就是用来加载和清除调色板。
原文地址：
阅读(...) 评论()