进阶版零基础学UI
上QQ阅读APP看书,第一时间看更新

3.3 创建调色板小技巧

调色板帮助我们在设计项目中建立色彩规范、提高工作效率,通过前面章节对色彩基础知识和快速进行UI配色的学习,本篇接着为大家介绍几种简单易用的创建调色板小技巧。这些小技巧都是笔者或其他设计师在日常工作中积累的经验总结,非常好用,在本书后面的“Material design配色和布局”和“配色网站”章节也有对创建调色板的讲解,请循序渐进学习。

收集色彩

在Dribbble上,每一幅作品右侧都带有一份配色文件,将其下载保存到色板,为自己在创作时提供灵感。具体的步骤是:下载色彩文件,进入“编辑-预设-预设管理器”,在预设下拉菜单选择色板,载入下载的色彩文件。

例如,需要设计一款美图拍照应用,产品定位于年轻女性,那么我们便可以在这里找到一组配色:三个同色系的粉色展现甜蜜、可爱、温馨,三角对立的黄色又让配色多了一分俏皮。

马赛克法

这种方法非常简单,不需要任何插件,借助Photoshop滤镜将图片马赛克化就可得到一组配色。例如,我们需要一系列同色系的蓝色,我们在网上找一张天空的图片,可以选择花瓣网或500px等专业图片网站,接着将图片在Photoshop中打开,进入“滤镜-像素化-马赛克”,调节单元格大小即可,如下图所示。

叠加色块

第1步,绘制一个正方形,填充红色#ff464b;第2步,分别在正方形的上、下1/3叠加20%的白色、黑色;第3步,分别在正方形中、右1/3绘制40%、80%的黄色#ffe200;第4步,改变黄色图层的混合模式为叠加即可。通过这种方法,我们改变正方形的颜色,可以调配出其他许多颜色来。

第1步

第2步

第3步

第4步

Photoshop插件

Photoshop自带了一个调色板插件,可以很方便地进行色彩搭配,使用步骤很简单:打开拾色器选择一个颜色,进入“窗口-扩展功能-Kuler”,打开插件选择“创建”,插件自动生成了一组配色。你可以选择不同的配色方案,在下拉菜单中的选项分别是类似色、单色、三色组合、互补色、复合色、暗色、自定义。确定了配色方案后,点击面板下方的“添加到色板”,即可在色板中随时使用它们了。