淘宝大学视觉营销及店铺装修上课件.ppt

这也淘宝商城首页的焦点图设计成品，主图的位置也是在整个版面的黄金分割点上 这些图的设计大家看到共同点了吗？是不是主体内容都在黄金分割点上？ 淘宝的设计师做多来的东西不服不行，呵呵，又是一个典型的黄金分割应用，我们一定要学习呀! 色彩的色相、饱和度和明度三个属性非常关键，如果大家把这三个属性搞清楚了，以后在色彩调配方面就绝对没有问题了！ 色相也就是颜色最基本的面貌，如果像将图片颜色发生变化，就只要调整它的色相就可以了。如，这个图中的紫色的帽子为了适应圣诞的大红，我们只要调整他的色相就可以了。 饱和度也就是颜色的深浅，如果我们想像让一个夏天的图片回到春天去，我们就可以调高它的饱和度，因为春天的绿更加亮丽，绿色更多。 明度就更好理解了，傍晚拍的图片由于曝光不够，我们就可以调整它的明度，当然了，现在的PS在增加了曝光度这个选项专门针对这种情况的，原理都是一样的。 对于非彩色，大家可以针对这个图片分别调整一下色相和饱和度，会发现图片不会有任何变化，只有调整明度太会变化。为什么呢？因为只有彩色才具有色相和饱和度的概念，非彩色的是没有色相和饱和度的。细心的同学也会发现，我们刚才在调整上面两幅图的色相和饱和度时，图片中的黑白灰是没有发生任何变化的。 学会了色彩的基本属性后，我们来做一个实例，姬美小铺现在是卖秋装的，为了营造一种秋天的氛围，我们的葡萄藤是绿色的，必须要将让它有枯黄的感觉，大家想一想应该调什么？色相 通过这个知识的学习，大家对以后图片的调色应该就没有问题了。当然了PS里还有很多调色的地方,如曲线、色彩平衡等，万变不离其中，只要调色都离不开这个知识点。 刚才我们讲的是调色，现在我们给介绍如何色。 用一种色彩，就我们要选的第一种颜色，也可以说是我们店铺的主色调之一，在这个颜色的基础上，我们再调出深浅不一的色彩，这样看起来色彩统一有层次感。 如我们的主色调是银灰色，我们在页面中配出深浅不一的银灰色，这样看起来色彩就会统一，而且有层次感。这种配方法在所有的设计中都会用到。 如何定出我们的主色调，可以根据我们所卖产品的客户群体来定，也可以根据我们的产品特点来定。如apple的产品看起来都晶莹剔透的，那么我们页面就和产品色调统一。 这个页的主色调是红色，我们可以看到页面中用到深浅不一的红色，还有深浅不一的灰色，这样的页面看起来是不是色彩统一，而且有很强的层次感？呵呵，大家以后可以分析任何一家由专业设计师装修的店铺，都会有这种配色技巧在里面。 其实这种配色技巧很简单，只要掌握了还是我们前面讲的色彩的三个基本属性，这里就没有问题了。只要把保证色调和饱和度不变，调亮度，就可以了。注意：在调色中，亮度将是我们的主角。 在这四个色块中，任意挑选两种颜色做渐变色都没有问题。这就是技巧，学会了可以受益终身哟，呵呵！~_~ （提示：我用的软件是fireworks8.0，Photoshop的调色板没有Fireworks方便。） 第二种色彩，也是我们接下来要找的第一个主色调的对比色。 什么是对比色？ 举个例子，我们黑板上写黑字，你就看不到，但是写白色的字你就可以看到。黑白色就是对比色。呵呵，我看到很多朋友的PPT页面，在蓝色上写黑字，或在白底上写黄字，这一看就知道不专业，这些都没有对比，离屏幕远了根本看不清楚。 任何一个页面如果没有对比色，这个页面看起来就会很单调，而且没有重点。也可以理解为，你想要哪个地方更突出，就要让哪个位置的对比更鲜明。 大多数设计师在选择对比色时就是凭感觉，如果我们的感觉不好怎么办？那就只有瞎选，标准是只要能看清楚就可以了，然而往往这里选出来的对比色，要么是不够清晰，要么是太刺眼，色调不统一。 这里的主角依然是亮度值，亮度值的范围是(0~240),那么它的黄金分割点就是240*0.618=148。 如果底色的亮度值在0~92之间，那么它的对比色的亮度值就是底色的亮度值加上148，只要保证这个亮度值不变，色相和饱和度可以任意调，当然为了保证色调统一，我们最好还是用同一色相的色彩。 如果底色的亮度值在148~240之间，那么它的对比色的亮度值就是底色的亮度值减去148，只要保证这个亮度值不变，色相和饱和度可以任意调，当然为了保证色调统一，我们最好还是用同一色相的色彩。 用Fireworks演示。 公式有个漏洞：如果底色的亮度值在92~147之间，加减148都超出亮度值的范围。那我们建议:不要用亮度值在92~147之间的颜色，作为大面积的背景色！ 有人说我就想要刺激一下买家的眼球！可以，但我们一定要注意这种颜色的面积不要过大，要让浏览者的眼睛可以避开你所设置这块儿。不然，浏览者可能就会反感了。如果一定要用这种亮度值的颜色作为背景，那么它们的对比色可以根据页面的主色调来定，由于这种颜色是偏亮的，如果整个页面的色调偏亮，那么它的对比色可以选