设计学堂:关于APP配色的一些常用色彩搭配技巧

最近自己也接触了很多APPUI界面设计的工作或任务,觉得色彩的搭配和色彩的选取决定我这个项目的成功与否!客户的满意度等等因素。所以,自己也百度和寻找一些色彩方面的知识和大师们的实践操作技巧!

15

第一个分享点:怎样提取自己满意的色彩

1、最直接的方法就是找到自己满意的图或者是跟项目搭边的图。

关键步骤,确定自己想要的风格,找大量的符合风格要求的图片,进行对比筛选,选出最符合自己要求的几张图片开始色彩的提取。

2、提取颜色

把选中的图片放入ps中,点击“存储为web所用格式”(如果没有色彩非常合适的图,可以再ps里适当的调整颜色再进行颜色提取),格式选为png-8,色块选择8,(数字越大色块越多,视自己需求而定)。

在颜色显示区域就会留下8种颜色(按照颜色在画面中所占的单位面积程序自动筛选),点击颜色区域右侧的下拉按钮,会找到“储存颜色表”,把他储存到桌面上或者你容易找到的地方。然后用ps打开,色斑中会显示刚才提取到的颜色。

扩展阅读:

草根视觉设计成长之路【设计学堂:色彩搭配】

适合新手学习网站设计与网页配色口诀

3、提取到的色彩怎样应用到我们的设计中

可以总结为以下3个小点:

1、导航文字及LOGO的颜色为最浅的蓝色。

2、Banner区域即大背景,这里用了咱们开始的图片,上边的大标题LOGO则用了最深的蓝色。

3、内容区域出现的提取到的三哥色相的色彩,如果只是排列剩下的几个颜色的话,颜色会很冲,我完全不能接受!所以找了几张图片用来过渡颜色,调整画面的节奏,现在看来效果还不错。内容区域的文字颜色与导航文字一致,都是很浅的蓝色。

4、内容区域的几个按钮并没有用提取的颜色,而是用白色叠加然后调整透明度出来的。(大孔雀老师前段时间在经验分享里发了一个色彩教程:网页配色的天然范儿。推荐大家去看下,看完后受益匪浅。)

4、配色工具的辅助或使用

关于配色的网站和工具很多,今天就跟大家推荐一个非常丰富的协调配色方案,并带AI编辑功能,可导入AI吸色,这个方案是我们很多国内优秀的设计师常用的工具!

文件下载地址:http://vdisk.weibo.com/s/IVS_2

1263436433728

 

 

总之,这些技巧还望大家灵活应用,如果单纯靠机器程序的话,自己的感觉依旧很难找。如果你真的对设计感兴趣的话请不要忘记设计师的三多:多看、多想、多练,看到,理解,通过自己的形式表现出来。

 

 

每天更新,
全站高品质素材免费下载!