![进阶版零基础学UI](https://wfqqreader-1252317822.image.myqcloud.com/cover/640/25569640/b_25569640.jpg)
3.3 创建调色板小技巧
调色板帮助我们在设计项目中建立色彩规范、提高工作效率,通过前面章节对色彩基础知识和快速进行UI配色的学习,本篇接着为大家介绍几种简单易用的创建调色板小技巧。这些小技巧都是笔者或其他设计师在日常工作中积累的经验总结,非常好用,在本书后面的“Material design配色和布局”和“配色网站”章节也有对创建调色板的讲解,请循序渐进学习。
收集色彩
在Dribbble上,每一幅作品右侧都带有一份配色文件,将其下载保存到色板,为自己在创作时提供灵感。具体的步骤是:下载色彩文件,进入“编辑-预设-预设管理器”,在预设下拉菜单选择色板,载入下载的色彩文件。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0085_0001.jpg?sign=1738905352-ubTv6lGYFD61lhatMFJ46j43QnxKFL7a-0-477380e6b2b2c018db21f696e8f38ef3)
例如,需要设计一款美图拍照应用,产品定位于年轻女性,那么我们便可以在这里找到一组配色:三个同色系的粉色展现甜蜜、可爱、温馨,三角对立的黄色又让配色多了一分俏皮。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0085_0002.jpg?sign=1738905352-rSOCGRDTdL8pc3V9PxlST4aXv2OFtica-0-b9037a0b07ec553001210d30bc80a145)
马赛克法
这种方法非常简单,不需要任何插件,借助Photoshop滤镜将图片马赛克化就可得到一组配色。例如,我们需要一系列同色系的蓝色,我们在网上找一张天空的图片,可以选择花瓣网或500px等专业图片网站,接着将图片在Photoshop中打开,进入“滤镜-像素化-马赛克”,调节单元格大小即可,如下图所示。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0086_0001.jpg?sign=1738905352-D5hx7dJFLp4HOwvE5eJRF1aJ13HfXqVm-0-683b4cdee401ad1e25fd59413c3ca0da)
叠加色块
第1步,绘制一个正方形,填充红色#ff464b;第2步,分别在正方形的上、下1/3叠加20%的白色、黑色;第3步,分别在正方形中、右1/3绘制40%、80%的黄色#ffe200;第4步,改变黄色图层的混合模式为叠加即可。通过这种方法,我们改变正方形的颜色,可以调配出其他许多颜色来。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0086_0002.jpg?sign=1738905352-8eAZsoMRtKuVjybW2jxyxk02M7OTJNMm-0-18c88d921eb0f688599061c780aa3ef9)
第1步
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0086_0003.jpg?sign=1738905352-cQGOBPV8WIm6Fy1Ctuyh1bHuiYB173tt-0-e397f45987bb0af34dc76b1f9f042697)
第2步
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0086_0004.jpg?sign=1738905352-FvgDvdPsgmMlq44lO8y34eeQ5htPzXif-0-b012819baf554d3573cf5bb974b72afb)
第3步
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0086_0005.jpg?sign=1738905352-VKHtf7PdUxXhZbtmbK6zZgtsnbKTMEEB-0-5186b905980c2cdc4b1f31c35bc1d42f)
第4步
Photoshop插件
Photoshop自带了一个调色板插件,可以很方便地进行色彩搭配,使用步骤很简单:打开拾色器选择一个颜色,进入“窗口-扩展功能-Kuler”,打开插件选择“创建”,插件自动生成了一组配色。你可以选择不同的配色方案,在下拉菜单中的选项分别是类似色、单色、三色组合、互补色、复合色、暗色、自定义。确定了配色方案后,点击面板下方的“添加到色板”,即可在色板中随时使用它们了。
![](https://epubservercos.yuewen.com/FEEE88/14037549205376206/epubprivate/OEBPS/Images/figure_0087_0001.jpg?sign=1738905352-Q2s5ouo4TtBZP3RCVNA0JqIieNP6Pxvp-0-2d23526dde632ea197271b4524fa63ad)