观察颜色:为了使我们对这张卡片的上色能够轻松达到漂亮的效果,我们不能随随便便地挑选一些颜色。我们需要明白颜色之间的关系,为此,我们需要利用到色轮,色轮是将无数种颜色简化为12种基本色相。


12种基本色相,再加上明色及暗色。中间的色环是12种基色,而上方:(1)黄红蓝,是三原色,只有这三种颜色不是由其它的颜色调合而成。(2)二次色是三原色中间的颜色,每一种二次色都是由相邻的两种原色等量调合而成的颜色。(3)剩余的颜色中,则是三次色。他们是由相邻的原色及二次色调合而成。而内环及外环则是明色及暗色,是通过增加白色及黑色调合而成。
选择色域:真实世界中有无数中漂亮的颜色变化,但为了使设计变得简单,我们只选择色轮中已有的颜色。我们将会用到类比色来达到和谐的效果,然后用补色来产生对比及差异。

相同/相反:上图中,相邻色(即类比色)搭配总是能够产生和谐的视觉效果,因为他们都含有大量相同的颜色。在上面示意图所示区域中,每一种颜色都是黄色作为主导。而与其相对的另一边,则是补色,互为补色的两种颜色意味着它们没有共同的颜色,所以补色搭配能够产生强烈的对比。
明色及暗色:为了使我们在设计中所选择的色域范围更广,我们将整个色轮通过增加白色或黑色来变亮或变暗。这些就是不饱和颜色,不饱和颜色通常给人一种柔和、低调、朦胧及更意味深长的感觉。有趣的是,虽然我们是从三个色轮中取色,但所选择的颜色都可以互相交换,因为它们都具有相同的基色。
开始填色
现在我们要做的是,利用色轮分成十二个步骤及明暗两种色调来设计卡片。花纹图案将会采用类比色搭配,而文字则采用与其相对的补色,看一下效果如何:
第一种:

点击上图看大图
第二种:

点击上图看大图
第三种:

点击上图看大图
第四种:

点击上图看大图
第五种:

点击上图看大图
第六种:

点击上图看大图
第七种:

点击上图看大图
第八种:

点击上图看大图
第九种:

点击上图看大图
情非得已
21个Sketch实用高频小技巧2019-02-15
25款值得收藏的优秀网站模板免费下载2015-09-16
20套高质量的免费网页模版PSD素材2013-09-02
20款国外时尚大气的按钮开关PSD素材下载2013-07-31
CSS实例教程:十步学会用CSS建站2011-10-05
网页设计师:浅淡网页BANNER设计2010-09-27
网页细节教程:WEB设计精确点滴2010-09-13
网页设计中的点滴细节把握2010-09-01
总结交互组件创新的四种方式2010-06-28
最全的国外电子商务CSS模板下载2010-06-18
详细解析UI设计中搜索栏设计的技巧
相关文章6092019-03-31
21个Sketch实用高频小技巧
相关文章6572019-02-15
UI设计师必学栅格设计原理和技巧
相关文章4992018-11-29
设计师必须知道的版式设计三原则
相关文章4012018-10-10
设计师解读聊天气泡框不为人知的技巧
相关文章2182018-10-10
详解深色系网站界面的设计技巧
相关文章2092018-05-10
解析用户测试的基本步骤和沟通技巧
相关文章1972017-12-17
超全面的手机界面弹窗设计技巧分析
相关文章2702017-12-11
